html - 如何使 HTML 表中的颜色信息易于访问？

Question

使通常显示为单元格背景色的信息可访问(对于屏幕阅读器等)的最佳实践是什么？

这是我的表格的示例(为了保护无辜者而更改了姓名和号码):

该表包含温度。黄色和红色背景表示筛选结果。我的真实表格非常大，使其信息密集是一个高优先级，所以我不想只将筛选结果作为文本放入单元格中，因为这会使我的列更宽。理想情况下，我会在黄色和红色单元格上放置某种替代文本，其中包含“阳性测试结果”或“筛查失败”之类的内容。有没有办法在 HTML 表格中做到这一点？

我认为也许title在这里是正确的属性，但是internet says that is wrong .

Answer 1

简短回答

如果颜色带来真实信息，例如告诉它是否成功(绿色)或失败(红色)，最好的方法是将其以纯文本形式写在值旁边。 或者，您可以使用带有适当标记的图标。

更长的答案

WCAG 中规定的一般规则是不要仅通过颜色传达信息，基本意思是 除了颜色之外，您还必须添加其他内容，以便每个人都能获取信息。

您可以添加任何您喜欢的内容，即文本或图标。只要除了颜色之外还有其他方式来获取信息就可以了。

您可能想以纯文本形式编写信息，但使其仅对屏幕阅读器用户可见，如下所示:

<td>123<span class="sr_only"> Success</span></td>
<td>-45<span class="sr_only">Failed</span></td>

或者，使用带有这些附加警告的 aria-label:

1. 仅当元素是交互式的时，才保证考虑 aria-label。默认情况下，表格单元格不具有交互性。
2. aria-label 属性完全替换单元格的内容。所以你必须写 <td aria-label="123, success">123</td>而不是<td aria-label="success">123</td>因为在后一种情况下，屏幕阅读器用户将无法获得该值。

然而，这两者实际上都是糟糕的想法，并且不完全符合上述 WCAG 规则。 例如，色盲人可以看到屏幕，因此不需要屏幕阅读器，但可能无法区分红色和绿色。 因此他们将无法访问数据。

固定比例案例

如果你的颜色表达了一定的尺度，即绿色是好的，黄色是可以接受的，红色是不好的，并且如果颜色取决于固定值，即绿色高于 60，黄色在 40 到 60 之间，红色低于 40，那么事实上颜色没有带来任何新信息。 它只是一个视觉指示，以便您可以快速看出什么是好的，什么是坏的。如果删除颜色，您肯定会失去一些轻松感，但信息仍然存在于值本身中。

在这种情况下，在每个单元格中添加“好”、“可接受”或“坏”的文本很快就会变得无用的噪音， 因为只要您记住比例，该值本身就会告诉您它是好是坏。

当然，您将以纯文本形式清楚地解释颜色的含义(可能位于表格上方或下方)，并使所有用户都可以看到这些信息。