Accessible icon labels

[darekkay]

I've posted this on Hacker News already, but I think it's better to have this in the GitHub repository as well.

---

I've also tested an example icon with Firefox + NVDA (inline SVG), which leads to the following screen reader announcement:

Add Icon of a plus sign enclosed in a circle graphic

This has multiple issues from the accessibility perspective:

1. IF you are using a title + description, use aria-labelledby for the main label (= title) and aria-describedby for the description. Right now there is no separation and both labels will be read without a pause, making no sense (what is an "add icon of a plus sign .."?).

2. I would advice against using a description altogether. A screen reader user does not care about how the icon looks. He/she cares about the action it performs. So here, "Add" (depending on the context) is more than enough. As a general tip: Screen reader users should have access to the same information as sighted users. That's why we don't describe decorative images for example (alt=""), because there is no information behind it.

3. "Icon of" is unnecessary. As you can see in the NVDA output, when using "role=img" the user already knows it's an graphic. Hence, "Icon of" or "Image of" should not be used in image descriptions.

4. Keep in mind, there are still some issues with SVGs and screen readers to think about. Therefore I also prefer to use the labels on the enclosing elements (buttons, links) instead.

As discussed in the HN thread, wrong or false labels do in fact cause more harm than good. I understand that you want to provide sane default, but I would rather encourage people to edit the labels themselves. For example, you could add an explanation with some examples somewhere on the page.

I hope, you find my tips helpful. Keep up the good work!

[mikolajdobrucki]

Thanks a lot for tips, very appreciated! After consulting this with a few more people I will try to improve this as soon as I can, although may take a while as it's quite a lot of icons :)