Design Template by Anonymous

Testing Tools

Manual

A manual checklist can be used for accessibility testing. WCAG provides a simple and straightforward list referenced as Easy Checks - A First Review of Web Accessibility.

There are other manual checks you can make by verifying there is consistent labeling, pages are organized well, checking the tab order is as expected, or using a contrast checker.

Color Palette Test

Here is an example of checking the contrast of test using the WebAIM Contrast Checker. The UNH color palette contains various shades of blue and orange to be used for headlines. Since headlines are generally bigger, the color of the text and background can have a lower ratio. However, a higher ratio is generally better to comply with more guidelines.

UNH Color Palette for Headings with three shades of blue — UNH Color Palette

The ratio found on the UNH website was 5.96:1.

The contrast ratio for the UNH Color Palette is 5.96:1 — UNH Color Palette Contrast Ratio

It passes WCAG AA expected contrast, but it fails on WCAG AAA expected contrast. This is because the colors chosen are orange and blue. In the guidelines of the UNH color palette, it recommends using lighter fonts. Despite following this reccomendation, it still did not pass the WCAG AAA contrast ratio. There are places on the UNH website that fail the expected ratio, meaning there could be more specific guidelines on how to use the color palette.

The UNH Color Palette passing all WCAG 2.0 Guidelines for color contrast except for Normal Text AAA — UNH Color Palette Compliance

Automated

Automated testing tools can be used to validate the accessibility of a site. Automated tools generally recommend using manual testing in addition to automated testing. For example, ANDI reccomends users to manually check the contrast on images, but will automatically check text contrast.

WAVE
- Installed as a Chrome Extension
- Tests tab order, structure, color contrast, accessible names, and other features
- Additionally, will alert user if there are missing landmarks
Axe
- Installed as a Chrome extension
- Tests websites on your computer, and tests mobile devices
- Additionally, checks missing ARIA role characteristics
ANDI
- Can be used to test HTML pages from your Bookmarks Bar
- Tests focusable elements, graphics, links/buttons, tables, structures, color contrast, and hidden content

Using WAVE at unh.edu

WAVE was used on the UNH website home page to see how it might comply with WCAG guidelines. WAVE references WCAG guidelines when finding inaccessible elements of a page.

The UNH website is evaluated by the automated testing tool WAVE — This is how WAVE looks when it is first opened on the UNH website.

Accessible Features

WAVE lists all elements it finds, inclusing marking which elements are considered accessible. The UNH website sets the language to English and contains useful navigation elements.

A pop-up showing WAVE found the language of the UNH website is set — The site sets the language to English.

A pop-up showing WAVE found Skiplink functionality — The site has a "Skip to Main Content" link.

Inaccessible Features

WAVE lists issues it finds on a site. It marks which elements don't meet certain guidelines, and will provide more information on why it is an issue, and how to fix it. The UNH website has low contrast in some areas, and could be more specific on the language it uses in attribute text.

A pop-up showing WAVE found low contrast of text over an image of the UNH campus — The site has low contrast in some areas.

A pop-up showing WAVE found a heading with the same attribute text as ALT text — The site uses redundant ALT text.

Conclusion

Accessibility is not only a legal requirement, but also a fundamental part of inclusive design. By recognizing the various abilities of users, developers can create content online with equal opportunities. Remember, accessibility benefits everyone.