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.