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.
example button

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
What am I?

Usage

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.

Comments