Aria-label on div styled as image

Question

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.

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> ". As I tested it on JAWS 15, it is true, but in JAWS 18 such labels are being read just fine (why?).

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.

Answer 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. 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 .

It's not clear in the html or aria specs on the default role of a <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. So, if a <span> is considered presentational, then its aria-label will be ignored. JAWS seems to be interpreting it this way but NVDA does not. NVDA in firefox will read the aria-label of a <span> .

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.

Or as one commented above, use a real <img> with alt text.