a11y: reduced-motion guards + visually-hidden headings for demo apps#6
Merged
Merged
Conversation
Addresses the two follow-ups from issue #5 (the June 2026 a11y pass). Visually-hidden <h1> per demo (14 canvas apps): adds a shared `.visually-hidden` utility to each app's style.css (inline <style> for basic/Basic, which has no stylesheet) and an <h1> as the first child of <main>, each prefaced with a short comment explaining its purpose. This completes the document heading structure for screen-reader navigation without any visual change. MorphPaths already has a visible <h1>, so it is left as-is. prefers-reduced-motion: freezes the autonomous, auto-playing animations (BouncyBall, GridFade, LeafFall, ZoomFade) — they render a single settled frame instead of starting the rAF loop, react live to the setting changing, and repaint the static frame on resize. SantaMorph's morph is mouse-driven, so only its self-pulsing text glow is held steady. The remaining morph demos (TriangleArtMorphTest, TriangleArtMorphTest2, MorphPaths, ReverseExplosion[2]) are mouse-driven direct manipulation and are intentionally left untouched. Verified in Chrome via Playwright: reduced motion freezes the loop while no-preference animates, and the hidden <h1> is exposed as a heading in the accessibility tree while clipped to 1x1px visually. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addresses the two follow-ups from #5 (the June 2026 a11y pass).
Changes
Visually-hidden
<h1>per demo (14 canvas apps) — adds a shared.visually-hiddenutility to each app'sstyle.css(inline<style>forbasic/Basic, which has no stylesheet) and an<h1>as the first child of<main>, each prefaced with a short comment explaining its purpose. Completes the document heading structure for screen-reader navigation with no visual change.MorphPathsalready has a visible<h1>, so it's left as-is.prefers-reduced-motion— freezes the autonomous, auto-playing demos (BouncyBall, GridFade, LeafFall, ZoomFade): they render a single settled frame instead of starting the rAF loop, react live to the setting changing, and repaint the static frame on resize.SantaMorph's morph is mouse-driven, so only its self-pulsing text glow is held steady. The remaining morph demos (TriangleArtMorphTest,TriangleArtMorphTest2,MorphPaths,ReverseExplosion/2) are mouse-driven direct manipulation and are intentionally left untouched.Verification
Driven in Chrome via Playwright: reduced motion freezes the loop while no-preference animates, and the hidden
<h1>is exposed as a heading in the accessibility tree while clipped to 1×1px visually. All modified JS passesnode --check.No
src/lib/changes → nodist/rebuild needed. Gallery andpreviews/are CI-regenerated on push.Closes #5
🤖 Generated with Claude Code