«
»

CSS Hide and Show

May 20th, 2011 at 3:26 pm

The following example uses various CSS styles, dynamic Javascript and ARIA roles/properties to create an accessible accordion type hide/show area.

  • CSS hidden is used to hide the content.
  • CSS not_hidden is used to show the content.
  • CSS focus is used to highlight the current focused control with a yellow background.
  • Depending on the current state of the content (either hidden or not hidden) the Javascript setattribute method is used to:
    • dynamically change the arrow image from pointing down to right.
    • dynamically change the aria-expanded property to indicate the state of the accordion
    • dynamically change the aria-label property to indicate the state of the accordion, either open or closed (Just in case aria-expanded property is not supported in the current browser/AT).
    • dynamically change the class from hidden to not_hidden in order to hide and show the content.
    • dynamically move focus to an H tag inside the newly exposed content, causing the screen reader to speak and notify the user that content on the page has changed.
  • Other ARIA roles/properties used:
    • ARIA role is set to region.
    • ARIA role is set to button
    • Aria-labelledby is also used

Example 1:



Code


<style type="text/css">
.hidden {
    display: none;
    visibility: hidden;
}
.not_hidden {
	display: block;
	visibility: true;
}
:focus { 
	background-color:yellow;
}
</style>

<script language="JavaScript">
function ARIA_HideShow(e) {
	// Get the current class either hidden or not_hidden
	var getvalue=document.getElementById("ARIA_content").getAttribute("class");
	if (getvalue=="not_hidden")
	{
		// 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("class","hidden");
		// 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("class","not_hidden");
		// Move Focus to content
		document.getElementById("hTag").focus();
	}
}
</script>
<span>
<button id="myButton" 
    aria-label="Drawer Expanded.  Click to collapse." 
    aria-labelledby="myButton" 	
    onClick="ARIA_HideShow(event);" role="button">
      Drawer 
</button>
<img id="arrow" src="http://www.donaldevans.com/images/down_arrow.jpg" width="10" alt="">
</span>
<hr/>
<div id="ARIA_content" 
    class="hidden" 
    role="region" 
    aria-exanded="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>
<hr/>

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)

In Accessibility, ARIA, Best Practices, WCAG. Both comments and pings are currently closed.

Comments are closed.