Перейти к содержимому

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.