Site design for the blind and visually impaired

WebsitesCategory
4 min read
Nancy King

To be totally honest, I never really thought about designing websites that people with visual impairments can easily access until I had to start inching my laptop further away to take the latest Buzzfeed Quiz on Facebook®. (I’m sorry, Dad, I shouldn’t have made fun of you about enlarging the font on your computer.)

What would you say if I told you that it’s likely that 12 percent of the U.S. population probably cannot or will not go to your website, regardless of how awesome you are? Let’s put that another way:  6.7 million Americans between the ages of 16 and 75 will not see your Web work. If that doesn’t bother you, it’s like not caring if anyone in Massachusetts has access to your amazing website content.

You care, right? And you can bet the nearly 7 million Americans who are blind and visually impaired do.

According to the American Foundation for the Blind:

“The Internet is tremendously important in our daily lives, including the lives of people who are blind or visually impaired. We check the news, sports, weather, and stocks, engage in social networking, and make banking transactions and travel plans alongside fully sighted friends.”

Understanding screen readers

JAWS for Windows

More and more visually impaired people are utilizing screen readers to access the Internet daily. The American Foundation for the Blind defines screen readers as “software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer.” You learn more about how screen readers work here.

As website designers, if we create sites that screen readers can easily scan and read back to the user, we’ve taken a big step toward doing our jobs more effectively. Here are six tips for optimizing sites for screen readers:

Be descriptive

Image ALT Tags are there for a reason. Screen readers have yet to develop a personality, so they can only describe what they can read. Be informative, but be brief. If you’re tagging an image of a black cat holding a “congratulations” sign, make sure you translate that visual message into a descriptive yet succinct written tag. A tag that reads something like “black cat holding congratulations sign” will give the visually impaired user an experience more aligned with that of a sighted user.

Allow user control

Create user controls for moving objects such as slideshows. Screen readers struggle with moving objects, and people with visual difficulties might find them difficult to read. And while we’re on the subject of movement … it’s time to get rid of the landing page. They confuse screen readers, the visually challenged, and they annoy everyone else.

Be concise

Websites are not the place to exercise our finest vocabulary; rather it's best if we write clearly and simply. Like we discuss in this post, in general, you want to write for an average third-grade comprehension level. And be sure to double-check your spelling and grammar; screen readers just read what they see. Translation tools will thank you, too.

Use a flowchart

Clear navigation is key. You’ll find if you start with a flowchart, it will change along the way, but it will help keep you on track and ensure that the site stays organized and easy to navigate for any user. Here’s a good example at webdesignerdepot.com.

Plus, the Web Content Accessibility guidelines from W3C® recommend that your links DO NOT open in a separate window or tab automatically as it is confusing to the user.

Consider Internet Explorer

Although dropping in popularity in the general population, Internet Explorer® is still the No. 1 browser for people using a screen reader. In fact, some screen reader users are still using IE versions all the way back to IE6. Here’s a great tool to test your site for compatibility across IE: modern.IE.

Don’t rely on color

This will make my color-blind husband happy: don’t rely on color to tell your story. Affecting about one out of every 12 men and one in 200 women worldwide, color blindness makes it tough to discern certain colors of the spectrum (especially red and green). Check out Colour Blindness: Experience It for multiple links to learn more about optimizing your site to accommodate color-blind users.

It’s never too late to start designing websites for everyone to enjoy.

Do you have any tips or tricks for designing sites for the blind and visually impaired? I’d love to hear about them in the comments below!