Will the CSS property "opacity" only hide content from screen readers if exactly 0?

Question

I need to know if I can use opacity: 0.01 for hiding my content visually. I need to fade in content on scroll, but if I add opacity: 0 I am not sure how this effects screen readers and SEO. The animation works fine with 0.01 as value.

Do any of you know the answer to this? Thanks

Answer 1

In general, CSS does not affect screen readers. The only exceptions are:

• display:none
• visibility:hidden
• :before and :after pseudo elements
• (edit) height:0 or width:0 (some screen reader / browser combinations ignore elements with a 0 size, but not all of them)

The first two will hide the elements from the screen reader. The last one can potentially add text to the "accessible name". See step 2.F.ii in "Accessible Name and Description Computation 1.1".

Opacity is ignored by screen readers. It's only changing the appearance of the element and does not remove it from the DOM. You can set it to 0 and a screen reader will still read the element.

Most Screen Readers will skip content with opacity: 0

I'm not sure where you got that from. I have never seen an element with opacity:0 skipped by a screen reader.