可访问性：如何以可访问性方式标记仅通过颜色传达的信息？答案

【问题标题】：Accessibility: How to mark up information conveyed only by colour accessibly?可访问性：如何以可访问性方式标记仅通过颜色传达的信息？
【发布时间】：2013-12-04 15:57:01
【问题描述】：

我正在开发一个 Web 应用程序，该应用程序本质上是为法律文件提供 Diff。也就是说，它可以以类似于图形 Diff 实用程序的方式显示法律文件随时间的变化。

它使用了比我的示例更多的文本样式（至少 3 种颜色和删除线）来传达含义。我想就如何尽可能容易地实现这一点提出建议。标记可能是相当无语义的，例如

<span class="col-repealed">The Commissioners before whom an appeal under this section is brought</span>  <span class="col-inserted">On an appeal that is notified to the tribunal</span>, the tribunal must consider whether the registration of the pension scheme ought to have been withdrawn.

我将使用色盲模拟器进行测试，以确保所有颜色都能充分区分。我还计划创建一个黑白打印样式表（我可能会将颜色更改为各种下划线或轮廓样式，并打印样式的键。）

不过，我想知道屏幕阅读器的用户。我相信这需要一个听觉样式表，不同的声音代表不同的颜色。我以前从未做过听觉样式表。他们是否得到足够的支持，值得付出努力？还有其他我可以或应该做的事情吗？（例如跨度上的标题属性）

【问题讨论】：

如果您要描述文档中的插入和删除，请使用 <ins> 和 <del>。
我想说这篇文章中解释的方法可能对你有用：webaim.org/techniques/css/invisiblecontent 这基本上概述了如何在屏幕上隐藏一些内容，同时仍然有屏幕阅读器可以访问的文本。如果您“隐藏”的文本具有足够的描述性，那么我会说您可以轻松地向用户指示内容。更进一步，如果找到某些样式元素，您可以使用 Javascript 或 JQuery 自动添加您的内容。

标签： html css accessibility screen-readers

【解决方案1】：

你需要另外两种方式来表达意思：

为无法访问颜色的用户提供的另一个视觉提示
为根本无法访问视觉设计的用户提供语义注释

另一个视觉提示

对于废除，删除线就足够了，因为这与颜色无关。

对于插入，您应该添加额外的提示（参见 WCAG 2.0：1.4.1 Use of Color），例如边框、下划线等。

语义注释

使用 HTML

HTML(5) 定义了元素del and ins for "edits to the document"。

所以你的示例标记应该变成：

<del>The Commissioners before whom an appeal under this section is brought</del>  <ins>On an appeal that is notified to the tribunal</ins>, the tribunal must consider whether the registration of the pension scheme ought to have been withdrawn.

使用自然语言

如果您不能使用它，则必须在文本中提供废除和插入两者的开头和结尾。这会变得非常混乱。

<span>START REPEAL 1</span> <span class="col-repealed">The Commissioners before whom an appeal under this section is brought</span> <span>END REPEAL 1</span>  <span>START INSERTION 1</span> <span class="col-inserted">On an appeal that is notified to the tribunal</span> <span>END INSERTION 1</span>, the tribunal must consider whether the registration of the pension scheme ought to have been withdrawn.

丑陋，而且很难掌握。

带字符

类似的还有特殊字符的使用（例如ISO 5776、更正/校对标记……）。

对于插入，例如，half brackets 表示英语，即 ⌊ 和 ⌋：

半括号在英文中用于标记添加的文本，例如在翻译中：

“比尔锯⸤her⸥”。

对于废除，例如，deleatur，即₰（虽然没有明确的开始和结束）：

dele 或 deleatur […] 是一个校对符号，用于标记要删除的内容。

但我猜（虽然我不知道）大多数屏幕阅读器不会阅读它们。

（当然这些可以用作视觉提示，通过 CSS 插入。）

特殊标记语言

http://criticmarkup.com/ 是一个提供简单的纯文本标记语言来“跟踪文档更改”的项目。根据您的访问者，您可以使用这种（或类似的）标记语言来传达编辑内容。

【讨论】：

【解决方案2】：

让我以我是 Jaws 的长期用户但没有太多 Web 开发经验的事实作为开头。目前，除了Emacspeak 之外，没有任何屏幕阅读器支持听觉样式表，据我根据一些快速研究得出的结论。由于 Emacspeak 主要是由盲人程序员为其他盲人程序员编写的，因此我认为要求应用程序的盲人用户使用它不会成功。

可能的解决方案是使用带有 alt 标签的图像。我不确定您是否可以创建不可见的单像素图像，或者您是否必须在应用程序中使用图像切换。我正在考虑类似以下的事情。

<begin replacement text alt tag>
This is some new replacement text
<end replacement text alt tag>
<begin original text alt tag>
This is the original text that will be replaced in the new version.
<end original text alt tag>
This is text that will not be changed by new versions.

【讨论】：