When you’re deep in accessibility work, sometimes the simplest tools can save the most time. That’s where bookmarklets come in. They are tiny, browser-based tools that help you run quick checks or surface accessibility info in just a click.

At Intopia, we’ve put together a curated set of bookmarklets we use in our audits and research sessions. No installs. Just open, click, and go.

Simple testing for beginners

There are lots of useful accessibility testing tools and advice out there. But some of them assume you’re already an expert in accessibility by using a lot of jargon. Luckily, they aren’t the only way to get started with testing the accessibility of your digital products.

Easy Checks – A First Review of Web Accessibility

If today is your first time exploring the accessibility of your website, we recommend starting with the W3C’s Easy Checks. They’re simple and effective, with useful explanations of what and why you need to do the checks.

Microsoft’s Accessibility Insights

If you’ve done the Easy Checks and want to try more, download the Microsoft’s Accessibility Insights plugin for your browser. It’s got some automated checks and tools, and instructions for doing everything else that needs manual testing. We like that it digs into complex detail but always explains what you’re doing and why in an easy-to-understand way.

Intopia’s accessibility bookmarklets

We’ve created a collection of bookmarklets that display the relevant HTML information without diving into the browser’s developer tools.

How to use bookmarklets

To use a bookmarklet, start by dragging the bookmarklet link into your bookmarks bar. If you can’t drag and drop, right-click the link, select “Bookmark this link” (or “Add to favourites” depending on your browser), and save it to your bookmarks bar. Make sure your bookmarks bar is visible so you can access it easily.

Once it’s saved, go to the web page you want to test.

  • To turn on the bookmarklet, activate the bookmarklet from your bookmarks bar.
  • To turn off the bookmarklet off, activate a second time to remove the highlights or simply refresh the page.

Highlight image alternatives 

Displays the alternative text of images. Use this to check if images and icons are appropriately marked up – informative, decorative or functional.

Drag this image alternatives bookmarklet link to your bookmarks bar.

Note: The W3C alt text decision tree (opens in external tab/window)  is useful for choosing the right method for your needs.

Highlight for and ID

Displays the for and id attributes of form fields (<label> and <input> elements respectively). Use this to check if form fields are properly labelled.

Drag this for and id bookmarklet link to your bookmarks bar.

Note: This will only check for explicit labels, not implicit labels. The W3C’s tutorial on Labelling Controls (opens in external tab/window) is a great place to learn about the differences between them.

Highlight aria-label

Displays the aria-label attributes of elements. Use this to check if elements such as icon button are appropriately labelled.

Drag this aria-label bookmarklet link to your bookmarks bar.

Highlight aria-labelledby

Similar to the above “Highlight aria-label”, this also checks if elements are appropriately labelled by displaying the aria-labelledby attributes.

Drag this aria-labelledby bookmarklet link to your bookmarks bar.

Highlight aria-describedby

Displays the aria-describedby attributes of elements. Use this to check if elements such as form fields are appropriately described.

 Drag this aria-describedby bookmarklet link to your bookmarks bar.

Got a request?

We have plans to make more of these bookmarklets. Let us know if there are any others you’d find helpful.