Quick Reference
Testing Web Content for Accessibility

Note

This resource is designed to be printed as a one page PDF file. An HTML version is also available below.

Test with WAVE

  • WAVE is an accessibility evaluation tool that facilitates human evaluation by embedding inline accessibility feedback into your web content.
  • Dynamic or protected content can be evaluated with the WAVE Chrome extension.
  • Icons identify potential problems or features. Click an icon to highlight the corresponding element and get more information.
  • Use the Details panel to review page issues. Click on an icon to find it in the page. Uncheck icons to hide them.
  • No Styles view can be used to simplify the page view and to check reading order for screen readers.
  • Click on the Code button at the bottom of the page to reveal a code inspector.

Images

  • The image alt attribute value is displayed next to the image.
  • Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful.
  • Look for images of text where the same presentation can be accomplished using true text.

Headings

  • View headings in the Outline tab in the sidebar.
  • Ensure visual headings are marked up as true headings.
  • The main heading should usually be an <h1>.
  • Look for skipped heading levels (e.g., <h2> to <h4>).

Contrast

HTML5 and ARIA

Forms

  • Ensure forms controls have the descriptive labels.
  • Use the Code panel to ensure the <label> for and <input> id values match.
  • If a label is not visible, check for a hidden <label>, aria-label, or title attribute.

Other common WAVE checks

  • Page language is specified (e.g., <html lang="en">).
  • If data tables are present, ensure table headers are present and have the correct scope.

Use a Checklist

Check Keyboard Accessibility

  • To toggle Mac keyboard accessibility press Control + F7.
  • Navigate the page using only the keyboard:
    • Tab: Navigate to links and form controls.
    • Shift + Tab: Navigate backwards.
    • Enter: Activate links and buttons.
    • Spacebar: Activate checkboxes and buttons.
    • Arrow keys: Radio buttons, select/dropdown menus, sliders, tab panels, autocomplete, tree menus, etc.
  • Is anything mouse-only (e.g., rollover menus)?
  • Is a "skip navigation" link available? Activate the skip link and hit Tab again to ensure it functions correctly.
  • Is the navigation order logical and intuitive?
  • Is a visible keyboard focus indicator/outline present?
  • Test dialogs that 'pop' open. Can you navigate and close the dialog? Does focus return to a logical place?
    • Modal dialogs maintain focus until dismissed.
    • Non-modal dialogs close when focus is lost.
    • Esc should also close all dialogs.

Test Content Scaling

  • Enlarge the font in your web browser to ~150%. Is the page content readable and usable? Is horizontal scrolling minimized?
    • Safari: View > Zoom Text Only
    • Firefox: View > Zoom > Zoom Text Only
    • Internet Explorer: View > Text size
  • Zoom the web page in your browser (enlarge fonts and images) to at least 200%. Is text in images readable?
    • Zoom sometimes triggers responsive 'mobile' views.

Test with a Screen Reader

  • Focus on navigation, forms, and dynamic content.
  • WebAIM tutorials: JAWS, NVDA, and VoiceOver.
  • Are ARIA roles/states/properties necessary, and do they convey correct information?
  • If there are forms, submit empty to test error feedback.
  • Are all dynamic changes and updates accessible?

Scan for Other Issues

  • Check media for captions and transcripts.
  • Ensure the page <title> is unique and descriptive.
  • Look for links with ambiguous link text like "click here."
  • Make sure information does not depend on color, audio, shape, size, or location.
  • Ensure that animating or updating content or media can be paused and stopped.
  • Look for strobing content/video that could cause seizures.