How To Make Your Site Screen Reader Ready
With all the improvements in the Web Design in the last couple years it’s easy to forget to make your site accessible to screen readers. Thankfully screen readers have a couple of tricks up their sleeves to help you make your site sound as pretty as it looks. Here’s a couple steps that I used to upgrade one of our sites to be screen reader accessible.
1. Get a Program To Test With
In order to measure improvement and compliance you’re going to need some method of testing. Thankfully there’s a plethora of tools you can use to see how your website fairs without the lights on. The two I used were ChromeVox and, to a lesser extent, the firefox extension Screen Reader Simulator.
2. Make Your Content Vocal
Like most aspects of Web Design there are usually a couple ways to skin cat/site, in this case I recommend taking some time to investigate your options. For this I highly recommend: W3’s Aria States and Properties. Out of the Aria spec, the tags I use most were:
- aria-label When there were elements that I needed to describe with their own bit of text I used this to label them.
- aria-labelledby I used this when I had an element that needed to be described by one or several other elements.
- aria-hidden I used aria-hidden much like you would use “display:none” in visual design.
3. Make Your Content Flow
With the advent of mobile and responsive design, making a web has made become increasingly complicated unfortunately, all of your beautiful floating, responsive elements, can make a screen reader confused about what order to read the page. To manage this you can use roles and your old friend, tabindex. There are two resources you should take a gander at before jumping too far into this:
- W3 Roles
- Tabindex, Keyboard Focus and some Aria in Screen Readers (This is from 2010)
4. Celebrate How Awesome Your Site Sounds
Just kidding -- actually step 4 is Testing. It’s important to get someone who isn’t you to go over your changes, as it’s all to easy for your brain to fill in the gaps from what you’ve seen of the site. However, once testing is done you really should celebrate that you’ve made the world just a little bit bigger for everyone requiring assistance browsing the beautiful network that is the interwebs.
The goal of this post was to give you a few simple steps and recommended links to help you in your journey to be screen reader friendly. The volume of options and techniques you can use is vast, so don’t stop here; make your site something you’re truly proud to have someone listen to.
