Bookmarklet for finding incorrect use of aria-owns

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

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

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

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.

Leave a comment

Your email address will not be published. Required fields are marked *