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.
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).
developer should respect
prefers-reduced-motionand 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?