Find aria-hidden with this bookmarklet

I love purpose built bookmarklets that help you find problematic code. I got an email yesterday from Travis Roth about a potential vestigial aria-hidden attribute on an otherwise visible element. Unfortunately, it’s not uncommon to find an element that has aria-hidden=”true” on an element that is visible and should have either “false” or no aria-hidden attribute. This causes assistive technology to ignore the element.

My first reaction was to search the code for aria-hidden attributes, but this can take time and would have to be completed on each page to find the issue.

So I created the following bookmarklet that will find any element on your page that uses aria-hidden. It will force it to be visible and will display the attribute’s value.

To use this bookmarklet, drag the following link to your bookmark toolbar. Visit your questionable page and click the link.

aria-hidden bookmarklet

This version of the bookmarklet does not force elements to have display block. It’s better when your page has hidden modals using aria-hidden.
aria-hidden highlight

Test elements

• This link has aria-hidden=”true”. Can you see it or tab to it?
• This link has aria-hidden=”true” and visibility:hidden. Can you see it or tab to it?
• This link has aria-hidden=”true” and display:none. Can you see it or tab to it?
• This link has aria-hidden=”false”

Bookmarklet code

javascript:(function(c){
  var a='
    [aria-hidden]{background:yellow;display:block!important;visibility:visible!important;}
    [aria-hidden]:before{content:attr(aria-hidden);color:red;font-weight:bold;display:inline-block;}',
  b=c.getElementById('a11y-hidden-highlight');
  if(b){b.disabled=!b.disabled;}
  else{b=c.createElement('style');
  b.id='a11y-hidden-highlight';
  b.type='text/css';
  if(b.styleSheet){
    b.styleSheet.cssText=a;
  }
  else{
    b.appendChild(c.createTextNode(a));
  }
  c.getElementsByTagName('head')[0].appendChild(b);}})(document);