| Accessibility issue |
Tips |
 |
Alt tags |
Alt tags provide a text alternative to visual and auditory content.
- Keep alt tags meaningful but short.
- If you use an image that is purely decorative and does not add meaning to the text (including image files for bullets or buttons), use an empty alt tag.
|
|
Color |
- Text and graphics should be understandable to colorblind or sight-impaired readers. Avoid statements such as "Read the red
text first."
- Select foreground and background colors with sufficient
contrast. Print in black and white to check the contrast and readability.
- Use solid, single-color backgrounds.
|
|
Graphics |
- Avoid graphics that contain multiple objects.
- Provide alt tags for all graphics.
|
|
Links |
- To give a return user the option of
skipping through headers and navigation, place an invisible GIF (2 pixels x 2 pixels) in your page's upper left corner and add alt text such as "Go directly to main content." Use an anchor link to link the GIF to the beginning of the page's text.
- List links vertically, rather than placing them on one line separated by vertical lines or pipes. Sreen readers accurately read through vertical links and allow users with fine motor control limitations to more easily select one link.
- Size links so that you (as a test) can easily click them with your non-dominant hand.
- Place links on words that describe what will be accessed. For instance, "Resources" rather than "Click here."
|
|
Navigation |
- Make sure users can navigate without a mouse, using tab keys and directional arrows.
|
|
Search |
- Place any search window close
to the top of the page. This allows users with disabilities to use it quickly, without listening to or scrolling through lengthy content.
|
|
Sound, animation, and video |
- Provide text files for sound.
- Use closed captioning on videos.
- Provide alternate descriptions for animation files.
- Give the user a choice of versions. For example, make it accessible with or
without Flash, Shockwave, JavaScript, etc.
|
|
Structure |
- Use style sheets to control layout and presentation. However,
check that your page is readable with style sheets turned off
to give users the choice of what works best for their needs.
- Use screen layouts that are consistent and uncomplicated.
- Avoid using images to represent text, with the possible exception of navigation links.
- To communicate your site's structure, provide a site map or table of contents with links to specific section.
|
|
Tables |
- If using a table for layout, be aware that older screen
readers read line by line, horizontally across the page, not by cell. Test your
page with a screen reader.
|
|
Testing |
- Ask people with disabilities to test your pages.
- Test your pages with an accessibility page validator such as:
|
|
Text |
- Use style sheets to format text. Avoid using absolute tags to specify font face or size. Relative sizes such as "h1" and "h6" allows users to adjust text size to their sight needs.
- Don't use flashing or animated text.
- Format text in single columns, and avoid large blocks of italic text.
- Avoid using images to represent text. (Readers can't increase the text size in images.)
- Write in a style approriate for your audience. See tips
|
