2

WCAG 2.1 has some guidelines and success criteria on animation and I've been able to read some articles that mention parallax, but were not able to detect clear instructions on how to make the parallax effect accessible.

I can think about two solutions that can co-exist though, but am interested in potential other solutions as well.

  1. user should be able to turn off parallax (and all other animations that can cause problems) manually (like a checkbox / toggle visible before parallax events).

  2. developer should respect prefers-reduced-motion and turn off parallax (and all other animations that can cause problems).

The other concern is alternative text for parallax images. Let's assume they are not just decorative and add to the tone of the context - so they should have alternative text. These images are almost always background images of a container, so I was thinking at setting a role="image" and using aria-labelledby or just aria-label="" to include alternative text for assistive technology.

That should be good enough for assistive tech but I am not sure if search engines would detect such images and relate the provided alternative text to it. I was at least not able to find any guidance on the matter. As far as Google is concerned they would just have <img src="..." alt="" > for every picture (which is a bit of a problem if picture is decorative I think).

So - any experience with this A11y&SEO situation? Do you maybe have a example that is tested and verified with Google for example?

Improve this question
2
  • For SEO is your concern that your images might not get index and ranked in Google image search?
    – Stephen Ostermiller ♦
    Commented Mar 24, 2021 at 15:34
  • @StephenOstermiller - yes - I am - if I use them as background images (with CSS), and add role image and text alternative with ARIA - the images will be accessible to screen-readers for example, but I did not find any documentation on search engines in that case. Will Google for example index the background image and map it's accessible text to it?
    – Dag Eikesdal
    Commented Mar 25, 2021 at 19:08

1 Answer 1

Reset to default
1

Google image search only indexes images that use <img> tags with a src of the image URL or <a> tags with a href of the image URL. Images that are shown in the pages as background images won't get indexed.

Google says this in their images SEO best practices documentation:

Use semantic markup for images

Google parses the HTML of your pages to index images, but does not index CSS images.

Improve this answer
3
  • Thank you, I was afraid of that, yes. So this is basically saying that parallax website should serve normal <img ...> tags for the search engine to index.
    – Dag Eikesdal
    Commented Mar 26, 2021 at 9:09
  • If you want to be included in Google image search. On the other hand, it usually isn't a big loss if your images don't get indexed. Very few people click through to your site from image search. In my experience image search traffic converts at a very small fraction of web search traffic. It probably isn't worth the time and effort to get indexed in image search.
    – Stephen Ostermiller ♦
    Commented Mar 26, 2021 at 9:12
  • Good point. Our SEO agency was suggesting to move the images out of the background to be indexed although they are totally decorative. Therefore, from a11y perspective should not have alternative text at all (blank alt=""). So it is a bit unclear. But I will try to check how much traffic do we get from other images to have some numbers behind it... Thanks for info
    – Dag Eikesdal
    Commented Mar 26, 2021 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.