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

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.

Use aria-labelledby to provide context to unordered lists

VoiceOver announces the heading when the list is selected

It’s not uncommon for a web page to include multiple sets of lists. This is especially true for a web site that aggregates information. The Yahoo! Finance home page contains at least 12 lists.

Screen readers allow the user to navigate a page via lists and announce the number of items in each list. But what if we could make this navigation more relevant? This can be done via the aria-labelledby attribute.

Continue Reading Use aria-labelledby to provide context to unordered lists