ARIA-HIDDEN

At the time of writting, aria-hidden is not implemented in Internet Exployer, or FireFox using the Jaws screen reader.

The following example using the aria-hidden property to create an accordian. By pressing on the “Drawer” button, the “Lorem Ipsum” paragraph will be toggle as visible and not visible.

aria-hidden has two states. True and False.

Example 1:





Code


function ARIA_Hidden_Toggle() {
	// Get the current class either hidden or not_hidden
	var getvalue=document.getElementById("ARIA_content").getAttribute("aria-hidden");
	if (getvalue=="false")
	{
		// Set Image
		document.getElementById("arrow").setAttribute("src", "http://www.donaldevans.com/images/right_arrow.png");
		// Set the aria-label
		document.getElementById("myButton").setAttribute("aria-label","Drawer Collapsed. Click to expand.");
		// Set the aria-expanded
		document.getElementById("ARIA_content").setAttribute("aria-expanded","false");
		// Set the Class to hidden
		document.getElementById("ARIA_content").setAttribute("aria-hidden","true");
		// Move Focus back to button
		document.getElementById("myButton").focus();
	} else {
	// Set Image
		document.getElementById("arrow").setAttribute("src","http://www.donaldevans.com/images/down_arrow.jpg");
		// Set the aria-label
		document.getElementById("myButton").setAttribute("aria-label","Drawer Expanded.  Click to collapse.");
		// Set the aria-expanded
		document.getElementById("ARIA_content").setAttribute("aria-expanded" , "true");
		// Set the Class to hidden
		document.getElementById("ARIA_content").setAttribute("aria-hidden","false");
		// Move Focus to content
		document.getElementById("hTag").focus();
	}
}

<span>
<button id="myButton" 
  aria-label="Drawer Expanded.  Click to collapse." 
  aria-labelledby="myButton"
  onClick="ARIA_Hidden_Toggle();" 
  role="button">Drawer </button>
  <img id="arrow"  src="http://www.donaldevans.com/images/right_arrow.png" width="10" alt="">
</span>
<hr/>
<div id="ARIA_content" 
  name="ARIA_content" 
  aria-hidden="true" 
  role="region" 
  aria-expanded="false" 
  tabIndex="-1">
<h2 id="hTag" tabIndex="-1">Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

Works With

aria-hidden
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 4 JAWS 12 No

Standards:

  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Comments are closed.