Improve prefers-reduced-motion UX
Nobody has claimed this yet.
- 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:
- 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.
- 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.
- 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
- Folder:
en-us/learn/accessibility - MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Accessibility
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/accessibility/index.md
- Last commit: https://github.com/mdn/content/commit/bb026bcb88b7f45374d602301b7b0db5a49ff303
- Document last modified: 2023-07-03T10:12:35.000Z
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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