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
About Bookmarklets
Bookmarklet Tips
Bookmarklet Notice
Full page scan
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.
Layout
Quickly indicate heading styles on the page - by Paul J Adam
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
Shows a 44x44 pixel cursor for testing functionality as described in 2.5.5 Target Size (use 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.)
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.
Color and Contrast
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 testing
Test your design against WCAG criteria: