Accessibility considerations for icons and SVGs

[cehfisher]

Need to review the use of icons/SVGs from an accessibility perspective. Depending on how they were added to the site and/or how they are being used, additional elements might need to be added to make more user-friendly.

From @fuzzbomb:

Icons may need text alternatives, but it depends where they get used.

The SVGs in the patch have elements. Note text alternatives should be translatable. For standalone SVGs which can be reused, isn't the best approach for text alternatives, which need to vary in context.

[fuzzbomb]

There's a missing word in the quote above. It originally said:

The SVGs in the patch have <title> elements.

I think this comment was lifted originally from d.o and some tags got stripped out.

[fuzzbomb]

I noticed a couple of other things. The use of SVG titles and descriptions, together with ARIA labelling, is over-keen.

• Some SVGs have <title> elements which differ from the content of the aria-label on a surrounding <button> element. These <title> elements can either be taken out, or used as the target of an aria-labelledby instead of aria-label on the button. At the moment the button has one accessible name, but the icon has a different one. The button label wins in this case: "Toggle the menu".

  <button class="menu-main__toggle" aria-label="Toggle the menu">
  <svg aria-labelledby="menu-toggle-title menu-toggle-desc">
      <title id="menu-toggle-title">Menu toggle icon</title>
      <desc id="menu-toggle-desc">Hamburger icon for menu toggle.</desc>
      // ...
  </svg>
  </button>

• <desc> elements inside some SVGs which serve no useful purpose. They can be taken out. In the instance above, the aria-labelledby="menu-toggle-title menu-toggle-desc" references mean the icon's accessible name is computed as "Menu toggle icon Hamburger icon for menu toggle", which is kinda gibberish. It gets overridden by the button's aria-label any way.

This particular example isn't actually harmful, but it's messy and could be a maintenance risk.

[thamas]

The comment above is about #130. Is there any other svg to be improved? (Maybe open a separate issue for every svg which should be changed…)

[fuzzbomb]

Follow-up has been created on Drupal.org

Remove unnecessary TITLE and DESC elements from Umami SVG files