CivicTechTO / CivicTechTO/civictech.ca
No prefers-reduced-motion CSS support
- Dominant language
- HTML
- Stars
- 1
- Forks
- 6
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 6
Description
## Summary
`assets/css/custom.css` and `_pages/feedback.md` contain several CSS transitions and animations but none are wrapped in a `prefers-reduced-motion` media query. Users who have requested reduced motion (via OS accessibility settings) will still see all animations play.
## Affected transitions
In `assets/css/custom.css`:
- `.badge` — `transition: background-color 0.2s ease, color 0.2s ease` (line 60)
- Card hover effects — `transition: box-shadow 0.2s ease` (line 121)
- Mobile menu slide — `transition: transform 0.3s ease` (line 382, 410)
In `_pages/feedback.md`:
- `.fb-conditional` show/hide — `transition: max-height 0.3s ease, opacity 0.25s ease` (line 190)
- `.fb-followup` show/hide — `transition: max-height 0.4s ease, opacity 0.3s ease` (line 227)
- Rating/pill button interactions — `transition: all 0.15s ease` (line 110, 162)
## Fix
Wrap all non-essential transitions in a reduced-motion override at the end of the stylesheet:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
```
This blanket approach is safe for this site since no animations convey essential information. Add it to the end of `assets/css/custom.css`. The feedback form styles in `feedback.md` should also get the same override in their inline `` block.
## WCAG criterion
2.3.3 Animation from Interactions (Level AAA) — while AAA, this is a straightforward improvement for users with vestibular disorders.
Contributor guide
Assessment
This issue has not been assessed yet.