Question

如何使表508中的突出显示文本符合要求？目前我将文本包装在em标签中并添加aria标签以引起注意它具有黄色背景的事实。显然，这个替代标记不合规，因为它不被屏幕阅读器读取。

<table style="border: solid 1px black;">
    <p>Search results for the term "will"</p>
    <thead>
        <th>first name</th>
        <th>last name</th>
        <th>occupation</th>
    </thead>
    <tbody>
        <tr>
            <td>Joe</td>
            <td><em style="background-color: yellow; font-style: normal;" aria-label="highlighted search term">Will</em>iams-Harver</td>
            <td>sales clerk</td>
        </tr>
        <tr>
            <td><em style="background-color: yellow; font-style: normal;" aria-label="highlighted search term">Will</em></td>
            <td>Stevens</td>
            <td>truck driver</td>
        </tr>
    </tbody>
</table>

Answer 1

该表与现在一样符合508。在考虑网页和Web应用程序时，第508条规则是指第508条第1194.22节中的一组16 rules。例如，没有规则禁止使用屏幕阅读器无法识别的标记。事实上，他们可能会认出em，但在考虑一致性时这是无关紧要的。

规则（c）说：“网页的设计应使所有用颜色传达的信息也可以没有颜色，例如来自上下文或标记。”你使用em的背景颜色，但那是好的，因为信息在使用em元素时，标记中某些单词以某种方式强调。某些软件是否真正认识到该标记并传达其含义不能成为符合对该事项一无所知的法律的标准。

通过将font-style设置为normal，您可以覆盖em（斜体字体）的常见默认渲染。这意味着当禁用颜色设置时（例如，通过用户样式表使白色的所有内容都变黑）以满足个人的需要，em元素将显示为普通文本。这可以被描述为违反规则（b）的精神。但是在一致性方面，重要的是这封信，并且标记中的信息是。

Answer 2

似乎是一个无障碍问题：

第508节辅助功能指南

有些低视力的人经常会关闭这些风格。所以请记住，当您放置<em>时，浏览器会看到

元素表示其内容的重点强调。 ref

黄色风格无法达到他的意图。

尝试<mark>。

HTML标记用于将文本指示为标记或由于其与另一个相关性而突出显示以供参考上下文。 ref

如果您想遵循此w3c标准，请阅读这篇有关可能的false positives of 508 compliance

的有趣文章

Answer 3

在我最近工作的一个项目中，我们希望在视觉上区分旧数据和新更新的数据。我们最终使用粗体红色文字来突出显示＆＃34;已编辑的编辑。由于您无法仅以颜色或样式向用户传递信息，因此我们添加了“隐藏的”＃34;表单控件前面的文本（如果已编辑）（使用标签可见性在后面的代码中完成）。我们使用CSS来隐藏＆＃34;这个文本屏幕外的视觉用户。

当用户禁用CSS时，他们不再获得红色粗体文本，但现在会显示隐藏文本。隐藏文本也由屏幕阅读器读取。

示例：由提交者编辑的字段名字：

我们还使用图标提醒用户进行更改并添加信息性替代文字，例如＆＃34;提交者编辑的名字字段。＆＃34;

希望有所帮助！

如何突出显示508兼容？

3 个答案: