OPAC Accessibility Testing Methods and Notes
Set up the following testing tools:
- Install SkipTo Headings and Landmarks
- Install Stylus (Firefox), User JavaScript and CSS (Chrome), or any other extension to manage user stylesheets
- Create a new user stylesheet for the test server domain and copy this Testing stylesheet from Gist
- If not using Chrome, install axe DevTools. If you are using Chrome, you can also use axe. If you prefer, you can access Chrome Lighthouse via Dev Tools. This uses the same set of rules as axe, but runs much more slowly because it runs all the Lighthouse tests regardless of whether you have selected only the Accessibility option.
- Turn on keyboard tabbing navigation in your browser
- Install NVDA (Windows) or use VoiceOver (Mac; already installed)
Testing categories
Headings - Use the SkipTo extension to examine headings and landmarks.
Keyboard - Beginning near the site logo or the beginning of the relevant section, use your tab key to navigate. Try to operate interactive elements; see whether focus outlines remain visible at all times.
User stylesheet - Activate the user stylesheet provided using the Stylus extension (or some other user stylesheet manager). Errors will be outlined in red, and details about the type of error will be displayed in the element inspector’s CSS Rules panel. Duplicate headings will be outlined in blue, and hidden fieldset legends will appear in green.
Browser inspector - Open the browser’s inspector (right-click anything on the page and choose Inspect). Use the Element Inspector tab’s CSS Rules panel to see messages from the user stylesheet. Otherwise, use the Accessibility tab to find the Accessible Name and Accessible Description of the elements you are examining.
axe DevTools - If using axe, open the browser’s inspector, then switch to the axe tab. Press the “Full Page Scan” button. Note: While we do generally recommend turning on the “Best Practices” option, this report will include some errors that were not in the scope of this project.
Lighthouse - If using Chrome Lighthouse instead of axe, open Lighthouse and turn on only the accessibility category. Press the “Analyze Page Load” button and wait for the report to finish. Note that the three-dot menu next to the site URL at the top of the report includes an option to print or export the report.