seo Question posted in
Some basic information to get you started with this can be found here.

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

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

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Most Screen Readers will skip content with opacity: 0 If you want your site to be accessible I can't use this CSS property to load my content in. This is why I was thinking that maybe opacity: 0.01would work. But I can't find any documentation about this anywhere. Thanks for the answers regarding SEO.


  2. 0

    When you put the property

    opacity:0

    , all that happens is that it is still there, meaning in code, in reality, it still takes the space it is supposed to, it can be used to click stuff, all hover effects will work fine, etc. Hence, it does not affect any differently on SEO or screen readers.

    Visibility:hidden

    is a little different than opacity because it does not take click events. Display: none completely deletes it from the code(not the DOM though), and will affect SEO and screen readers, but that is blackhat SEO techniques which are constantly updated by Google,Bing etc to catch. Hence, display property may or may not affect the SEO, nevertheless it is not recommended at all to use such techniques. You can give an element

    opacity:0.01

    and then make it back to 1 with no problems at all.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    If I add opacity: 0 I am not sure how this effects screen readers and SEO.

    By adding opacity: 0.01 (or 0) without aria-hidden="true", your page will fail 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

    So there is no answer for your needs. If you chose to hide from screen, you must hide it from screenreaders.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search