search

patchew-project / patchew

A patch email tracking and testing system
MIT License
72 stars 24 forks source link

Ensure all glyphs have accessible alternatives #99

Open bonzini opened 5 years ago

bonzini commented 5 years ago

See https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility

If your icons are purely decorative, you’ll need to manually add an aria-hidden attribute to each of your icons so they’re accessible.

In the case of focusable interactive elements, add the aria-label attribute.

If your icons have semantic meaning and are not focused, you’ll need to manually add a few things so that your icon is appropriately accessible:

  • aria-hidden attribute.
  • Provide a text alternative inside a (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.
  • title attribute on the icon to provide a tooltip for sighted mouse users.

I'm not sure we have any in the third category.