Designing Websites for the Blind and other Disabled Users
It is important to design a web site that is not only usable, but also accessible. Keeping users with disabilities in mind when designing your web site can greatly increase the success of your site. Just like ramps on sidewalks and buildings help people with disabilities, you can add ramps of your own to your web site. I'll share some tips on how to make your website ADA accessible using current technologies as of 2001.
Creating a web site with accessibility will not hamper your creative methods or advanced HTML usage. In fact, the HTML 4 specifications added accessibility tools. Many screen readers (which blind users typically use) will work with popular browsers such as Internet Explorer and Netscape. Alternatively some users will turn to text only browsers such as Lynx, or specialized browsers like IBM’s Home Page Reader. The key to designing an accessible web site is testing with screen readers and text only browsers.
There are a couple of guidelines, which should be followed when creating accessible pages.
For example, when dealing with plain text:
- Instead of using physical tags such as <b> or <I> use logical tags like <strong> and <cite>
- Keep your links short
- Keep your links descriptive, never use “click here”
- Use a period (.) or pipe (|) when separating text links. This will cause the screen reader to pause giving your links more clarity
- Use text with high contrast to the background color
- Screen readers skip bullets, for example when using a <ul> tag. Use lowercase o’s in place of the bullet or graphical bullets with lower case o’s or “bullet” as the ALT tag
For complete accessibility with images:
- Describe all images with ALT tags, even design elements. This will help the user to get an idea of the look of your site
- Never us an image map, these are incompatible with screen readers and accessibility controls. If you must, make sure to use alternative text links below
- Never use images of text in place of actual text
Lastly, you may use multimedia with your site as long as you follow these tips:
- If you have PDFs available for download or viewing, make sure to include a link to Adobe’s Accessibility web site for help reading PDFs
- Audio and Video items should include a transcript
- Make sure to not separate form field labels from the actual form element. For example: Name:<input type=”text” name=”name”>
- Provide alternatives for tables
- Layout pages with style sheets instead of tables
By applying these few basic rules and testing your site thoroughly, you can easily add accessibility for many users. Keeping these guidelines in mind when designing shouldn’t add any extra development time and testing times would only increase marginally. Make sure to not alienate those precious users that could otherwise be kept with only a small amount of extra work and attention to detail.
“Introduction to the Screen Reader with Neal Ewers” http://wiscinfo.doit.wisc.edu/ltde/access/ewers.htm [October 2001]
“Accessible Web Design” http://www.rnib.org.uk/digital/hints.htm [October 2001]
“Designing Accessible Web Sites” http://www.uiowa.edu/infotech/WebAccess.htm [October 2001]
“IBM Accessibility Center” http://www-3.ibm.com/able/hpr.html [October 2001]
“Web Site Design for Visually-Impaired Users” http://www.scottrell.com/Speech/webdesign.html [October 2001]
“Lynx Information” http://lynx.browser.org/ [October 2001]
Other Recent Blog PostsWhy We Like WordPress, but Not for Banks and Credit UnionsAdvice to Banks and Credit Unions for Establishing Website Development BudgetsQuick Fix to Improve Website Speed for Search Engine Optimization Benefits
Find this useful?
Want to receive our monthly tip to make your website easier to use and safer? No spam, just good advice. Signup!