Bookmarklets to Test Accessibility Features On A Page

Not all automated tools like WAVE check for things that are easily found accessibility defects on a web page (e.g. Duplicate IDs). This page will be a living document containing the bookmarklets we find the most useful.

How To Install Bookmarklets For Your Browser

The easiest, most straight-forward way to install any of the bookmarklets in your browser is to make your Bookmarks Toolbar visible and dragging them in there.

  1. The best way to store bookmarklets are to put them on your browser's Bookmarks Toolbar.
    Read how you can make your browser's Bookmarks Toolbar Visible.
    Browser Instructions
    Chrome for Windows and Linux Press Control+Shift+B on your keyboard.
    Safari and Chrome for Mac

    Press ⌘+Shift+B on your keyboard
    Firefox

    Why does Mozilla make this so difficult?!?!

    1. In the navigation toolbar, go to the rightmost icon (screen reader users will hear it being referred to as the "Firefox" button. Sighted users will see it as a hamburger menu at the right most edge of the navigation toolbar, as shown in the screenshot below:
    2. Choose the Bookmarks item, as shown in this screenshot:
    3. In the new menu that appears, choose Show Bookmarks Toolbar, as shown in the screenshot below:
  2. Next, drag any of the bookmarklet links below into the Bookmarks Toolbar in your web browser.
  3. That's it! Whenever you want to use any of the bookmarklets on your webpage, just click it!

List of Bookmarklets

Duplicate IDs

You'd be surprised how many pages have duplicate IDs in their HTML. This is very common with pages that have multiple instances of a component on a web page (e.g. A product listing page with several product tiles on it). This bookmarklet can help you check in-browser if there are multiple tags with the same ID (you will need to open your console to see the results). It was slightly modified from the bookmarklet written by Matthew Busche.

Duplicate ID Bookmarklet

What Has Focus?

I wrote this bookmarklet when I was testing a page that was allowing keyboard focus to be applied to visually hidden elements on the page. When you use the bookmarklet, every time you tab into an interactive element, its HTML appears in the console. I use it all the time and find it super useful, so I include it here.

What Currently Has Focus

Other Accessibility Related Bookmarklets

There are, of course, many other places to get a11y related bookmarklets. Here are a few we know about.