27

After browsing a number of Google and other SO articles, I've decided to ask my question plainly in hopes of a simple, direct answer.

To add one further step to the discussion on Does opacity:0 have exactly the same effect as visibility:hidden: I understand that display:none and visibility:hidden hide elements from screenreaders and the like, but what about opacity:0?

The table in one of the answers to the linked question notes that opacity participates in taborder, so does that necessarily mean it will be mapped to the accessibility API?

Setting a giant negative text-indent is typically offered as an alternative to display: none and visibility: hidden for dropdown menus, but I'd like to fade my menus in and out without JavaScript, while making sure I don't hide them from screen readers.

Community
  • 1
  • 1
Greg Perham
  • 1,835
  • 1
  • 17
  • 26

3 Answers3

13

While this is an older question, it was one of the first that surfaced in a Google search, so I wanted to chime in.

As of April 2017, the ChromeVox screen reader does not read content that is set to opacity 0.

Specifically, ChromeVox won't read text that has been visually hidden with opacity set to zero, unless the element is labeled by visually available text.

For example:

<!-- will not be read -->
<a href="#!" style="opacity: 0;">not read</a>

<!-- WILL be read -->
<a href="#!" style="opacity: 0.001;">is read</a>

<!-- span text will not be read -->
<a href="#!">
  Read More
  <span style="opacity: 0;">
    this will not be read
  </span>
</a>

<!-- 
  button text will not be read, 
  but aria-labelledby text will be read on button focus 
-->
<span id="test">button label</span>
<button type="button" aria-labelledby="test" style="opacity: 0;">
  This text will not be read
</button>
scottohara
  • 727
  • 4
  • 11
  • 1
    when I try this: `opacity: 0.001` is fully visible in Firefox 88.0.1. `opacity: 0.01` is almost invisible. – kca May 20 '21 at 07:53
  • Would love an update on how the most popular screenreader agents handle `opacity`/`visibility` now. – Jacob Ford Jan 11 '22 at 04:36
3

opacity: 0; won't hide content from screen readers, though it'll hide content from sighted users and partially sighted users.
It's like displaying a white text on a white background (or transparent, you get the idea).
It'll be mapped to the accessibility API, you should still see the pointer changing above links, edit: you can still select text /edit, and somebody should test to see if, when tabulating links and form elements, the default dotted outline will display as usual or will be transparent. Edit: the latter, just tested with Firebug on this page.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • The outline is rendered as part of the visual object itself (the `outline` property), despite not affecting box dimensions, so it will participate in the object's alpha-compositing as an effect of `opacity`. Hence what you see when testing with Firebug. – BoltClock Jan 29 '12 at 21:44
  • @Felipe This is the answer I was hoping for. :) Could you add a link to some reference or explain your confidence? – Greg Perham Jan 30 '12 at 17:28
  • This was a fantastic question. I've looked around, but I don't see any sources specifically stating that opacity affects screen readers from doing their job. It just seems to make sense, though. Imagine the opacity value was 50 instead of 0; the content is still there, and still takes up space on the page. I can't see how going down to 0 would trigger any different behavior. If screen readers are modifying their behavior for that edge case, I'd argue the developers had way too much time on their hands... – Jonah Bishop Jan 31 '12 at 00:57
  • Jonah—what you say makes sense, but at 0% opacity, it is hidden, just like an element at 0px height is hidden, but at height: 1px is still 'visible.' Screen readers skip elements with 0 height, so I wonder if they skip 0 opacity similarly. It is surprising that there isn't a direct answer to this question, huh? Maybe I can submit a question on web standards sherpa. They seem to discuss this sort of thing every now and then… – Greg Perham Feb 10 '12 at 21:39
0

How does CSS opacity affect accessibility?

It affects a11y in terms of contrast, too. WCAG2 wants a contrast ratio of at least 4.5.

To see why opacity can affects contrast, suppose you have a grey square - say (127, 127, 127) - on a black background - (0, 0, 0).

The contrast ratio of (0,0,0) and (127,127,127) is about 5.2.

If you perform alpha mixing of the foreground and background like this:

out[i] = (1-a)*bg[i] + a*fg[i]

you get the new RGB values (63,63,63).

But the contrast ratio of (63,63,63) and (0, 0, 0) is about 2.6, which is less than the required 4.5.

While the contrast ratio seems mysterious, it's actually just two esoteric definitions chained together. There are plenty of reference implementations for you to follow online, here is one picked totally randomly:

https://github.com/angstyloop/contrast-ratio

angstyloop
  • 117
  • 6