Designing User Friendly Web Sites for People with and without Disabilities
- Make sure that your site works well regardless of whether people use keyboard, mouse, joystick, voice, or other input device to interact with the page.
- Maintain a simple, consistent page layout throughout your web site. Do not fill the screen with text. Leave plenty of white space.
- Create high contrast pages. Use a neutral, light, plain background and dark print. Avoid background images behind text.
- Aim for a page that can be read in 3 "page downs.".
- Do not use color to communicate key information.
- Avoid animation, moving text, auto refresh elements, and flashing elements. If they must be used, provide the user the option not to see the movement. People with epilepsy may have seizures triggered by page elements that flicker or move at certain rates.
- Titles should be flush left or centered. Use header tags (H1, H2, etc.) rather than styles (bold, larger font) to logically structure your information.
- Underline links so they are easy to see. Clearly identify the target of each link in text or ALT tag. Make link buttons fairly large.
- Separate a series of links with unlinked markers, such as a vertical bar (for example, hyperlink | hyperlink) so text reader sees them as separate items.
- Avoid page elements that require a timed or rapid response. People with vision, muscle, or cognitive disorders may not be able to respond quickly.
- Write all web content at a 6th-8th grade reading level.
- Provide contact information, including an e-mail link to webmaster on each web page.
- Use default type size that is equivalent onscreen to 11-12 point type.
- A sans serif typeface such as Arial or Helvetica is easier to read on-screen than a serif typeface like Times Roman.
- Use proportional markup (+1, -2) for fonts rather than specifying font size, so that when people set their browser default for larger fonts, your page will still look good.
- For form fields and menus, set the tab order for the most logical sequence.
- Avoid frames. If you use frames, give each frame a title describing content or function.
- If you use a table of contents frame, every page should have a link to return to that frame.
- Code frames and tables for easy reading by a screen reader.
- For data tables, identify row and column headers.
- Use standard HTML (hypertext markup language) to create your web site.
- Organize your pages so they can function without their associated style sheets.
- If you must use PDF format, also include that information in a non-PDF format. Include links to download the Adobe Acrobat Reader and Adobe System's Access page.
- Code your pages to use 80 percent of the screen or to be 760 pixels wide (on standard 800 x 600 monitor). This will stabilize the design on many browsers, and pages will print out better.
- End sentences, headers, and list items with a period (can be made same color as background to be invisible) or other suitable punctuation.
- Provide ALT text (narrative describing what each visual is or does) for all non-text elements sound clips, movies, graphics, photos, image map regions, icons. Use a description (D) link for longer descriptions.
- Provide a written narrative through a D link for audio and video elements.
- Use accessible design for image maps (see W3C guidelines for details).
- Design your site for easy navigation. Link every page to your home page.
Make sure your web site functions well and looks good when:
- Viewed in black and white.
- Used with all Javascript, applets, etc. turned off.
- Viewed with graphics disabled.
- Viewed using a text browser like Lynx.
- Check site accessibility
