如何使突出显示符合 508 标准？答案

【问题标题】：How can highlighting be made 508 compliant?如何使突出显示符合 508 标准？
【发布时间】：2013-11-05 17:45:23
【问题描述】：

如何使表格中突出显示的文本符合 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>

【问题讨论】：

你看过<mark />元素吗？

标签： html css section508

【解决方案1】：

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

规则 (c) 说：“网页的设计应使所有用颜色传达的信息在没有颜色的情况下也可用，例如来自上下文或标记。”您正在为em 使用背景颜色，但这没关系，因为在使用em 时，某些单词以某种方式被强调的信息在标记中元素。某些软件是否真正识别该标记并传达其含义不能成为遵守对此事没有任何说明的法律的标准。

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

【讨论】：

【解决方案2】：

这似乎是一个可访问性问题：

第 508 节无障碍指南

一些视力低下的人经常会关闭这些样式。所以记住当你输入<em>时，浏览器会看到一个

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

而黄色的风格不会达到他的意图。

试试<mark>。

HTML 标记用于将文本指示为已标记或出于参考目的而突出显示，因为它在另一个方面的相关性语境。 ref

如果您想遵循这个 w3c 标准，请阅读这篇有趣的文章，了解可能的false positives of 508 compliance

【讨论】：

我相信这个答案是正确的 - 不幸的是，测试人员仍然失败了。他说除非屏幕阅读器真的大声朗读出来，否则它是不合规的。顺便说一句，您是否知道强制屏幕阅读器（即 JAWS）大声朗读某些内容的方法？如果用户没有视力而不仅仅是低视力，这将是必要的。
您指的是哪个 508 指南？请注意，508 指南与 W3C 建议完全不同（尽管它们与 W3C 建议共享一些原则，尤其是 WCAG）。
这没有回答问题。当然使用mark 而不是em 减少可访问性，因为它没有得到广泛的支持。它绝对不是突出显示的一般元素。此外，这与 508 规则没有明显的联系。
参考文献中给出的的意图是“在一个标记或突出显示的文档中表示一系列文本”。另一个参考将我引向了 508 规则 (c)。答案确实需要阅读，但所有正确的信息都在那里。 mark 将在不使用 css 的情况下突出显示文本这一事实是对使用 的改进。该标记的支持较少，但它适用于我需要支持的浏览器。

【解决方案3】：

在我最近参与的一个项目中，我们希望在视觉上区分旧数据和新更新的数据。我们最终使用粗体红色文本来“突出”已进行的编辑。由于您不能仅以颜色或样式将信息传递给用户，因此我们在表单控件前面添加了“隐藏”文本（如果它被编辑（在后面的代码中使用标签可见性完成））。我们使用 CSS 为视觉用户在屏幕外“隐藏”此文本。

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

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

我们还使用图标来提醒用户注意更改，并添加了信息丰富的替代文本，例如“提交者编辑的名字字段”。

希望有帮助！

【讨论】：