Accessibility Bookmarklet to Identify ARIA-Hidden Attribute on Web Page

Tools / By

Screen readers do not expose the content that is marked with aria-hidden, this attribute need to be used very carefully. The aria-hidden bookmarklet highlights the text and elements where aria-hidden is used so that developers and testers can evaluate if the usage of aria-hidden is appropriate.

Using ARIA-Hidden Bookmarklet to identify all Elements on a web page that use ARIA-Hidden
ARIA-Hidden Bookmarklet

ARIA-Hidden Bookmarklet

The ARIA-Hidden Bookmarklet helps identify ARIA-Hidden elements on a webpage. ARIA-Hidden elements are not detected by screen-readers, hence, this bookmarklet helps detect the elements and test for appropriateness.

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


Click here to Copy the Code

We hope these accessibility bookmarklets come in handy during your next accessibility audit.

Explore other Accessibility Bookmarklets

References: Accessibility Bookmarklets