Your Scroll Animations Are Hiding Content From Screen Readers
Accessible Ariel
0:00 / 0:00
Your Scroll Animations Are Hiding Content From Screen Readers
15 просмотров · 12 дн. назад
Accessible Ariel
30 подписчиков
15 просмотров · 12 дн. назад
My homepage used WOW.js and Animate.css to animate sections as you scroll — and it was quietly hiding that content from screen reader and keyboard users. In this episode I rip it out and replace it with a tiny React component, a bit of CSS, and the IntersectionObserver API. Content is visible by default, motion is layered on top, and reduced-motion is respected.
Then I prove it works by tabbing through the page — every card stays reachable, in order, from the keyboard alone. Plus a bonus fix: three social links that had no accessible name, cleared with a visually-hidden text label instead of an aria-label.
This is part of my series rebuilding my 10-year-old personal site to be accessible, one fix at a time.
WCAG criteria covered:
2.1.1 Keyboard
2.4.4 Link Purpose (In Context)
1.3.1 Info and Relationships
Github
https://github.com/GuzmanAriel/access...
Subscribe to follow the rebuild.