WebAIM - Web Accessibility In Mind

Web Accessibility Evaluation Guide

This evaluation guide outlines important accessibility checks, organized by content type. While it is not an exhaustive guide to testing all WCAG 2 requirements, it includes checks for most common accessibility issues. WAVE icons that will assist you in your evaluation are highlighted.

Evaluation Tools

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.

Tip

Structural element: Inline frame – WAVE identifies the presence of an inline frame (<iframe>), but it does not analyze the iframe's contents. You can often open the iframe content in its own tab and then test it with WAVE. In Firefox, right-click on the iframe and choose This Frame > Open Frame in New Tab. In Chrome, download the Open iFrame Chrome Extension to add a right click option.

Other Tools and Resources

Evaluation Techniques

Tip

WAVE and other automated tools can only identify some accessibility issues. You should also test the page with a keyboard, screen reader, and/or browser developer tools.

Images and alternative text

  • Error: Missing alternative text, Error: Linked image missing alternative text, Error: Spacer image missing alternative text, Error: Image button missing alternative text, Error: Image map area missing alternative text, Error: Image map missing alternative text – Identify images that are missing alternative text.
  • Feature: Alternative text, Feature: Linked image with alternative text, Feature: Image button with alternative text, Feature: Image map area with alternative text, Feature: Image map with alternative text – Confirm that an image's alternative text (in green next to the icon) presents its content and/or function.
    • Alert: Suspicious alternative text - The alternative text is likely insufficient or contains extraneous information.
    • Alert: Redundant alternative text - A nearby image has the same alternative text.
    • Alert: Long alternative text – Alternative text should be succinct and typically should not repeat information in nearby text or images.
    • ARIA label – 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">).
    • Alert: Image with title – 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 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.
    • Alert: Long description, Error: Invalid longdesc – 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.
    • Error: Empty button, Error: Empty link – Empty links and buttons may indicate CSS images with no alt text
  • Feature: Null or empty alternative text, Feature: Null or empty alternative text on spacer – 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.
  • Feature: Figure - 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.

  • Alert: No page regions, Structural element: Header, Structural element: Navigation, Structural element: Search, Structural element: Main content, Structural element: Aside, Structural element: Footer – 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.
    • Structural element: Generic region – Other important regions are identified.
    • ARIA label - 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.
  • Structural element: Heading level 1, Structural element: Heading level 2, Structural element: Heading level 3, Structural element: Heading level 4, Structural element: Heading level 5, Structural element: Heading level 6 – Confirm that headings describe the content that follows. If not, they should not be headings.
    • Alert: Missing first level heading, Structural element: Heading level 1 – Confirm that there is an <h1> that describes the page content. It should usually be within the <main> region.
    • Alert: Skipped heading level – If headings skip levels (e.g., <h2> to <h4> with no <h3> in between), identify the correct heading structure.
    • Error: Empty heading – Headings and regions must not be empty.
  • Alert: Possible heading – Search for text that functions as a heading but needs to be tagged <h1> through <h6>.
  • Alert: No heading structure – Search for sections that should have headings but do not.

Forms

  • Error: Missing form label, Feature: Form label - 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>.
  • Alert: Unlabeled form control with title, ARIA label - If a label is not visible, check for a hidden label, aria-label, or title attribute.
  • Alert: Select missing label – If a <select> menu does not have a <label>, confirm that the default option presents the purpose of the menu.
  • Error: Empty form label, Error: Multiple form labels, Error: Broken ARIA reference, Alert: Orphaned form label - Use the Code panel to explore broken labels.
  • Alert: Missing fieldset, Alert: Fieldset missing legend, Feature: Fieldset - Look for <fieldset>/<legend> where a higher-level description for a group of form fields is needed.
  • 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.
  • ARIA description – Descriptions and inline error messages are associated to the correct form control using aria-describedby.

Tables

  • Structural element: Data table, Structural element: Table header cell, Structural element: Column header cell, Structural element: Row header cell – Ensure data table row and column headers are defined and given the correct scope attribute value ("col" or "row").
    • Error: Empty table header Header cells must not be empty.
    • Layout tables must not have headers.
  • Structural element: Table caption, Alert: Possible table caption - If text describes the table, ensure it is a <caption>.
  • Alert: Layout table – If a table is being used for layout, check reading order. Layout tables are discouraged and will cause problems in responsive layouts and when zooming the page.

