Common Errors & Tips
Common Errors & Tips
This page gives a very brief overview in fixing and avoiding some of the most common errors found.
For solutions to a specific problem, click on the corresponding link on the left menu.
Text
- Use the clearest and simplest language appropriate for the site's content.
- When applying style sheets, make sure the page is readable when style sheets are turned off.
- Identify any changes in language (such as English to Spanish).
- Provide a text equivalent for every non-text element (i.e. alt text for images or captions for video).
Label headings with proper HTML mark-up but do not skip headers.
For Example:Before:
<h1>Reports</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h4>Recent Activity</h4>
<p>Maecenas urna fermentum id, molestie in, commodo porttitor. </p>
After:
<h1>Reports</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h2>Recent Activity</h2>
<p>Maecenas urna fermentum id, molestie in, commodo porttitor. </p>- Label table elements with scope and header attributes when creating data tables.
- Do not use blinking text or marquees.
Hyperlinks
- Insert Skip Navigation links that take users directly to the page content.
- Make sure hyperlinks can be accessed with the keyboard using the TAB-key.
- Make your hyperlinks descriptive. Avoid using the text "click here". Use the title attribute for a detailed description of the link destination if needed.
Images
-
Use the alternative attribute (alt="image description") to provide a text equivalent for your images.
For Example:Before:
img src="welcome.jpg"
After:
img src="welcome.jpg" alt="welcome banner" - If you use decorative images (eye candy) that does not convey text information or data, use the empty alternative attribute (alt="").
Color
-
Ensure that all information conveyed with color is also available without color. Conside how would gray scale vision users view the same image.
For Example:Normal:
Click on the red button.
Gray Scale:
Click on Start.
Its impossible to figure out which button is red or green. The contrast also makes it harder to read the text on the right button.
Tables
-
Identify row and column headers with the table header tag <th>.
For Example:Before:
<td>title</td>
After:
<th>title</th>
- Do not use tables for layout purposes. Use DIV to create page layout.
-
Avoid copying and pasting tables from Microsoft Word without making sure they are accessible. Those table usually contain redundant coding and need to be cleaned up. Use CSS to style your table.
For Example:Before:
<table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" align="left" width="432" style="width: 500; border-collapse: collapse; border: medium none; margin-left: 2.25pt; margin-right: 2.25pt">
<tr>
<td width="133" style="width: 99.4pt; border: 1.0pt inset #111111; padding: 0in; background: #FFD400">
After:
<table class="normal">
<tr>
<td>
Miscellaneous
- For video or audio media provide captions and/or a transcript.
- Avoid causing the screen to flicker.
-
If you use frames, title each frame for users using assistive technology.
For Example:Before:
frame name="topframe"
After:
frame name="topframe" title="page navigation" - If necessary, link to an alternative page that is accessible.
-
Use quotation marks on all attributes.
For Example:Before:
img src=welcome.jpg
After:
img src="welcome.jpg"