Web Accessibility Evaluation Guide

WAVE

• Install the WAVE Chrome, Firefox, or Edge browser extension. An online version of WAVE is available at wave.webaim.org, but the WAVE extension is recommended for comprehensive testing, especially of dynamic or non-public web pages.
• Use the Details panel to review all items. Click on an icon in the panel to highlight it in the page.
  • Error icons indicate items that should be fixed. Other icons prompt further evaluation.
  • Use the checkboxes in the details panel to hide groups of icons.
• Click an icon in the page or use the Reference panel to get more information.
• Turn off Styles to simplify the page view and to check the reading order for screen readers.
• Click on the Code button at the bottom of the page to reveal the relevant code.

Other Tools and Resources

• WebAIM's WCAG 2 Checklist
• Screen reader testing
  • WebAIM tutorials for JAWS, NVDA, and VoiceOver
• Browser Developer Tools
  • Examine page code and identify an element's accessible name and other accessibility properties.
• Disable ad blockers, password/form fillers, and other extensions that may change the default presentation of the page.

Images and alternative text

• , , , , , – Identify images that are missing alternative text.
• , , , , – Confirm that an image's alternative text (in green next to the icon) presents its content and/or function.
  • - The alternative text is likely insufficient or contains extraneous information.
  • - A nearby image has the same alternative text.
  • – Alternative text should be succinct and typically should not repeat information in nearby text or images.
  • – If aria-label is used to add alternative text to images, ensure it is equivalent and that it is on an element that supports ARIA labels (e.g., <img> or <span role="img">).
  • – If an image has a title attribute but no alt value, be sure the title value is equivalent and consider replacing it with an alt attribute.
• If an interface component (link, button, etc.) presents text (or images of text), ensure that its accessible name (label, alternative text, aria-label, etc.) includes the visible text.
• If the image is too complex for a succinct alt attribute value, confirm that there is an equivalent text alternative (e.g., a table) in addition to the alt attribute, either inline or via a link.
  • , – The longdesc attribute should not be used.
• Images that do not have associated WAVE icons are likely added with CSS. If they present content, use the Code panel, test in a screen reader, or inspect in browser developer tools to ensure that alternative text is present.
  • , – Empty links and buttons may indicate CSS images with no alt text
• , – Search for images that are decorative or that present information that is already in nearby text. Make sure they have alt="" or are defined with CSS.
• - If a <figure> is present, make sure it is being implemented correctly.
• Look for images of text where the same visual presentation can be made using real text.

Regions and headings

Use the Structure panel in WAVE to examine regions/landmarks and headings.

• , , , , , , – Review regions or equivalent ARIA landmarks.
  • The page header, main content, footer, navigation areas, and search forms (if present) are identified as regions AND are correctly nested.
  • – Other important regions are identified.
  • - If a region type appears more than once (e.g., more than one <nav>), it can be distinctly labeled using aria-label or aria-labelledby.
• , , , , , – Confirm that headings describe the content that follows. If not, they should not be headings.
  • , – Confirm that there is an <h1> that describes the page content. It should usually be within the <main> region.
  • – If headings skip levels (e.g., <h2> to <h4> with no <h3> in between), identify the correct heading structure.
  • – Headings and regions must not be empty.
• – Search for text that functions as a heading but needs to be tagged <h1> through <h6>.
• – Search for sections that should have headings but do not.

Forms

• , - Ensure form controls have descriptive, correctly-associated labels and that <label> is used when possible.
  • If a form control gains focus or is activated when its label text is clicked with a mouse, then it is likely that the text is a correctly-associated <label>.
• , - If a label is not visible, check for a hidden label, aria-label, or title attribute.
• – If a <select> menu does not have a <label>, confirm that the default option presents the purpose of the menu.
• , , , - Use the Code panel to explore broken labels.
• , , - Look for <fieldset>/<legend> where a higher-level description for a group of form fields is needed.
• Ensure that required fields are visually apparent and are presented to a screen reader through at least one of the following: label/accessible name, aria-required, or the required attribute.
• Trigger form errors and then test error feedback using the WAVE browser extension.
• – Ensure that descriptions and inline error messages are associated to the correct form control using aria-describedby.
• Ensure that redundant entry is avoided. Generally, information that a user must re-enter to complete a single-session process must be auto-populated or available for the user to select.
• Ensure that no cognitive function test is required (such as password or a puzzle) for authentication unless it can be bypassed, or completed with assistance by some other mechanism, or uses object recognition or identification of user-provided non-text content.

Tables