Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

No prefers-reduced-motion CSS support

Open
  • Is something wrong?
#98 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
48/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Stale
Tech stack
css, jekyll
Domain
accessibility, frontend

Research direction

Start with the listed transitions in assets/css/custom.css and the inline style block in _pages/feedback.md. Compare the existing styles with the proposed prefers-reduced-motion override and confirm that both stylesheets cover the affected animations and transitions. Done means reduced-motion users no longer receive the non-essential motion on either page.

Written by the indexing model from the issue text.

Description

accessibility

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:

@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 <style> block.

WCAG criterion

2.3.3 Animation from Interactions (Level AAA) — while AAA, this is a straightforward improvement for users with vestibular disorders.

Dominant language
HTML
Stars
1
Forks
6
Avg merge
1d 4h
Merged PRs (30d)
6

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CivicTechTO/civictech.ca

All issues in CivicTechTO/civictech.ca

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.