WAVE Web Accessibility Evaluation Tool

The Summary tab presents an overview of findings organized by category:

• • Errors: Accessibility issues detected that must be fixed.

• • Contrast Errors: Text that does not have sufficient color contrast against its background and that must be fixed.

• • Alerts: Elements on the page that may pose accessibility barriers and require manual review.

• • Features: Elements detected that generally improve accessibility.

• • Structural Elements: Highlight the structure of your page (e.g., heading, links, and regions).

• • ARIA: Accessible Rich Internet Applications (ARIA) identified on the page that are intended to make page content and structure accessible. Use of ARIA can be tricky as improper application may cause added accessibility issues.

The Details tab outlines all findings and respective icons in the categories aforementioned. By selecting an icon in the menu, WAVE adjusts the page view to show you where the finding occurred. Further, you can use the checkboxes to hide icons on your page view to reduce clutter. Lastly, icons that are faded with a dashed border indicate hidden elements. You can use the Styles toggle at the top of the menu to change the page view and display all elements.

When viewing the list of findings in the Details tab, you can select the info (“i”) button adjacent to each finding to be brought to the Reference tab, which refreshes to provide key information about the finding selected, its significance, and how to fix it.

The Order tab helps users to view each interactive element on the page in the order in which it appears. It also shows its role (e.g., link, button, menu item, form field, etc.) and its accessible name. (Elements that do not perform an action should not be listed.) Use of the Order tab allows user to ensure a logical order of page elements, verify the absence of any elements that do not perform a function, and ensure that each element has an appropriate accessible name informing its function (e.g., Link: Office Hours).

The Structure tab shows the regions of the page (e.g., Header, Navigation, Main, Footer). It also shows the heading structure and indicates any nesting of elements. Users of assistive technology, such as users who are blind or have low vision, rely on well-organized page structure to help them understand and navigate the page.

The Contrast tab offers a built-in color contrast checker. Use the Color Picker to select your Foreground (text) color and your Background color and receive the contrast ratio for that combination of colors.

Key Notes:

• Normal size text must meet a minimum contrast ratio of 4.5:1 against its background.
• Large text (14 point (18.66px) and bold or larger, or 18 point (24px) or larger) must meet a minimum contrast ratio of 3:1.
• Additionally, graphics and user interface components (e.g., buttons, form input borders, etc.) must also meet a minimum contrast ratio of at least 3:1 against their background color.