WebAIM - Web Accessibility In Mind

E-mail List Archives

New Post: How do I show hidden content?

for

From: Kim Schmitz
Date: Jan 26, 2012 11:21AM

Hello WebAim users,

I have never posted to this list so please forgive me if this is an old and
well know question with a well known answer.

Here is the problem I am having:

I have a link that displays hidden content above the link. I can't figure
out how to make sure screen reader users are aware of this newly presented
content. I'm using NVDA and when I click on the link, nothing happens.
Below is an example of how we are presenting this content:

<script type="text/javascript">
function showTerms(element) {
document.getElementById(element.getAttribute("rel")).style.display
= "block";
}
</script>
</head>
<body>
<p>Some Content Above</p>
<div id="terms" style="display:none;">Terms and Conditions Content</div>
<p>Some Content Inbetween</p>
<a href="javascript:void(0)" rel="terms" onclick="showTerms(this);">Terms
and Conditions</a>
<p>Some Content Below</p>

I appreciate any and all help.

Thank you.

Cheers,
Kim