Skip to main content

Blog Mark Wilcock

https://markwilcock.com/2020/06/collection-of-useful-accessibility-bookmarklets/

Collection of useful Accessibility Bookmarklets

Posted on:

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

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.

Found out more about Accessibility Bookmarklets.

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).

Found out more about H123 Accessibility HTML5 Outliner.

Sa11y

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.

Found out more about Sa11y.

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.

Found out more about The Screen Curtain Bookmarket.

Dyslexia Bookmarklet

Rearrange the letters within words on a page, to show what reading with dyslexia is like.

Found out more about Dyslexia Bookmarket.

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.

Found out more about Reading Order Bookmarklet.

What has Focus?

When something receives keyboard focus via Tab key, the current element will be logged to the JavaScript console so you can determine which element currently has focus.

This will come in handy when debugging accessibility issues with somebody else's code or a third-party library.

Found out more about What has Focus.

This article was last updated on October 10th 2020.

Sharing and comments

Share this page

1 comment

  1. Comment by Bethany posted on

    Thanks for this collection

    Reply

Leave a comment

We only ask for your email address so we know you're a real person

By submitting a comment you understand it may be published publicly on this website. Please read our privacy notice to see how we handle your information.