Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure all glyphs have accessible alternatives #99

Open
bonzini opened this issue Nov 26, 2018 · 0 comments
Open

Ensure all glyphs have accessible alternatives #99

bonzini opened this issue Nov 26, 2018 · 0 comments
Labels
good first issue Start here!

Comments

@bonzini
Copy link
Contributor

bonzini commented Nov 26, 2018

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.

@bonzini bonzini added the good first issue Start here! label Nov 26, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Start here!
Projects
None yet
Development

No branches or pull requests

1 participant