ARIA/aria-owns-example

Code Example for aria-owns

In the following example, a javascripted link controls the exposition of informative text when the link is activated. Note that, unless the link is activated, the informative text remains hidden through the use of CSS. Note, as well, that focus management in this example is controlled by the javascript:

<style type="text/css"> 
body { font-family: Arial, sans-serif; }

div#zone { 
    padding: 1em;
    border: medium solid #ff9;
    background: #ffc;
}
div#hidden { 
    padding: 1em;
    border: thin solid #340449;
    background: #fff;
    font-weight: bold;
    display:none;
}
</style>
<script type="text/javascript"> 
function showDiv (which) {
	var elem = document.getElementById(which);
	elem.style.display = 'block';
	elem.focus();
}
function closeDiv (which) { 
	var elem = document.getElementById(which);
	elem.style.display = 'none';
	var origLinkId = which + 'Link';
	var origLink = document.getElementById(origLinkId);
	origLink.focus();
}	
</script>
</head>
<!-- ... -->
<body>
<!-- ... -->
<div id="zone"> 
<p>There is some text in this box, followed by a link:</p> 
<p><a id="exposeLink" aria-owns="hidden" href="javascript:showDiv('popup')"
>Toggle hidden text</a></p> 
<p>...followed by some more text, including <a 
href="http://www.w3.org">another link</a>...</p> 
<div id="hidden" tabindex="-1"> 
<p tabindex="0">This message is initially hidden, but its display can be 
toggled using the above link, and can be closed with the following link.</p> 
<p><a href="javascript:closeDiv('popup')">Close</a></p> 
</div><!-- end #hidden --> 
</div><!-- end #zone --> 
</body>
Last modified on 23 March 2010, at 16:34