Bookmarklet for finding incorrect use of aria-owns

A gate that is padlocked closed, blocking navigation to the space.

Summary

This article shares a bookmarklet that highlights aria-owns attributes, helping developers find accessibility problems affecting screen reader users on webpages.

This post restored from the Wayback Machine. It was originally published on March 8, 2020.

We’ve discovered the hard way that our products have incorrectly used the aria-owns attribute. With the recent Chrome updates, this has triggered the pages to break the customer experience with JAWS and NVDA.

I created the following bookmarklet to highlight all elements on your screen that use aria-owns. To use this, drag the following link to your bookmark bar, open a page, and then press the link. It will highlight any elements that use aria-owns.

highlight elements with aria-owns

Test the bookmarklet

above

The above header and this link Last-Child homepage contain aria-owns attributes. Click on the bookmarklet to see how it highlights their state. Please note, these are actually valid uses of the aria-owns attribute. They aren’t ideal, the text should have simply been in the correct DOM.

Screenshots

Bookmarklet adjustment to the page.

screenshot of page with the highlighted items that use aria-owns — This shows the page with aria-owns items highlighted

Aria-owns inserts homepage into the link

This screenshot shows how the accessibility inspector has inserted “homepage” into the link.

This bookmarklet is also available on Github: Accessibility Bookmarklets (Github)