Resize Content

  • In Chrome, press Ctrl (command on Mac) and:
    • + (= sign) to zoom in (larger)
    • - to zoom out (smaller)
    • 0 to reset to 100%
  • Test that the page is readable and that no content is lost up to 200%.
  • Adjust the viewport to 1280 pixels wide and then zoom from 100% to 400%. At each zoom level, ensure information is not lost.
    • No horizontal scrolling is allowed unless required for the content—e.g., a data table or map that is wider than the page (WCAG 2.1 requirement).
    • Test that dialogs, accordions, tooltips, and menus are usable at up to 400%.
  • Run the Text Spacing Bookmarklet. Ensure no loss of content or functionality occurs when text spacing is adjusted.
  • Increase text size to 130-150% (recommended, but not a WCAG requirement) and check for loss of content. In Firefox, choose View > Zoom > Zoom Text Only.

Contrast

  • Error: Very low contrast - WAVE identifies text with less than 4.5:1 contrast, or less than 3:1 for “large” text (defined as ≥24px, or ≥18.67px if bold).
    • Use tools in the Contrast panel to see the ratio, find a compliant color combination, and preview this combination in the page.
    • The WebAIM Contrast Checker can also be used to test other color combinations.
  • Use the ColorZilla eyedropper or the eyedropper tool in the WAVE sidebar color picker to find the color value in text in images and background colors not detected in WAVE (background images, gradients, transparency).
  • Test 3:1 contrast of:
    • graphical objects, such as icons, that are required to understand content.
    • user interface components, including custom form control borders.
    • keyboard focus indicators/outlines.
  • Use browser developer tools to test contrast of controls in different states (e.g., :hover).

Color use

  • Look for information that is only presented through color.
    • If links are identified using only color (i.e., they are not underlined), use the link contrast checker to verify at least 3:1 contrast between link and body text, and check that there is a non-color change on mouse hover and keyboard focus.
    • If color change is the only identifier of keyboard focus, ensure at least 3:1 contrast between the default state and the focused state.

ARIA

  • ARIA (and all other ARIA icons) - Check for appropriate use of ARIA roles, states, and properties (presented in green text).
  • ARIA label, Error: Broken ARIA reference, ARIA description – ARIA labels override form <label>s, alt attributes, link text, etc. Use WAVE, browser developer tools, or test in a screen reader to ensure proper accessible name is presented.
  • ARIA, ARIA popup – Test ARIA widgets with a screen reader and keyboard and ensure they match ARIA design patterns.
    • ARIA popup - Test dialogs, menus, and other things that "pop" open.
      • Focus is set to the dialog when it appears.
      • You can navigate forward and backward with the keyboard within the dialog.
      • Modal dialogs (those that require user action) maintain keyboard focus until dismissed.
      • Non-modal dialogs (those that do not require user action) close when focus leaves the dialog.
      • If a visible "close" button is present, it is keyboard-accessible and properly labeled.
      • Pressing Esc closes the open content.
      • When it closes, focus returns to a logical place.
    • ARIA menu, Error: Broken ARIA menu – Navigate menubars with / and vertical menus with /. Esc collapses menus.
    • ARIA tabindextabindex values of 0 and -1 are used appropriately to manage keyboard focus.
  • ARIA expanded – Be sure ARIA attributes update correctly when there are dynamic changes.
  • ARIA alert or live region – Status messages and other changing content is presented correctly to screen readers.
  • Look for elements in need of ARIA (e.g., a collapsible area in need of aria-expanded).
  • ARIA hidden – Anything hidden with ARIA is either hidden from all users (e.g., display:none) or is redundant AND is not interactive.
  • ARIA button - Make sure ARIA buttons have clear keyboard focus and can be activated with Enter and Spacebar. Consider replacing with a true button (e.g., <button>, <input type="button">).

Other principles

  • Error: Missing or uninformative page title - Ensure the page <title> describes the page and generally corresponds to the <h1>.
  • Error: Language missing or invalid, Feature: Language – Confirm that the correct language is identified for the page (e.g., <html lang="en">) and for content areas in a different language.
  • Structural element: Ordered list, Structural element: Unordered list, Structural element: Definition/description list – Confirm that lists are used correctly (<ol> for order or hierarchy, <ul> for parallel/interchangeable items, <dl> for name/value pairs).
    • Alert: Possible list – Search for text that should be marked up as a list.
  • Alert: Redundant title text – If the title attribute repeats information in the link, button, or image alt text, a screen reader may read this content twice. See if the redundant title text can be removed.
  • Error: Page refreshes or redirects - Identify pages that time out or refresh without offering a chance to extend the session.
  • Alert: Audio/Video, Alert: HTML5 video or audio, Alert: YouTube video – Ensure multimedia is accessible.
    • Multimedia has captions, and they are equivalent.
    • Audio- or video-only content is transcribed.
    • Important visual content is presented in the default audio or in audio descriptions.
    • Media player controls are keyboard accessible.
  • Ensure media and other content cannot cause a seizure.
  • Alert: Very small text, Alert: Justified text – Check that text is easy to read.