div 上的 Aria-label 样式为图像答案

【问题标题】：Aria-label on div styled as imagediv 上的 Aria-label 样式为图像
【发布时间】：2018-03-28 11:07:37
【问题描述】：

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

对于视力正常的用户来说，它简洁易懂。我不想改变它。但由于此跨度中没有文本，因此屏幕阅读器无法读取。（可以理解，但有问题）

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

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

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

【问题讨论】：

aria-labelledby 怎么样？
@DeepuReghunath 它的工作方式与 aria-label 相同。（可以肯定的是，我在 JAWS 15 上对其进行了测试）。
和元素也不应该支持它。
您是否无法为此添加正确的标记（即img 和alt）？

标签： html wai-aria screen-readers jaws-screen-reader

【解决方案1】：

“普通用户”是什么意思？与低视力用户相比，您是在谈论有视力的用户吗？后者也是普通用户。

对于低视力用户，是的，aria-label 通常是要走的路。感谢您考虑无障碍问题。

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

在 html 或 aria 规范中并不清楚 <span> 的默认角色。 aria-label 应该在 accessible name calculation 中使用，并且步骤 2D 表示只有当元素是展示性的（意思是 role='presentation' 或 role='none'）才应该忽略 aria-label。因此，如果<span> 被认为是展示性的，那么它的aria-label 将被忽略。 JAWS 似乎是这样解释的，但 NVDA 没有。 Firefox 中的 NVDA 将读取 aria-label 的 <span>。

所以你最好的选择可能是给<span>一个角色，比如role='img'或role='note'，这样你也可以给它一个aria-label，但这也会导致span的角色待公布。

或者正如上面评论的那样，使用真正的<img> 和alt 文本。

【讨论】：

“普通用户”——我不喜欢这样使用这个词，我会更新它。对于色彩不足的用户，有高对比度颜色的单独主题 - 它们也被覆盖。至于role='img' - 不幸的是它不起作用。也许我会接受最后一个建议——使用<img> 标签。谢谢你的建议。
你能详细说明role='img' 的“不工作”吗？只是为了确认一下，你用的是img还是image，前者是正确的。从屏幕阅读器的角度来看，使用<img> 或role='img' 应该是完全相同的。两者都应该工作。我只是好奇为什么它不起作用。 <div> 或 <span> 默认情况下没有角色，因此向它们添加 aria-label 并没有真正做任何事情。如果您在它们上指定角色，则应读取标签。