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.

screenshot showing the bookmarklets effect on hidden elements

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

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);		

Posted

in

, , ,

by

Comments

2 responses to “Find aria-hidden with this bookmarklet”

  1. Raghavendra Satish Peri Avatar

    Nice nifty Bookmarklet Ted,i added this to my list of A11Y Resources https://www.digitala11y.com/web-accessibility-resources/

  2. […] Find aria-hidden with this bookmarklet by Ted Drake […]

Leave a Reply

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