Outdated Content!

The Protocols and Formats Working Group is no longer chartered to operate. Its work will continue in two new Working Groups:

  • https://www.w3.org/WAI/APA/ Accessible Platform Architectures, to review specifications, develop technical support materials, collaborate with other Working Groups on technology accessibility, and coordinate harmonized accessibility strategies within W3C; and
  • https://www.w3.org/WAI/ARIA/ Accessible Rich Internet Applications, to continue development of the Accessible Rich Internet Applications (WAI-ARIA) suite of technologies and other technical specifications when needed to bridge known gaps.

Resources from the PFWG remain available to support long-term institutional memory, but this information is of historical value only.

This Wiki page was 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
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>
Retrieved from "https://www.w3.org/WAI/PF/wiki/index.php?title=ARIA/aria-owns-example&oldid=226"