Making Skeleton component A11y Friendly: increase colour contrast and reduced motion
saydex opened this issue · comments
Problem statement
As a user relying on accessible technology, I'd like to be able to see higher contrast and reduced motion on the loading screen using skeleton so I can properly interact with the site.
Recommendation
- Change the colour to use Raven Grey
Hex: #71757B
JS: colorGreyRaven
- Disable animation with media query
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
Meta
- TDS version (npm or DSM): Skeleton component Version: 3.0.1
- Willing to develop solution: Maybe
- Has workaround: No
- High impact: Medium
Screenshots
- Include any relevant screenshots
Hey @saydex , great recommendations, you can submit a PR!