search

osompress / simple-social-icons

Plugin: Simple Social Icons
62 stars 33 forks source link

Accessibility improvements #23

Closed shannonsans closed 8 years ago

shannonsans commented 8 years ago

Addresses the following:

  1. Add a:focus to all link styles that appeared on a:hover. This allows viewers who navigate the page using a keyboard (instead of a mouse) to see where they are when they tab to the social links.
  2. Adds outline styling to the icon links on a:focus, but not on a:hover. This addition to the a:focus is because color shouldn't be used alone to indicate a change. (On hover, the mouse cursor changes and this is enough.)
  3. Wrap the icon font in a <span aria-hidden="true" /> tag so screen readers don't announce it. (Using speak:none on the <a> tag doesn't work because a link is always announced, so removed that.)
  4. Add a <span class="sr-only" /> tag around a plain text description of the icon, and include this in the links. The .sr-only class hides the text from sighted users but gives assistive technology a label to announce. Without this, a screen reader just announces "Link." each time it reaches an icon -- it doesn't know where the link is going. With the new span, the screen reader announces "Link: Linkedin."

Here's a brief video demonstrating the changes: https://youtu.be/mmHJZ5LBAVQ

nathanrice commented 8 years ago

Would it be preferable to use the screen-reader-text class instead of sr-only?

shannonsans commented 8 years ago

Yes, probably. I think I used the Bootstrap name.

nathanrice commented 8 years ago

If you don't mind changing that, I can merge and release the update.

shannonsans commented 8 years ago

Done - thanks Nathan!