- HTML code semantics,
- forms,
- tables,
- Use CSS,
- Tabbed navigation,
- Colour contrast,
- WAI-ARIA attributes.
HTML code semantics
Following HTML code semantics is fundamental in making your web applications accessible because assistive technologies, like screen readers, rely on the code to transmit the correct information to the user.
Forms are communly inaccurate due to a lack of the label tag or the misuse of the input fields.(Check out the W3C for forms in HTML4 or W3C for forms in HTML5.)
Another commun mistakes involves data tables weither by not structuring your table with the proper elements or by adding visual attributes that should go in the CSS, (Check out W3C for tables in HTML4 or W3C for tables in HTML5.)
Follow W3C standards to the letter and you will have a good start.
Use CSS
To keep the integrity of your code separate content from presentation. In the case of a data table, attributes like cellspacing and cellpadding should be replaced by padding of the td element in your css file. This will allow users to strip down the visuals to suit their own needs.
Tabbed Navigation
Many users use only the tab key to navigate within a web browser and webpage, because they cannot use a mouse (in case of limited motor skills or blindness).
Colour contrast
There are many tools to help you choose the appropriate colour contrasts between background and foreground of your text.
- Web based application (http://snook.ca/technical/colour_contrast/colour.html)
- Downloadable application for Windows and MAC (http://www.paciellogroup.com/resources/contrast-analyser.html)
- Firefox addons (https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/)
A proper ratio of luminosity assures that users with visibility issues can clearly see differences between elements. Think of users with colourblindness or eye sensitivity.
WAI-ARIA attributes
If you want to go a step further and you are coding in HTML5, you can use ARIA attributes to compliment all previous steps. WAI-ARIA is a set of elements that give extra code information to assistive technologies.
More information about ARIA:
- http://www.alistapart.com/articles/waiaria
- http://stanford.edu/group/accessibility/cgi-bin/presentations/html5_a11y/