E-mail List Archives
Thread: New Post: How do I show hidden content?
Number of posts in this thread: 3 (In chronological order)
From: Kim Schmitz
Date: Thu, Jan 26 2012 11:21AM
Subject: New Post: How do I show hidden content?
No previous message | Next message →
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
From: Donald Evans
Date: Thu, Jan 26 2012 11:45AM
Subject: Re: New Post: How do I show hidden content?
← Previous message | Next message →
This may help:
http://websiteaccessibility.donaldevans.com/?p=149
On Thu, Jan 26, 2012 at 1:24 PM, Kim Schmitz < = EMAIL ADDRESS REMOVED = >wrote:
> 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
>
From: Heidi Jungel
Date: Thu, Jan 26 2012 12:24PM
Subject: Re: New Post: How do I show hidden content?
← Previous message | No next message
I tend to use CSS to push it off the page so that it is hidden to the
visual user, but the screen reader will often pick this up. Below is a
link that can provide some CSS options for you:
http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-
content