Resources for Testing Content

Sources: WebAIM and Department of Rehabilitation (DoR)

There are many sophisticated software tools that can be used to check for web accessibility. Any accessibility testing must be viewed as a process that combines automated software tools with human judgement. Below are checkpoints to ensure that what you are developing meets established accessibility standards.

  1. Use a Checklist:
    1. WebAIM WCAG 2.0 Checklist (.pdf)
    2. WebAIM Section 508 Checklist (.pdf)
  2. Test with Web Accessibility Checker, like WAVE – an evaluation tool that embeds inline accessibility feedback into your web content.
    1. Fix all “red” accessibility errors.
    2. Though not required other alert icons and warning indicators indicate other elements that should be reviewed and author should make every attempt to fix.
  3. Check Keyboard Accessibility
    1. Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available?
    2. Is a “skip navigation” link available? Activate the skip link and hit “Tab” again to ensure it functions correctly.
    3. Make sure the navigation order is logical.
    4. Is a visible keyboard focus indicator/outline present?
    5. Test dialog boxes that pop open. You should be able to navigate and close these using a keyboard. Esc should also close these boxes.
  4. Evaluate Form Accessibility and Usability
    1. Click on the form label. If the field gains focus, it is properly labeled.
    2. If a label is not visible, check for a hidden label or descriptive title attribute.
    3. Ensure that you can complete all forms with a keyboard.
    4. Are error recovery mechanisms present and easy-to-use?
    5. In WAVE, use the Code panel see the <label> for and <input> id values.
  5. Disable Styles and Linearize Tables
    1. Disable styles and remove tables so the visual reading order matches the code order. To do this in WAVE, select the “No Styles” view.
      1. Ensure the reading order is logical.
      2. Ensure content is understandable and usable.
  6. Check Images
    1. Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful.
    2. Using the Web Developer toolbar or WAVE, ensure the alternative text is equivalent and that it makes sense in context. In WAVE, alternative text is displayed next to the image.
    3. Look for images of text where the same presentation can be accomplished using true text.
  7. Verify Color and Contrast
    1. Contrast: WebAIM , WAVE or Snook
      1. WCAG 2.0 level requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger).
      2. If links are not underlined, there must be 3:1 contrast between link text and body text and all text must still meet other contrast requirements. There also must be an additional change (e.g., underlining) when it is hovered over or receives keyboard focus.
    2. Ensure color is not used as the sole method of conveying content or distinguishing visual elements.
    3. Print on a grayscale printer to test contrast and color.
  8. Test Content Scaling
    1. Enlarge the font in your web browser to ~150%. Note that WCAG 2.0 requires 200%. Is the page readable and usable? Is horizontal scrolling minimized?
      1. Safari: View > Zoom Text Only
      2. Firefox: View > Zoom > Zoom Text Only
      3. Internet Explorer: View > Text size
    2. Zoom the web page in your browser (enlarge fonts and images). Is text in images readable?
    3. See additional Browser Usability Features
  9. Check Headings
    1. Ensure that the main heading on the page is an <h1>.
    2. Look for skipped levels (e.g., <h2> to <h4>).
    3. In WAVE: Headings can also be viewed in the Outline tab in sidebar.
  10. Test with a Screen Reader
    1. Focus on navigation, forms, and dynamic content.
    2. Freedom Scientific JAWS 14+, AiSquared Window-Eyes 8.0+, NonVisual Desktop Access 15.2+, Apple VoiceOver (Built-in screen reader for OS-X), and/or Nuance Dragon NaturallySpeaking 12.5+
    3. See additional Testing Applications
  11. Validate HTML and CSS
    1. HTML
      1. W3C HTML, XHTML Validation Service
    2. CSS
      1. W3C CSS Validation Service

          Other Issues

          1. Check videos and other multimedia for captions and transcripts.
          2. Ensure the page <title> is unique and descriptive.
            1. Look for links with generic link text like “click here.”
            2. Verify that the page language is specified (e.g., <html lang=”en”>).
            3. Make sure instructions provided for understanding and operating content do not rely on shape, size, or location.
            4. Ensure that any content or media that animates or auto-updates can be paused and stopped by the user.
            5. Look for strobing content that could cause seizures.
          Updated August 10, 2022