Repository navigation
fix(a11y): restore section landmarks and skip-link focus in built output - #22
Open
ashishbhateja wants to merge 1 commit into
Open
ashishbhateja wants to merge 1 commit into
ashishbhateja wants to merge 1 commit into
Conversation
The build.mjs page template was missing aria-labelledby on all four <section> elements, so the published edition exposed no navigable ARIA region landmarks — a screen reader sees undifferentiated content regions where reader.html correctly exposes four named landmarks. Also adds tabindex="-1" to <main id="main"> in both reader.html and the build template so the skip-link reliably moves keyboard focus (not just the viewport) on all current browsers — the standard technique from WCAG SCR28 / WebAIM. Advances issue #5 (Accessibility).
This branch has not been deployed
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
2 participants
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.
What this changes
Two small, concrete accessibility fixes affecting the published edition:
ARIA region landmarks in built output —
build.mjs's page template was missingaria-labelledbyon all four<section>elements. Without an accessible name, a<section>is not exposed as a landmark by browsers; screen readers navigating by landmark (F6/ rotor) would find no named regions in the published edition, even thoughreader.html(the dev-server version) correctly exposes four: The 2026 arc, Your interests, Search this edition, and Reading list. The fix adds the matchingaria-labelledbyattributes to each section in the template, and adds the missingid="recommendations-heading"to the Reading list heading.Skip-link focus —
<main id="main">lackedtabindex="-1"in bothreader.htmland the build template. Without it, activating the skip link moves the viewport but leaves keyboard focus behind the link in browsers that don't natively focus non-interactive elements (the documented behaviour in WCAG technique SCR28 / WebAIM skip-nav guide). Addingtabindex="-1"makes focus land on<main>without adding a visible ring (:focus-visibleis not triggered for programmatic focus).Why
Closes #5 (partial — landmark and skip-link items from the accessibility checklist).
Checklist
node scripts/smoke.mjspasses (19/19)Generated by Claude Code