Web Design for the Blind and Visually Impaired


Everyone claims to care about it and understand it on both sides of the interview table, but when it comes to job time, very often no one mentions it again.

This wasn’t true of all my jobs, but most of them.  At the Academy of Art I worked with subtitles using inqscribe, and we took great care to accommodate disabled students, sometimes transcribing entire courses for one student. This work was a labor of love for me, because my sister, Jenny, was legally blind.

Jenny passed away recently.  I built a tribute site in her honor. Because she was legally blind and many of her friends are blind or visually impaired, I took extra care to design the site with blindness in mind.

Some key points:

Label everything with an alt tag.

Provide alternatives for images and video, using special media players, subtitles, transcripts, and audio description if possible.

Provide a means to change color to high-contrast or grayscale.

Provide a means to change font sizes without breaking the layout.

Always test your site with browser zooming and be sure the layout can handle several increases in magnification.

Use links sparingly. If you want to provide a bunch of external links, group them at the bottom rather than sprinkled liberally throughout the content. Try not to use images as links but if you do, use the alt tag to describe the link rather than the picture.

Name your links carefully, avoiding “click here” and “learn more”, preferring a clear label of where you are going: “Audio Description Project”.

Avoid opening new tabs for all links.

Abandon your mouse in favor of keyboard controls to eliminate mouse-dependent activities.

Avoid using headers and header navs with frames.

Strongly consider using a single column. Keep key content towards the top and if there are two columns, keep the main nav and lead content in the left column to help avoid extra tabbing.

Turn off your images in your browser and be sure tabbing and navigating through your site is simple and precise.

Be sure your forms are laid out logically and consistently, use labels properly, and avoid client-side scripts and radio buttons.

Test with accessibility tools and if you can, test on several screen readers.

Finally, solicit feedback from blind and visually impaired users. Nothing can replace the experience of the end-user, particularly those with low vision.