ARIA Label Bookmarklet

I love simple bookmarklets that visualize coding patterns. I was working on a project today and wanted to verify that aria-labels were sufficiently descriptive. So I put together this quick bookmarklet.

aria-label bookmarklet

Simply drag that up to your bookmark bar and click on it whenever you need to test a page.

If an element has an aria-label, it should get a yellow background and the label displayed in red. Your particular styles may affect this.

If an has an aria-labelledby, it should have a pink background and the object it is pointing to will be displayed in green.
I’m labelling the next element


I’m using this on a project that uses aria-label extensively in a complicated form. In the past, I found some of the aria-label attributes didn’t provide adequate context, so this now makes it pretty simple to discover.

Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published.