A11y Bookmarklets
Overview
Bookmarklets (sometimes called favelets) use code snippets (usually JavaScript) to temporarily modify the page view to
highlight accessibility considerations. They function similarly to browser plug ins but don't require installation.
Bookmarklet instructions
- Drag the button to your bookmarks or favorites toolbar or folder
- Add any additional notes, links, etc.
- Navigate to a test page and select the desired bookmarklet
- Refresh the page to return to the original view
- To preview the bookmarklet, select the button at the top of the card
Bookmarklet Tips
Bookmarklet Notice
Bookmarklets
General
Get started with these:
Quickly indicate heading styles on the page - by Paul J Adam
This opens the page with the WAVE web tool. To return to the original page you will need to manually remove the prepended Uniform Resource Locator (URL) https://wave.webaim.org/report# from the address bar and reload the page.
Color and Contrast
Preview the page with different color settings:
This bookmarklet renders the page grayscale and if the content works well, it usually will work for many kinds of color blindness. Refresh the page to see the original rendering both by Thomas Park
WCAG Guidelines
Test your design for against WCAG criteria:
Activate and verify that your page content and functionality isn't lost with increased spacing as described in 1.4.12 Text Spacing - by Dylan Darrell
This bookmarklet displays a panel revealing the focus order of elements on the page as described in 2.4.3: Focus Order, including an option to draw the path on the page. Refresh the page to see the original rendering.
Shows a 44x44 pixel cursor for testing functionality as described in 2.5.5 Target Size (Esc to revert) - by Adrian Roselli (Note: this is the AAA standard but most affected users say that the AA standard isn't accessible; read Adrian's article for a detailed explanation.)