W3C Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.
The range for color brightness difference is 125. The range for color difference is 500.
Examples:
When running accessibility tests make sure to use more than one validator, since not all errors or issues will be found by all of them.
Usability and Accessibility should come before validation.
Don't do it!
Individuals using screen readers can look at a list of all the links on a page out of context. So if they keep hearing “click here” over and over again it makes no sense to them.
Another good reason is that your not getting added Google juice as they say by making the link text relevant to the link.
Poor example
Click here to review the Acme TNT companies annual report.
Good example
Please review the Acme TNT companies annual report.
Use headers - H1, H2, H3, H4, H5, and H6.
This will allow people using screen readers to skip around to the important parts of the page using key combinations.
Most CSS only have “a:hover” in them for changing the background color or adding or removing underline for links, when they should have “a:focus” (other browsers) and “a:active” (IE).
Where ever you have “hover” (a:hover) you should also have “focus” (a:focus) and “active” (a:active).
#nav a {
background: #ACC7FF;
text-decoration: none;
}
#nav a:hover, #nav a:focus, #nav a:active {
background: #BEFF9E;
text-decoration: underline;
}
An example of a:“hover”, a:“focus”, and a:“active” in action.
Presentation
Accessibility Resources