a11y improvements

[eelcoj]

I am wondering if there are attributes that can be added by default that would improve a11y?

[goulvench]

Hi! I can't provide code at the moment but here's a link to explain the various options for accessible icons: https://css-tricks.com/accessible-svg-icons/

TL;DR: it depends.

The long version:

• if the image is decorative, use aria-hidden="true" to hide it from screen readers and you're done.
• if the image provides useful information:
  • either give it a role="img" attribute and add a <title>#{title}</title> tag,
  • or add an aria-label="#{title}" to the parent element (link, button), and use aria-hidden="true" to hide the image.

The simplest implementation for the library would be to just add aria-hidden="true" by default, and explain that the icon needs to sit beside text or be nested inside a parent with aria-label="#{title}".

Another (slightly costlier) option would be to accept an alt parameter, and inject it as a title tag if it's present, or add the ARIA hidden attribute if it's empty or nil.

Additionally, adding a title attribute is usually helpful for icon-only links and buttons, because sometimes icon designs can be unclear, ambiguous, or simply fail to load. Because accessibility is not only about blind users but also visually impaired, and mental issues, and temporary conditions: headache, cracked screen...

[eelcoj]

Thanks for the insights, @goulvench. Would like to move this forward some how.

It's tricky. There's nothing that can be added to Rails Icons to “make it work” (not sure if adding aria-hidden=true is the way to go but default?). It really depends on the situation?

Thinking of these changes as a starting point:

• make aria a first-class attribute (similar to the data attribute);
• extend docs to give best practices on this topic.

Any expert who wants to chime in too?

[goulvench]

The simplest solution would be to just add the aria attribute, add a warning in the documentation, and move on, because ultimately it's the developer's job to add text or an aria-label in the right place, which is outside the scope of this gem.

The title option is more cumbersome, as the icon may already have a title tag, which could need to be overwritten or left as is.

[eelcoj]

Closing this per comments above. ☝ If you read this, feel free to add your comments or suggestions if you have any professional insights.