Today Icelab Learned

Improving accessibility with visually hidden labels

Accessibility is something that’s always in the front of our minds when building websites at Icelab. It’s particularly important for Government work which requires specific WCAG adherence.

A pattern we use often is to visually hide additional descriptive labels. These labels will be announced by screen readers but not rendered on the screen. Take this common snippet:

ul.social-icons__list
  li.social-icons__list-item
    a.social-icons__anchor href="http://twitter.com/andymccray"
      i.fa.fa-twitter
  li.social-icons__list-item
    a.social-icons__anchor href="mailto:andy@icelab.com.au"
      i.fa.fa-envelope

With that we have a nice Twitter bird and envelope icon (courtesy of Font Awesome). Perfect!

…well, not so perfect really. We can make the experience much nicer for visually impaired users with a little extra effort:

ul.social-icons__list
  li.social-icons__list-item
    a.social-icons__anchor href="http://twitter.com/andymccray"
      span#twitter-label.hide-visually Follow Andy McCray on Twitter
      i.fa.fa-twitter aria-labelledby="twitter-label"
  li.social-icons__list-item
    a.social-icons__anchor href="mailto:andy@icelab.com.au"
      span#email-label.hide-visually Email Andy McCray
      i.fa.fa-envelope aria-labelledby="email-label"

We’re also using the aria-labelledby attribute to provide further clarification to screen readers.

And the CSS:

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.hide-visually {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

And with that our screen reader users will have a much friendlier experience getting in touch.