Tips & Tricks to Improve Web Accessibility
1. Relative Font Sizes
Use relative font sizes expressed in percentages or ems, rather than absolute font sizes expressed in points or pixels. This practice allows users to make the text larger or smaller as desired—an important feature for users with low vision. See Tips for Computer Users With Low Vision for more details.
2. Provide Alternative Text for Images
It is absolutely necessary to provide text equivalents for all meaningful graphics. If the graphic includes text, be sure that the alternative text (often referred to as an "alt tag") supplies all of the words.
<img src="graphic.gif" alt="Acme - supplying widgets since 1945" width="50" height="20">
That said, providing "alt" text for spacers or placeholding graphics subjects the speech user to meaningless information. Spacers or graphics used only for positioning should be labeled with alt=" " (quote, space, quote). Note that you should never completely omit the alt tag, even for placeholding graphics. This omission subjects the speech user to hearing the file name of the image. Go to www.amazon.com for an example.
If you are in doubt as to whether or not to describe an image with an alt tag, do it.
3. Name Links Carefully
Users often move through a page by tabbing from link to link. "Click here" does not stand alone well, but "Download SuperSoftware 4.8" is self-explanatory.
4. Explicitly State Information
Do not use indentation or color alone, for example, to convey meaning.
Indicating required fields in a form by making them bold is bad.
Indicating required fields by using a phrase such as "required" is good.
5. Label Forms Properly
Design your forms in a logical, consistent way. Make sure the question or description for each input field is on the same line as the input field itself. Place it consistently on the same side of the input field.
Enclose the label associated with an input field in a <label for=""> tag. Then, add an ID attribute to the input field and make both the ID and FOR equal to the same value. ID values must be unique. You cannot give multiple inputs in a form the same ID value.
Here is a sample of HTML markup for a text field that uses the <label for=""> tag:
<label for="name">Name:</label> <input type="text" name="Name" id="name" size="20">
6. Explain Select Menus (Pulldown Menus)
The default item in the select menu should clearly define the purpose of the box. For example, "Select Age Range" is preferable to "18-25."
7. Provide Skip Links
Skip links allow the speech software or braille user to bypass information that is repeated on every page, such as navigation bars. Speech and braille users generally read the page from top to bottom, and consequently are subjected to repeated information before reaching the heart of the page. Skip links allow these users to jump past the repetitive navigation links to get to the main content on the page.
To implement skip links, place a link before the repeated information as follows:
<a href="#content"><img src="empty.gif" height="15" border="0" alt="Skip Main Navigation" width="5"></a>
and place an anchor at the beginning of unique copy:
The image can be transparent, so that the visual display is not affected, but speech and braille users can hear the alt tag reading "skip main navigation".
It is also possible to use a text link that literally says <a href="#content">skip main navigation</a>, if you prefer. We do not recommend using an "invisible" text link, like a single space or underscore. That technique relies on the link's title to provide accessibility, and not all screen readers provide the link title to the user.