This is a cultivated list of a few useful accessibility Bookmarklets, especially when inspecting or analysing the accessibility of web content. These Booklets provide the tools to show the active focus, outline content's structure, and simulate disabilities.
This list includes the following Bookmarkets:
- Accessibility Bookmarklets
- H123 (Accessibility HTML5 Outliner)
- The Screen Curtain Bookmarklet
- Dyslexia Bookmarklet
- Reading Order Bookmarklet
- What has Focus?
This Bookmarklet assists by:
- Making otherwise hidden accessibility features on web pages (like ARIA landmarks, roles, labels and descriptions and alternative text for non-text objects) more visible.
- Showing whether HTML markup (like lists, headings, label elements, and appropriate landmark roles) is used with proper semantics for accessibility.
- Flagging elements or regions on web pages where information that could improve accessibility (like elements not contained in landmarks, image alt text or long descriptions, list accessible names or descriptions, or form control labels) is missing.
H123 (Accessibility HTML5 Outliner)
See the headings like a screen reader.
This Bookmarklet outliner will only consider headings that are actually visible, at least visible to the screen reader (because you can visually hide elements that stay theoretically visible).
Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y indicates errors or warnings at the source with a simple tooltip on how to fix.
The Screen Curtain Bookmarklet
The Screen Curtain Bookmarklet allows engineers, testers, educators, and students to temporarily obscure web technologies while using screen readers in order to simulate the experience of using such technologies without sight.
This is analogous to the Screen Curtain mode provided on iPhone and iPad devices when using VoiceOver to experience the same. This bookmarklet should be used in combination with JAWS or NVDA on Windows when testing the non-sighted experience of typical screen reader users.
Rearrange the letters within words on a page, to show what reading with dyslexia is like.
Reading Order Bookmarklet
When a keyboard-only user or screen reader user comes to page that uses CSS to create a layout, there is a chance that what is on the screen does not match the flow of the page.
This Bookmarklet highlights the reading order of the webpage's content that the Bookmarklet is activated on.
What has Focus?
This will come in handy when debugging accessibility issues with somebody else's code or a third-party library.
This article was last updated on October 10th 2020.