A11y Bookmarklets
Overview
Bookmarklets use code snippets (usually JavaScript) to temporarily modify the page view to
highlight accessibility considerations.
- 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
- You can test a bookmarklet by selecting the button in the list below.
Bookmarklets
Bookmarklet Tips
Bookmarklet Notice
Utilities
Bookmarklets
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
Bookmarklets
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
Bookmarklets
Activate and verify that your page content and functionality isn't lost with increased spacing as described in 1.4.12 Text Spacing - by DylanDarrell
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.)