html - 可访问性:如何将仅通过颜色传达的信息标记为可访问？

Question

我正在开发一个 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.

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

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

Answer 1

您需要两种额外的方式来表达意思:

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

另一个视觉提示

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

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

有关更多示例，请参见“Ensuring that additional visual cues are available when text color differences are used to convey information”。

语义标注

使用 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对于英语，即 ⌊ 和 ⌋:

Half brackets are used in English to mark added text, such as in translations:

"Bill saw ⸤her⸥".

对于废除，例如 deleatur ，即 ₰(虽然没有明确的开始和结束):

A dele or deleatur […] is a proofreading symbol used to mark something for deletion.

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

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

特殊标记语言

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