Quantcast
Channel: ARIA – :last-child
Viewing all articles
Browse latest Browse all 15

Bookmarklet for finding incorrect use of aria-owns

$
0
0

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)


Viewing all articles
Browse latest Browse all 15

Latest Images

Trending Articles





Latest Images