Screen Reader Tips for Web Designers and Developers

Published on by David A. Kennedy

A few weeks ago, a talented designer/developer colleague of mine at Automattic asked me about starting to use a screen reader to test for accessibility. I cringed a little.

Why? Because I remembered how daunting it was to learn how to use a screen reader. You turn it on, and you’re thrust into a new world. One that says things to you non-stop. 🙂 But in all seriousness, anyone can learn to use a screen reader for basic accessibility testing. You just need to recognize it has a learning curve, like anything else. Below, I share some tips I wish I knew when I started to integrate screen readers into my every day workflow.

Grab Your Flavor

WebAim has some fantastic information on screen readers and tutorials to help get you started.

This isn’t an exhaustive list if screen readers, just the ones WebAIM has tutorials on. I use VoiceOver because I do all my development on a Mac. But I occasionally hop over to a Widows machine with NVDA.

Have Patience

You won’t learn how to test effectively with a screen reader the first day. Or the first week. Or the first month. Be patient. Practice. I like to think of it like distance running – you have to build up your distance base first. Once you have the base you can start to go places, and faster.

Start Simple

One mistake I made in the beginning was jumping into complicated web pages. If you have sophisticated interactions happening on the page, it’s hard to keep track of what’s happening there and what’s happening in the screen reader. So start with a sample page you’ve created with basic HTML and various elements. Put the standbys in place like links, buttons, form fields and such. Now, you can get an idea of what a screen reader does with standard elements.

You might be tempted to turn off your monitor, and you should do that at some point to try it. However, wait for awhile until you can handle the keyboard commands first. Then give it a shot.

Pick a Team

Like I mentioned, I use VoiceOver as my primary screen reader. You can use more than one, but if you’re new to screen readers, try to stick with one for awhile until you get comfortable. Screen readers are like programming languages: once you learn one, the rest come easier because the principles are the same.

Even though you might become proficient in screen reader use, it’s not the same as using one every day. I’m no expert, just someone who knows how to use one to evaluate a web page from a technical perspective. When I work with more seasoned screen reader users, like on the WordPress Accessibility Team, I give actual users’ opinions more weight than mine. 🙂

Conclusion

If you have a half hour and want to watch a good demo, check out Victor Tsaran’s An Introduction to Screen Readers. It’s kind of like the Mother of All Demos for screen readers.

Good luck in your screen reading adventures!


Tagged AccessibilityFront End DevelopmentWeb Development