Logo scrolling accessibility

[murrayinman]

Greetings! I wanted to suggest a change to the logo scrolling sections of the index.js page. While investigating this tool, I saw the auto-scrolling section for the logos for the companies using Styled Components. I didn't keep the section in the viewport for very long because it quickly made me ill. Over an hour later, my head hurts and I feel the sickening vertigo.

I rarely have issues with motion and thus rather not set my OS to prefers-reduced-motionwhich could remove all animated experiences. I told chrome to emulate theprefers-reduced-motion` CSS media feature and the page respected it and stopped the scrolling. (WIN!) However, it still fails WCAG 2.1 Criterion 2.2.2: Pause, Stop, Hide.

I suggest adding a way for the user to stop the scrolling action. This will have the additional benefit to users that need extra time to understand what the logo is before it scrolls away.

If nothing else, slowing the animation down to 120s or more would really help.

Thanks! Murray

[erickrod54]

Hello Mr @murrayinman, the issue to make reduced-motion can be made modifying: ( this is directlly in the component, component > UsersLogos)

const CompanyLogo = styled.span position: relative; height: ${(p) => p.height || '2rem'}; margin: 0 1rem; bottom: ${(p) => p.bottom || 0}; opacity: 0.8; filter: brightness(0) invert(.5); /*this prop that currentlly is set as '1' **/ transition: opacity 125ms ease-in-out;

I think also the transition can be set lower, in terms of accesibility is a very important matter for the motion-sickness condition as you pointed :)