E-mail List Archives
Thread: Proper way to hide content from a screen reader
Number of posts in this thread: 11 (In chronological order)
From: D A
Date: Mon, Nov 16 2009 3:25PM
Subject: Proper way to hide content from a screen reader
No previous message | Next message →
Working on a web application where we're going to have a session
time-out message. I'd like to 'store' the HTML for this message on the
page (below the footer). I'll set it to display: none so it doesn't
appear until we need it.
IIRC, display: none usually hides the content from screen readers as
well. Usually a bad thing, but in this case is what I'm after. How
reliable is display: none for hiding from a screen reader?
Is there a more proper way to do that?
-Darrel
From: Jared Smith
Date: Mon, Nov 16 2009 3:50PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
On Mon, Nov 16, 2009 at 3:22 PM, D A wrote:
> How reliable is display: none for hiding from a screen reader?
It's pretty reliable. There are a few, very rare instances where
display:none alone won't hide content
(http://juicystudio.com/article/screen-readers-display-none.php), but
using display:none and visibility:hidden together should certainly do
the trick.
> Is there a more proper way to do that?
Because the content is presumably revealed with javascript, you might
consider generating the content and injecting it into the document
entirely with javascript. A problem with display:none is that it will
be visible if the user has styles disabled. Seeing a time-out message
in this case could be quite confusing. Writing the content with
javascript at the appropriate time and injecting it into the document
would alleviate this potential issue.
Jared Smith
WebAIM
From: ckrugman@sbcglobal.net
Date: Mon, Nov 16 2009 3:55PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
If the item is not hidden from sighted viewers of the page why would you
want to hide it from screen reader users?
Chuck
----- Original Message -----
From: "D A" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, November 16, 2009 2:22 PM
Subject: [WebAIM] Proper way to hide content from a screen reader
> Working on a web application where we're going to have a session
> time-out message. I'd like to 'store' the HTML for this message on the
> page (below the footer). I'll set it to display: none so it doesn't
> appear until we need it.
>
> IIRC, display: none usually hides the content from screen readers as
> well. Usually a bad thing, but in this case is what I'm after. How
> reliable is display: none for hiding from a screen reader?
>
> Is there a more proper way to do that?
>
> -Darrel
>
From: Moore,Michael (DARS)
Date: Tue, Nov 17 2009 7:35AM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
Jared:
"It's pretty reliable. There are a few, very rare instances where
display:none alone won't hide content
(http://juicystudio.com/article/screen-readers-display-none.php), but
using display:none and visibility:hidden together should certainly do
the trick."
"Because the content is presumably revealed with javascript, you might
consider generating the content and injecting it into the document
entirely with javascript. A problem with display:none is that it will
be visible if the user has styles disabled. Seeing a time-out message
in this case could be quite confusing. Writing the content with
javascript at the appropriate time and injecting it into the document
would alleviate this potential issue."
Mike:
Even better consider using JS to create a dialog box that allows the user to extend the time. The advantage of this type of implementation is that focus will be placed on the box immediately. When timeout messages are displayed within the content, they are easily missed and a user who needs more time may not find the message before it is too late. This a particularly a problem for screen magnifier users, and screen reader users who only see a small portion of the screen at a time.
Mike Moore
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Monday, November 16, 2009 4:43 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Proper way to hide content from a screen reader
On Mon, Nov 16, 2009 at 3:22 PM, D A wrote:
> How reliable is display: none for hiding from a screen reader?
From: D A
Date: Tue, Nov 17 2009 9:35AM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
>> Is there a more proper way to do that?
>
> Because the content is presumably revealed with javascript, you might
> consider generating the content and injecting it into the document
> entirely with javascript.
@jared:
That does seem like the more fool-proof way. I could easily insert the
content via an ajax call if need be.
> If the item is not hidden from sighted viewers of the page why would you
> want to hide it from screen reader users?
@chuck:
It is hidden from sighted viewers.
> Even better consider using JS to create a dialog box that allows the user to extend the time.
@mike:
As it is now, the DIV with display:none is just a holder of the
content. It's content I figured was part of the page, but isn't
relevant until a certain period of time elapses. When it's time to
trigger the actual timer visually (and hopefully aurally), we'll be
launching a modal window, visually screening out the application, and
then placing the timeout message in the modal window. I do (likely)
need to ensure that when displayed, this takes focus.
Thanks everyone!
-Darrel
From: Hoffman, Allen
Date: Tue, Nov 17 2009 12:50PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
Put the content in Adobe Air and it won't be seen by the screen reader. Ha ha. A joke only.
-----Original Message-----
From: D A [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, November 17, 2009 11:36 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Proper way to hide content from a screen reader
>> Is there a more proper way to do that?
>
> Because the content is presumably revealed with javascript, you might
> consider generating the content and injecting it into the document
> entirely with javascript.
@jared:
That does seem like the more fool-proof way. I could easily insert the
content via an ajax call if need be.
> If the item is not hidden from sighted viewers of the page why would you
> want to hide it from screen reader users?
@chuck:
It is hidden from sighted viewers.
> Even better consider using JS to create a dialog box that allows the user to extend the time.
@mike:
As it is now, the DIV with display:none is just a holder of the
content. It's content I figured was part of the page, but isn't
relevant until a certain period of time elapses. When it's time to
trigger the actual timer visually (and hopefully aurally), we'll be
launching a modal window, visually screening out the application, and
then placing the timeout message in the modal window. I do (likely)
need to ensure that when displayed, this takes focus.
Thanks everyone!
-Darrel
From: Andrew Kirkpatrick
Date: Tue, Nov 17 2009 1:05PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
Put the content in Adobe Air and it won't be seen by the screen reader. Ha ha. A joke only.
And a timely joke at that - today we released the public beta preview of AIR 2.0 which introduces support for assistive technologies via MSAA. You can try it out at http://labs.adobe.com/downloads/air2.html.
AWK
-----Original Message-----
From: D A [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, November 17, 2009 11:36 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Proper way to hide content from a screen reader
>> Is there a more proper way to do that?
>
> Because the content is presumably revealed with javascript, you might
> consider generating the content and injecting it into the document
> entirely with javascript.
@jared:
That does seem like the more fool-proof way. I could easily insert the
content via an ajax call if need be.
> If the item is not hidden from sighted viewers of the page why would you
> want to hide it from screen reader users?
@chuck:
It is hidden from sighted viewers.
> Even better consider using JS to create a dialog box that allows the user to extend the time.
@mike:
As it is now, the DIV with display:none is just a holder of the
content. It's content I figured was part of the page, but isn't
relevant until a certain period of time elapses. When it's time to
trigger the actual timer visually (and hopefully aurally), we'll be
launching a modal window, visually screening out the application, and
then placing the timeout message in the modal window. I do (likely)
need to ensure that when displayed, this takes focus.
Thanks everyone!
-Darrel
From: Al Sparber
Date: Tue, Nov 17 2009 1:40PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
From: "Andrew Kirkpatrick" < = EMAIL ADDRESS REMOVED = >
> Put the content in Adobe Air and it won't be seen by the screen reader.
> Ha ha. A joke only.
>
> And a timely joke at that - today we released the public beta preview of
> AIR 2.0 which introduces support for assistive technologies via MSAA. You
> can try it out at http://labs.adobe.com/downloads/air2.html.
Does this mean that Air components in CS5 (like Extension Manager) will
become usable and not violate basic UI conventions?
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/apm
An Accessible & Elegant Accordion
From: Bevi Chagnon | PubCom
Date: Tue, Nov 17 2009 1:55PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
Al Wrote:
<< Does this mean that Air components in CS5 (like Extension Manager) will
become usable and not violate basic UI conventions? >>
Oooo, CS5.
Ah yes, my child. All our problems will be solved with CS5. And Windows 7.
And Mac OS Snow Leopard.
And to make your life even more pleasurable, I have a bridge for sale in
Brooklyn.
<grin>
--Bevi Chagnon
From: Geof Collis
Date: Tue, Nov 17 2009 3:45PM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | Next message →
>With the problems JavaScript can cause and given some have it turned
>off, why wouldn't you use some other language like PHP?
>
>cheers
>
>Geof
Editor
Accessibility News
www.accessibilitynews.ca
Accessibility News International
www.accessibilitynewsinternational.com
From: D A
Date: Wed, Nov 18 2009 8:35AM
Subject: Re: Proper way to hide content from a screen reader
← Previous message | No next message
>>With the problems JavaScript can cause and given some have it turned
>>off, why wouldn't you use some other language like PHP?
Geof:
This application is entirely dependent on javascript. I'm not under
the illusion that this will be the ultimate in accessibility, but I'm
trying to do what I can to keep it going in that direction.
That said, in the case of monitoring a session timeout, there really
is no option other than javascript, since there's no way for the
server to ping the client.
And for everyone else, I do apologize. I did not mean for this to turn
into a harsh reminder dealing with Adobe's stuff. ;o)
(And no offense to Andrew, I know he has a thankless job being in
here! Thanks for putting up with us, Andrew!)
-Darrel