Question

I’d like to pair WAI-ARIA aria-hidden support with jQuery’s .toggle() method.

So given <p id="myElement">Hi there</p>

$('#myElement').toggle() would hide the element, and set aria-hidden="true":

<p id="myElement" style="display: none;" aria-hidden="true">Hi there</p>

And executing the same $('#myElement').toggle() script again would show (toggle) the element, and set (toggle) aria-hidden="false":

<p id="myElement" style="display: block" aria-hidden="false">Hi there</p>

I probably want to use the complete function of the method, maybe something along the lines of

$('#myElement').toggle(
    if ($this.css('display')==='none'){
       $this.prop('aria-hidden', 'true')
    }
    else
    {
            $this.prop('aria-hidden', 'false')
    }
)

What’s the most performant solution for extending .toggle() to also toggle the aria-hidden state?

Answer 1

The short answer is that there’s no need to do so.

Accessible Technology supports CSS’s display: hidden; property in a way that already properly hides the element. So specifying aria-hidden="true" is redundant, from a screen-reader’s point of view, to jQuery’s .toggle() method setting the display property to hidden. Specifying aria-hidden="false" (or removing the aria-hidden property) is redundant to jQuery’s .toggle() method setting the display property to inline.

Please see https://stackoverflow.com/a/10351673/1430996 and Steve Faulkner‘s HTML5 Accessibility Chops: hidden and aria-hidden blog post (particularly the “Results Summary”) for further details.