div上的Aria标签样式为图片

Question

在表格单元格中，我有一个<span>元素，该元素的样式为图像，并根据其颜色显示界面状态（启用/禁用/错误）。

对于有适当视力的用户，它是紧凑且易于理解的。 我不想更改它。 但是由于该范围内没有文本，因此屏幕阅读器不会读取该文本。 （可以理解，但是有问题）

对于屏幕阅读器，处理此类元素的正确方法是什么？

---

预期的解决方案是为屏幕阅读器添加带有文本的aria-label，但是，正如我在其他主题中发现的那样，“ aria-label在<div>或<span>上均不起作用”。 正如我在JAWS 15上测试的那样，这是真的，但是在JAWS 18中，这样的标签正好被读取（为什么？）。

我也尝试在此范围内添加role="img" ，并在aria-label和/或alt和/或title添加文本，但JAWS 15中没有结果。

Answer 1

“普通用户”是什么意思？ 您是在谈论视力较弱的用户吗？ 后者也是普通用户。

对于低视力用户，是的，通常使用aria-label 。 感谢您考虑可访问性问题。

但是对于色彩不足的用户，您也会遇到问题。 那些无法区分某些颜色的颜色。 颜色是传达物体状态的唯一方法吗？ 也有相关的图标吗？ 颜色不足的用户不会使用屏幕阅读器，因此不会从aria-label受益。

在html或aria规范中，尚不清楚<span>的默认角色。 aria-label应用于可访问名称的计算中，并且步骤2D仅在元素为表示性元素（即role='presentation'或role='none' ）时才应忽略aria-label。 因此，如果<span>被认为是呈现性的，则其aria-label将被忽略。 JAWS似乎以这种方式解释它，但是NVDA却没有。 Firefox中的NVDA将读取<span>的aria-label 。

因此，最好的选择是给<span>一个角色，例如role='img'或role='note' ，以便您也可以给它一个aria-label ，但这也将导致跨度待宣布。

或如上文所述，使用带有alt文本的真实<img> 。