Creating Blind Accessible Web Sites and Applications
The reality for more than 20 million Americans who are blind or have low-vision is that the web is generally an unfriendly place. As web application developers we can choose to improve this situation or continue to carelessly contribute to it. The good news is that many of things that web developers and designers can do to create blind-friendly sites are considered best practices anyways. Please read the rest of this post of you believe that all people including those with disabilities are entitled to access to the web.
Alena Roberts, an exceptionally web savvy member of the blind community met with a number of local web and technology professionals to help us understand how we can create web sites and applications that are blind-user-friendly. The meeting was part of the Corvallis Dot Net Users Group organized by our own Jason Prothero of ProWorks. Alena is the author of www.blindgal.com, a blog devoted to sharing the perspective of a blind person with others, and an employee of ViewPlus, a global leader in assistive technology based here in Corvallis.
We visited a number of example sites and navigated them (some more easily than others) using a screen reader and discussed pros/cons and various techniques with Alena. Here are the key points I took away from the session.
Good Blind Friendly Practices:
- Jump Links - This was a great point! Jump links such as "Skip to Main Content" and "Skip Navigation" are very helpful to screen reader users. The links can be positioned off the visible screen using absolute positioning. Target has a great example. Search the code behind at www.target.com for "Skip to Main Content". You won't find it visually but its there for screen readers.
- Font Color/Contrast/Size - Provide users with control over the text size and color, and the background color for contracts control. A good example can be found in the top right at http://www.afb.org.
- Heading Tags - Using heading tags enables screen readers to 'jump" from heading to heading for easy navigation.
- Video - Autoplay is good but blind users cannot utilize the pause feature. A long video with audio can be a serious problem. The best solution for sharing video is to provide a link to the video file.
- Images/Photos - ALT tags are a requirement. Images without ALT tags are translated as a gibberish mess of numbers.
Poor Blind Friendly Practices:
- Flash - Flash interfaces and embedded video files cause havoc with screen readers. They are a "nightmare" for accessibility.
- Automatic Refresh - Sites which automatically refresh the entire page to update data or timeout cause problems for blind users. The automatic timeout at www.ticketmaster.com makes that service unusable for screen reader users.
- AutoPostBack and AutoSubmission - Form fields and interfaces that utilize AutoPostBack and AutoSubmission cause problems for screen readers.
- Automatic Audio and Music - A screen reader communicates the web content through an audio voice to the user. Web sites that play music over this are inaccessible. You find this on many MySpace or Musician websites.
- PDF Documents - PDF files in which the text has been scanned and rendered as a flat image are inaccessible. PDFs with searchable text are usable.
Alena provided us with some resources to learn more about web accessibility:
http://www.w3.org/TR/WAI-WEBCONTENT http://trace.wisc.edu/world/web http://www.afb.org/section.asp?SectionID=4&TopicID=167
Andy Vaughnalso shared some links via Twitter regarding accessibility:
http://w3csites.com http://webaim.org http://webstandards.org
Alena has generously invited folks to contact her with any questions regarding web accessibility for blind users:
Blog: http://www.blindgal.com Twitter: @blindperspectiv Email: alena.roberts2282@gmail.com
Do developers and designers have a responsibility to create web sites and applications that are accessible to people with disabilities? Should the Americans with Disabilities Act apply to websites? What do you think?
