CivicTechTO / CivicTechTO/civictech.ca

No prefers-reduced-motion CSS support

Open
#98 0 comments 0 reactions 0 assignees View on GitHub
accessibility
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.