Evaluating Pages for Web Accessibility
Use an evaluation tool, like AInspector or AXE, to run automated checks. These tools are good to start looking for things required to support assistive technology. They can also identify when form fields are missing labels. However not all of the accessibility requirements can be checked automatically, and require manual inspection.
This section is an introduction to some of the manual checks required for accessible web pages. Some manual checks can be performed on an individual page, while some require looking at usage across pages on a site.
- Do a visual inspection of your pages. Check the contrast with a Color Contrast tool (beware of false positives- you may need to manually check items that are marked as a violation).
- If you have media and images, check to make sure that your images have alternative descriptions and your videos have captions.
- Order and presentation of content should make logical sense. Headings should be used to designate content, not simply change the appearance of text.
- Access your website with a keyboard. Set aside the mouse, and start tabbing through your page. A good example site to tab through is the Web Experience Toolkit. Note you will need to use your keyboard arrow keys on the menus on that toolkit. Some things to be aware of:
- Can you see where the focus is as you tab through the web page?
- Are there places that lose focus or do there appear to be multiple steps between items on the page?
- As you tab through the page, does the order follow how things are visually placed on the page?
- With menus that have sub menus, can you open those menus by hitting space or return?
- Is there a skip link at the top of the page to skip over the navigation into the main content area?
- Are there areas on the website that can?t be accessed via the keyboard?
- For further details, visit the WebAIM resource on keyboard accessibility.
- Look across the pages on the site, and check:
- Is the order and appearance of elements on the pages consistent?
- Do you consistently use headings the same way?
- Do you have "skip to main content" links? (These may only be visible when they receive keyboard focus by tabbing to the link.)
When you're ready to make the next step to checking for all of the accessibility guidelines, WebAIM has a good checklist introducing WCAG 2.0.