mdn / mdn/fred

Improve prefers-reduced-motion UX

Open
#986 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y
Dominant language
JavaScript
Stars
233
Forks
61
Avg merge
1d 1h
Merged PRs (30d)
82

Description

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Accessibility

What specific section or headline is this issue about?

The Layout

What information was incorrect, unhelpful, or incomplete?

It's not the info, it's the layout.

What did you expect to see?

In this day and age, I have to expect most web sites to be migraine triggers...

Do you have any supporting links, references, or citations?

No, unfortunately there isn't much about this, or even standard jargon for this.

Kapoor and Ciuffreda, "Vision Deficits Following Acquired Brain Injury," in Christian's Medical Management of Adults with Neurologic Disabilities, discuss difficulty with scrolling, with lights, supermarkets, etc. but don't go into the types of scrolling and layouts which worsen these.

Pavlou et al. mention it in their abstract, but don't go into detail: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5723388/

Do you have anything more you want to share?

From personal experience, in my case:

  1. smooth animation is worse, and stuttered is better, so I reduce motion, reduce the frame rate in Firefox, and much prefer to page down instead of scroll. But that isn't always enough, and isn't an option in some other browsers.
  2. sidebars often cause trouble, and the wider the sidebar, and the less the visual contrast with the content, and the less the separation from the content, the worse. This has a wide non-scrolling sidebar on each side, with the same color scheme as the center, and no continuous separator on either side. Even paging down can trigger migraines.
  3. animated sticky headers on other sites also cause trouble, while hovering nav elements, separately-scrolling modals, etc. cause far more trouble.
MDN metadata
Page report details

Contributor guide

Open the contributing guide

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.

Research direction

Start with files/en-us/learn/accessibility/index.md and compare the “The Layout” section with the linked accessibility page. Review the reported reduced-motion, sidebar, sticky-header, and scrolling concerns, then clarify the intended documentation change with maintainers; done means an agreed, reviewable update is reflected in that section.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown
Domain
accessibility, design, documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.