Adding WAI-ARIA Support to jQuery.toggle () Method

Question

I want to link WAI-ARIA aria-hidden support using jQuery.toggle () method.

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

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

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

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

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

I probably want to use the full function of the method , maybe something like strings

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

What is the most efficient .toggle() extension .toggle() for switching aria-hidden state?

Answer 1

Short answer: no need to do this.

Available technology supports CSS display: hidden; property display: hidden; in a way that already hides the element correctly. Thus, pointing aria-hidden="true" redundant, from the point of view of a screen reader, to the jQuery .toggle() method, which sets the display property to hidden . Specifying aria-hidden="false" (or removing the aria-hidden property) is redundant for the jQuery .toggle() method, which sets the display property to inline .

See fooobar.com/questions/287965 / ... and Steve Faulkner HTML5 Accessibility Chops: Hidden and Hidden Blog Arias (specifically, "Summary of Results") for more information.

Answer 2

The accepted answer is correct in spirit, but has some specific problems:

• There is no value for the "hidden" CSS Display property - it should be "none".

• jQuery.toggle () does not set the display to "inline" when hiding; it returns it to the empty state, which returns to some value specified by the cascade. Therefore, if the calculated value for the display was "block", then what it returns.