Primary considerations for testing your website's accessibility
- Keyboard accessibility: can you navigate via keyboard to everything, especially using the TAB button?
- Color and style: have you considered users with color-blindness or poor vision?
- Text and images: can a screen-reader handle the text on your webpage? Do the images provide captions or alternative text that describe what they are?
Tools that webmasters can use to test your website
Navigation
Try this: To discover how easy it is for a disabled user to navigate your website, put away your mouse/touchpad and use the keyboard only! The short-keys below can be used in place of mouse-clicks.
| Key | Use |
|---|---|
| Tab | Move to the next focus item (links, text boxes, and other items that can be interacted with) |
| Shift+Tab | Move to the previous focus item |
| ALT+Tab | Change to next window |
| ALT+F4 | Close window |
| CTRL+W | Close tab |
| CTRL+A | Select all |
| CTRL+S | Save |
| CTRL+D | Bookmark (Firefox), Favorite (IE) |
| CTRL+Q | Quit |
| CTRL+T | New tab (Firefox, IE) |
| CTRL+C | Copy |
| CTRL+V | Paste |
| CTRL+X | Cut (Copy and Delete) |
| CTRL+Z | Undo |
Website Design Basics
When you (or your web designer) is creating the site, please consider the following accessibility recommendations.
Color Alone for emphasis
- Do not use color alone for emphasis. (For those with color-blindness, certain colors--such as green and red--might appear gray or black.) Instead, use color with either italics or bold to emphasize text.
- Inaccessible example:
The books in green are available for purchase. The books in red are coming out next year.
- A
- B
- C
- D
- Accessible example:
The books in green italics are available for purchase. The books in red bold are coming out next year.
- A
- B
- C
- D
Links
- Use link text that provides context. "Author website" is better than "click here".
- Style your link differently than the rest of the text.
- Provide alt text for all images.
-
Important images should have meaningful alt text.
<img src="Arabian_knights_book_cover.jpg" alt="Arabian Knights" />
-
Presentation images should have an alt text of ""
<img src="background_pattern.gif" alt="" />
-
Use labels.
Example code:Example in action. (Note that you can click the word "female" or "male", and the radio button gets marked. This is because we used labels, and it provides mouse/touchpad users a larger target to click when they fill out a form.)<label="fname">First Name</label>
<input type="text" id="fname" name="first_name" /> <fieldset> <legend>Gender</legend> <input id="gender_f" name="gender" value="female" type="radio" />
<label for="gender_f">Female</label> <input id="gender_" name="gender" value="male" type="radio" />
<label for="gender_m">Male</label> </fieldset>
Tables
- Tools for webmasters: ARIA (Accessible Rich Internet Applications) is now a part of HTML5, and most attributes and roles are supported by all major browsers. Here's a link to the W3C's documentation on ARIA
- Use the ARIA attribute role: "grid" for data, "presentation" for layout tables. This helps improve navigation for screen-reader users.
| Name | Gender | Age |
|---|---|---|
| Julie | Female | 21 |
| Michael | Male | 20 |
| Sam | Unspecified | 19 |
Example for role="presentation"
A variety of opportunities available as a part of Given University's student life
| Activities | Clubs | Greek Life |
| Housing | Sports | Student Union |
| Stuff | Theater |
Row headers (<th>) should have scope="row". (Here with light green shading)
Column headers should have scope="col". (Here with light blue shading and bolded, centered text)
| Name | Population | GDP (USD) |
|---|---|---|
| Australia | 21,507,717 | 915,098,000,000 |
| Canada | 33,476,688 | 1,445,000,000,000 |
| New Zealand | 4,451,017 | 122,193,000,000 |
| United Kingdom | 63,181,775 | 2,316,000,000,000 |
| United States | 315,317,000 | 15,094,000,000,000 |
Multimedia
- If you have video or audio, have transcripts available.
-
If you have video or audio, provide controls to allow users to, at minimum, pause and play the media. Volume controls are also ideal. Using the native controls available in HTML5 generally provides the most ideal experience.
<video width="320px" height="240px" controls="controls"> <source src="interview.mp4" type="video/mp4"> </video>
