How does CSS opacity affect accessibility?

Question

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 dis

Answer 1

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>

Answer 2

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.