E-mail List Archives
Thread: Opacity Zero and Screen Readers
Number of posts in this thread: 6 (In chronological order)
From: Lovely, Brian (CONT)
Date: Mon, Jul 18 2016 1:55PM
Subject: Opacity Zero and Screen Readers
No previous message | Next message →
If an element containing text has its opacity CSS property set to "0", will it's text be read out by a screen reader? Not sure if it matters, but the element with the opacity set is a div, and the text is contained in a heading element that is a child of that div.
Brian Lovely
Digital Accessibility Team
= EMAIL ADDRESS REMOVED =
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Birkir R. Gunnarsson
Date: Tue, Jul 19 2016 8:47AM
Subject: Re: Opacity Zero and Screen Readers
← Previous message | Next message →
Screen readers are equal opportunity announcers when it comes to opacity.
If you need to hide the opacity 0 content from screen readers you need
to use aria-hidden="true" on the container element.
display: none/visibility hidden will hide your content from screen readers.
On 7/18/16, Lovely, Brian (CONT) < = EMAIL ADDRESS REMOVED = > wrote:
> If an element containing text has its opacity CSS property set to "0", will
> it's text be read out by a screen reader? Not sure if it matters, but the
> element with the opacity set is a div, and the text is contained in a
> heading element that is a child of that div.
>
>
>
> Brian Lovely
> Digital Accessibility Team
> = EMAIL ADDRESS REMOVED =
>
>
>
> >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >
--
Work hard. Have fun. Make history.
From: Lovely, Brian (CONT)
Date: Tue, Jul 19 2016 9:12AM
Subject: Re: Opacity Zero and Screen Readers
← Previous message | Next message →
So the answer is "yes"? During a previous assessment, I had an element that the developer had really, really tried to hide. It was set to visibility:hidden, opacity:0, and was positioned offscreen. I set visibility to visible in order to see what the screen reader would announce when it was able to detect the element. I didn't hear anything, but then set the opacity to 1 and was then able to hear the element announced. As this was not a very exhaustive test, I wasn't sure if this was just a fluke situation or not.
When I asked the question of the group, I was trying to test a carousel that very zealous developers had set all kinds of aria roles and properties on. The carousel ran automatically, and it was very difficult to try setting and/or resetting various properties, so I reached out for that particular answer.
From: Patrick H. Lauke
Date: Tue, Jul 19 2016 9:26AM
Subject: Re: Opacity Zero and Screen Readers
← Previous message | Next message →
On 19/07/2016 16:12, Lovely, Brian (CONT) wrote:
> So the answer is "yes"? During a previous assessment, I had an
> element that the developer had really, really tried to hide. It was
> set to visibility:hidden, opacity:0, and was positioned offscreen. I
> set visibility to visible in order to see what the screen reader
> would announce when it was able to detect the element. I didn't hear
> anything, but then set the opacity to 1 and was then able to hear the
> element announced. As this was not a very exhaustive test, I wasn't
> sure if this was just a fluke situation or not.
The actual behavior is inconsistent across browser/AT combinations. I
seem to remember that opacity usually makes no difference, but that
visibility:hidden in most cases hides the content. But it's not
something that should be relied on (or at least something that should be
thoroughly tested across multiple browser/AT combinations before being
used in production).
See http://juicystudio.com/article/screen-readers-display-none.php,
http://webaim.org/techniques/css/invisiblecontent/,
https://www.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Lovely, Brian (CONT)
Date: Tue, Jul 19 2016 9:31AM
Subject: Re: Opacity Zero and Screen Readers
← Previous message | Next message →
Thanks, Patrick!
From: Birkir R. Gunnarsson
Date: Tue, Jul 19 2016 11:49AM
Subject: Re: Opacity Zero and Screen Readers
← Previous message | No next message
You are pretty safe using display: none; to hide content from all users.
I would always go with that, unless you have specific reasons for
using visibility: hidden. Then I would supplement that with
aria-hidden="true".
On 7/19/16, Lovely, Brian (CONT) < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks, Patrick!
>
>