Skip to main content

Screen Reader Accessibility

When it comes to designing for screen readers, what works visually often doesn't work when spoken aloud, and vice versa.

If you can't relate, try using a screen reader to read website. While more and more websites are adapting to take accesibility into account, even the best-designed interactions available today take time to get used to. (One of my biggest take-aways from using a screen reader is that you should always provide links to let screen reader users skip to your main content. It's incredibly annoying to have to listen to or skip through a seemingly endless list of links everytime you visit a new page.)

Luckily, you can always add targeted content in order to help create a smoother experience. For instance, hidden text that more clearly explains the purpose of elements. You can also tell screen readers to not read text that might be confusing/unhelpful/irritating out of visual context.

Using a screen reader on this blog, I realized that the way post dates were formatted could be confusing when read outloud:

<a href="/blog/week-9" class="post">2014-11-15</a>

While "2014-11-15" looks fine visually, the screen reader zips through it as "two zero one four one one one five".

Hiding Elements Visually

To give a screen reader a better formatted date to work with, I added a span containing the post date formatted as follows:

<a class="post" href="/blog/week-9">
	<span class="visually-hidden">Post Date:November 15, 2014</span>

Notice the "visually-hidden" class on that span? Here's Devon Persing's CSS for hiding elements visually:

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

While display: none and visibility: hidden are handy for hiding elements from users, they also hide elements from screen readers. The above CSS hides elements, but doesn't remove them from the page.

At this point, my post dates sounded like this: "Post Date November one five two zero one four two zero one four one one one five"

Better, but we're not quite there yet.

Hiding Elements Aurally

Just as you can hide elements visually, you can also hide elements aurally with aria-hidden. Just add the aria-hidden="true" attribute to your element, and most screen readers will skip over that element as if it wasn't there:

<a class="post" href="/blog/week-9">
	<span class="visually-hidden">Post Date:November 15, 2014</span>
	<span aria-hidden="true">2014-11-15</span>

(It's important to note that aria-hidden is just a suggestion and doesn't actually remove anything from the page, much like using visually-hidden doesn't completely remove an element from the page.)

At this point, a screen reader would read the above code as "Post Date November one five two zero one four". Much smoother, though not optimal.