Best practices for assuring an ideal website experience for users with disabilities:
Color Blindness:
- Use good colors and contrast (light text on dark background or vice versa) so that the text is easy to read.
- Provide an option to toggle contrast.
- Avoid communicating information solely using colors (e.g. emphasizing a “myth” statement by using red font with no additional information).
- Whenever any information is color coded, provide an alternative in text too. Avoid combinations of red & green and blue & yellow since these are the most commonly confused colors.
Low Vision/Blindness:
- Always have a text alternative to media components like images and videos. Whenever an image is used, give proper description in the ALT attribute of the IMG tag. (Ex: <img src = ”abc.jpg” alt = ”description” />)
- Provide an option to toggle font size.
- Create the navigation bar as a <ul> list which is easy to read by screen readers. Avoid using images in the navigation bar for the menu options. Give meaningful descriptive text as hyperlinks. Avoid using ‘Click here’ or ‘here’ as separate text for the links. A screen reader can jump between links on a webpage, and it will read “here” without the benefit of the preceding text.
- Do not make web pages reliable on JavaScript, Java Applets or Flash because screen readers are incapable of reading these programs. If you do need to use them, provide an alternative experience so that people using screen readers can also access the information.
- Include ‘Skip Navigation’ or ‘Skip to content’ at the top of the page. This can be hidden from sighted users, but people using screen readers can read them first and thus be saved from hearing the navigation menu every time they open a page.
- Refrain from opening links into a new page or window, as it is disorienting for users who are blind.
- In forms, use label tag for the labels and give proper id’s so that the input box is properly associated with the label. (Ex: <label for = “id_x”> xyz </label> <input type=”text” name=”abc” id=”id_x” />.)
Limited Hearing/Deafness:
- When providing video or audio content, use subtitles, closed-captioning, or otherwise indicate and transcribe audio content.
Motor Disabilities (e.g. Spinal Cord Injury):
- Use ‘Access Keys’ to provide keyboard shortcuts as an alternative to using the mouse.
Cognitive Disabilities (e.g. Traumatic Brain Injury):
- Avoid using blinking images, marquees, or pop-ups which can be disturbing and frustrating.
- Be consistent in design (ex. Keep navigation at the same place on all pages), and keep the page simple. Provide ample white spacing and avoid clutter in the page.
- Use a sitemap so that people can find everything in one place.
- Use images/icons to convey an idea whenever possible.
- Use simple and easy to understand language whenever possible.