简体繁体 English

div上的Aria标签样式为图片

[英]Aria-label on div styled as image

原文 2018-03-28 11:07:37 3 1 html/ wai-aria/ screen-readers/ jaws-screen-reader

In table cell I have a <span> element, that is styled as image and displays state of interface (Enabled/Disabled/Error), based on it's color. 在表格单元格中，我有一个<span>元素，该元素的样式为图像，并根据其颜色显示界面状态（启用/禁用/错误）。

For users with proper vision, it is compact and understandable. 对于有适当视力的用户，它是紧凑且易于理解的。 I don't want to change it. 我不想更改它。 But as there is no text in this span, it is not read by screen reader. 但是由于该范围内没有文本，因此屏幕阅读器不会读取该文本。 (understandable, but problem) （可以理解，但是有问题）

What is the correct approach to handle such elements for screen readers? 对于屏幕阅读器，处理此类元素的正确方法是什么？

Expected solution would be to add aria-label with text for screen reader, but, as I found in other topics, "aria-label does not work on <div> nor <span> ". 预期的解决方案是为屏幕阅读器添加带有文本的aria-label，但是，正如我在其他主题中发现的那样，“ aria-label在<div>或<span>上均不起作用”。 As I tested it on JAWS 15, it is true, but in JAWS 18 such labels are being read just fine (why?). 正如我在JAWS 15上测试的那样，这是真的，但是在JAWS 18中，这样的标签正好被读取（为什么？）。

Also I tried to add role="img" to this span, and to add text in aria-label and/or alt and/or title with no result in JAWS 15. 我也尝试在此范围内添加role="img" ，并在aria-label和/或alt和/或title添加文本，但JAWS 15中没有结果。

1 个解决方案

What do you mean by "normal users"? “普通用户”是什么意思？ Are you talking about sighted users compared to low-vision users? 您是在谈论视力较弱的用户吗？ The latter are normal users too. 后者也是普通用户。

For low-vision users, yes, an aria-label is normally the way to go. 对于低视力用户，是的，通常使用aria-label 。 Thank you for considering accessibility issues. 感谢您考虑可访问性问题。

But you'll also have an issue for color deficient users. 但是对于色彩不足的用户，您也会遇到问题。 Those that can't distinguish between certain colors. 那些无法区分某些颜色的颜色。 Is color the only means for conveying the state of the object? 颜色是传达物体状态的唯一方法吗？ Is there an associated icon too? 也有相关的图标吗？ Color-deficient users won't be using a screen reader so won't benefit from an aria-label . 颜色不足的用户不会使用屏幕阅读器，因此不会从aria-label受益。

It's not clear in the html or aria specs on the default role of a <span> . 在html或aria规范中，尚不清楚<span>的默认角色。 The aria-label should be used in the accessible name calculation and step 2D says only if the element is presentational (meaning role='presentation' or role='none' ) should the aria-label be ignored. aria-label应用于可访问名称的计算中，并且步骤2D仅在元素为表示性元素（即role='presentation'或role='none' ）时才应忽略aria-label。 So, if a <span> is considered presentational, then its aria-label will be ignored. 因此，如果<span>被认为是呈现性的，则其aria-label将被忽略。 JAWS seems to be interpreting it this way but NVDA does not. JAWS似乎以这种方式解释它，但是NVDA却没有。 NVDA in firefox will read the aria-label of a <span> . Firefox中的NVDA将读取<span>的aria-label 。

So your best choice might be to give the <span> a role, such as role='img' or role='note' , so that you can give it an aria-label too, but that will also cause the role of the span to be announced. 因此，最好的选择是给<span>一个角色，例如role='img'或role='note' ，以便您也可以给它一个aria-label ，但这也将导致跨度待宣布。

Or as one commented above, use a real <img> with alt text. 或如上文所述，使用带有alt文本的真实<img> 。