search

telus / tds-community

TELUS Design System Community Components
https://tds.telus.com/community/index.html
MIT License
28 stars 7 forks source link

Making Skeleton component A11y Friendly: increase colour contrast and reduced motion #338

Open saydex opened 4 years ago

saydex commented 4 years ago

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

  1. Change the colour to use Raven Grey

    Hex: #71757B
JS: colorGreyRaven

  2. 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

Screenshots

Screen Shot 2020-03-04 at 2 56 05 PM

varunj90 commented 4 years ago

Hey @saydex , great recommendations, you can submit a PR!