Key things to look for:
- Keyboard navigation: the user is able to access all functions and controls and complete the required processes using only the keyboard. (Mouse navigation can of course be present, but the application must also be fully functional using the keyboard.) Test your site using just your keyboard to make sure you can access all of the links and form controls without using a mouse.
- No Keyboard traps: Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.
- Focus is visible: It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).
- On Focus: When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.
- User Control -Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user. Alternatively, the user is provided an option to disable such changes.
- On Input: When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.
- Images, buttons, and graphs must have appropriate alternative text. Alternative text is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. If images are simply decorative they have null (alt=””) alternative text. Here is a good article on how to apply alternative text correctly.
- Form inputs have associated text label tags.In most cases, this is done by using the <label> element. Labels are used to describe the purpose of the form control and are used on text fields, checkboxes, radio buttons, and drop-down menus. The "for" attribute of the label must exactly match the "id" of the form control.
Example:
HTML:<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label> - Data tables do not contain nested markup and have row and column heading tags (<th></th>). The table heading tags are used to inform screen reader users where they are in the table. Tables read left to right, top to bottom.
- Hyperlinks: The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone.
- Headings - Individual sections of content are designated using headings, where appropriate. Here is a good article about headings.
Example:
- Reading and Navigation order is logical and intuitive. The navigation order of links, form elements, etc. is logical and intuitive.
- Color – has appropriate foreground and background contrast and is not used as the only way to convey information. The standards for color contrast ratios have become much more specific. If you use the approved colors in the brand book your colors will meet standards.
- Audio Files: Must include a transcript.
- Documents: Documents must also be made accessible. Microsoft Office products and Adobe Acrobat have a built in accessibility checkers. Document Requirements & Resources.
- Videos
- has synchronized captioning for all audio content.
- Accessible media player:
- supports closed captions.
- control buttons operate without a mouse.
- control buttons are properly labeled for screen readers.
- control buttons and accessibility features work across different platforms and in all major browsers.
HTML:
<img src="david-ortiz-fenway.jpg" width="499" height="310" alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park">
Example:
| Color | Spanish | French | Irish | Welsh |
|---|---|---|---|---|
| Black | negro | noir | dubh | du |
| White | blanco | blanc | bán | gwyn |
| Red | rojo | rouge | ruadh | coch |
| Blue | azul | bleu | gorm | glas |
| Green | verde | vert | glas | gwyrdd |
| Yellow | amarillo | jaune | buí | melyn |
HTML:
< table summary="Color names for black, white, red, blue, green, yellow in multiple languages">
<caption> Color names in multiple languages</caption>
<tr>
<th scope="col"> Color </th>
<th scope="col"> Spanish </th>
<th scope="col"> French </th>
<th scope="col"> Irish </th>
<th scope="col"> Welsh </th>
</tr>
<tr>
<th scope="row"> Black </th>
<td> negro </td>
<td> noir </td>
<td> dubh </td>
<td> du </td>
</tr>
<tr>
<th scope="row"> White </th>
<td> blanco </td>
<td> blanc </td>
<td> bán </td>
<td> gwyn </td>
</tr>
</table>
Example:
Good: Statewide results for the 2019 spring administration of the STAAR test are now available.
Bad: Statewide results for the 2019 spring administration of the STAAR test are now available.