Tips and 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.
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. Never use "Click here" or "Learn More" as the text for your links. "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
Create a predictable, consistent interface for your users. For example, make sure the question or description is consistently on the same side of its control. Ideally, place the question or label on the same line as the input field itself.
Enclose the label associated with an input field in a <label for=""> tag, or wrap it in a fieldset.
Learn more about Creating Accessible Web Forms.
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.