如何使高亮符合508条款要求？

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>

- jEremyB

---

你看过 <mark /> 元素了吗？ - cimmanon

Answer 1

这个表格目前已经符合508条款。在考虑网页和网络应用程序时，Section 508规则是指508条款1194.22节中的一组16条规则。其中没有一条规则禁止例如使用屏幕阅读器无法识别的标记。实际上，它们可能会识别em，但考虑符合性时这是不相关的。

规则(c)说：“网页应设计成所有通过颜色传达的信息也可以通过上下文或标记以外的方式获得。”您正在使用背景颜色来强调em，但这没关系，因为在使用em元素的标记中，信息某些单词被强调了。无论某些软件是否真正识别该标记并传达其含义，都不能成为符合规定的标准，因为该法律对此事并未作出任何规定。

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

- Jukka K. Korpela

Answer 2

看起来是一个无障碍问题：

508章节无障碍指南

一些视力低下的人经常关闭样式。因此，请记住，当您放置时，浏览器会看到一个元素表示其内容的重点强调.ref 黄色样式不能实现他的意图。

尝试使用。

HTML标签用于标记或突出显示有参考价值的文本，因为它在另一个上下文中具有相关性。ref 如果您想遵循这个w3c标准，请阅读这篇有趣的文章，了解可能的508合规假阳性。false positives of 508 compliance

- Lan

---

我相信这个答案是正确的 - 不幸的是测试人员仍然未通过它。他认为除非屏幕阅读器实际朗读出来，否则就不符合标准。另外，你知道强制屏幕阅读器（如 JAWS）朗读某些内容的方法吗？如果用户没有视力而不仅仅是低视力，这将是必要的。 - jEremyB

你指的是哪个508条例？请注意，508条例与W3C建议有很大区别（尽管它们在某些原则上相似，特别是WCAG）。 - Jukka K. Korpela

这并没有回答问题。使用 mark 而不是 em 显然会降低可访问性，因为它的支持范围较窄。而且它绝对不是一个通用的强调元素。此外，这与 508 规则似乎没有明显的联系。 - Jukka K. Korpela

<mark> 的意图，如参考文献中所述，是“在一个文档中表示一个标记或高亮显示的文本运行”。另一份参考文献引导我了解 508 规则 (c)。答案需要一些阅读，但所有正确的信息都在那里。事实上，使用 <em> 标签高亮文本并不需要使用 CSS，这是一种改进。虽然 mark 标签的支持范围较窄，但它可以在我需要支持的浏览器上正常工作。 - jEremyB

Answer 3

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

当用户禁用CSS时，他们不再获得红色粗体文本，但是现在会出现隐藏的文本。这个隐藏的文本也可以被屏幕阅读器读取。

例如：提交者名字字段已编辑：

我们还使用图标来提醒用户更改，并添加了信息性的alt文本，如“提交者编辑的名字字段”。

希望这有所帮助！

- Lauren