Using Bookmarklets for Accessibility Testing

I was inspired to use JavaScript for testing by the presentation Automated Accessibility Audits by Pamela Fox, North Bay Python 2023 which sets up accessibility testing automation in Python using accessibility and web testing libraries.

Source: Bookmarklets for Better Accessibility Testing with Natalie MacLees for a hands-on walkthrough of accessibility bookmarklets - simple, powerful tools you can run right in your browser to test for common accessibility issues.

Use case and example usage

Run custom accessibility tests or assist in manual testing in your browser. Select from your bookmarks to run like check specific Web Content Accessibility Guidelines (WCAG) criteria or change what you see to make check easier.

An example is running a bookmarklet to change the size of your cursor to a box that matches accessible height of text per WCAG.

What is a bookmarklet? a JavaScript program/function you can run from your browser. It can do things like analyze a page, open sites, and anything Javascript can do.

Getting Started and Setting up Bookmarklets

You must only get bookmarklets from a trusted source or write them yourself and verify their function. Running bookmarklets would have access to the web page data and can also execute other functions.

Recommended site: GitHub - oaa-tools/bookmarklets: Web Accessibility Bookmarklets to highlight classes of elements on a web page like landmarks (navigation, header, others), and HTML elements.

Once you have the bookmarklet, go to the page for testing and click on the bookmarklet. Refresh the page to clear any applied bookmarklets.

Creating bookmarklets

To create a bookmarklet, create a new bookmark in your browser. Name it and in the URL field, paste the JavaScript. The bookmarklet will be available in the browser.

Another way if available in a website is to drag or copy the bookmark to your browser.

For code samples, see section on Bookmarklets in JavaScript Snippets - JavaScript Snippets

Examples of Using Bookmarklets in Manual Web Accessibility Testing

Check specific WCAG items like font sizes, text spacing, grouped fields
Checking all landmarks, headings, images, links on page
Colour contrast, check contrast on hover of links
See where Accessible Rich Internet Applications (ARIA) is use and generate report for inspection like unnecessary roles
Verify elements have focus styles, correct focus order

ANDI

Accessible Name & Description Inspector (ANDI) is a US Section 508 accessibility compliance tool, by United States Social Security Administration - GitHub Repository. It helps tests automatically detect accessibility issues, make improvement suggestions, and shows what a screen reader says for interactive elements.

Example usage

ANDI will scan elements on page and show a tester features like:

Arrows: navigate to next, previous elements
Accessibility Alert: Possible problems on page
“ANDI Output”: Display what a screen reader would read out

Advanced settings show element highlights, linearize page

Focusable Elements
- Go through order of elements
Graphics and Images
- Find images
- See alerts
- Hide, find background images
Links and Buttons

Find elements
Structures

Works on headings, lists, landmarks, live regions, reading order, page title, page language, role attribute
Colour Contrast

Find contrast issues like showing colours and suggestions on accessible colours or warn on background images that require manual checks.
Hidden Content

Reveal all hidden content for checks and determine hiding technique (display, overflow, absolute positions), and find ARIA hidden true elements.