This Wiki page is edited by participants of the Protocols and Formats Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

ARIA/aria-owns-example

From Protocols and Formats Working Group Wiki
< ARIA
Revision as of 16:34, 23 March 2010 by Dbolter (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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>