Repository navigation
fix(a11y): add aria-labelledby to section panels in built output - #14
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 page() function in build.mjs was missing aria-labelledby attributes on all four <section> elements, and the "Reading list" <h2> was also missing its id. Screen readers would encounter four unlabeled section landmarks with no way to distinguish them. The development reader (src/reader/reader.html) already has the correct attributes; this aligns the build output to match. Advances issue #5. Adds a smoke test that runs the build and asserts all five attributes are present so this class of regression will be caught by CI.
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
The
page()function inscripts/build.mjswas missingaria-labelledbyattributes on all four<section>elements, and the "Reading list"<h2>was also missing itsid. Every built edition page therefore presented four unlabeled section landmarks to screen readers — they would be announced identically with no way to distinguish them.The development reader (
src/reader/reader.html) already has the correct markup. This change aligns the build output to match.Why it matters
When a page contains multiple
<section>elements, WCAG 2.1 §4.1.2 (Name, Role, Value) requires each landmark region to have an accessible name. Withoutaria-labelledby, a screen reader user navigating by landmarks hears "section … section … section … section" with no indication of which is which. Adding the labels restores the intended navigation structure.Advances issue #5 (accessibility — WCAG 2.1 AA conformance).
Changes
scripts/build.mjs— four one-line edits to thepage()template:aria-labelledby="arc-heading"to the arc section (which already hadid="arc-section")aria-labelledby="interests-heading"to the interests sectionaria-labelledby="search-heading"to the search sectionaria-labelledby="recommendations-heading"to the reading list section andid="recommendations-heading"to its<h2>scripts/smoke.mjs— new check (build.mjsgroup) that runs the build and asserts all five attributes appear in the output HTML, so this class of regression will be caught by CI going forward.Tests
npm testandnpm run buildboth pass cleanly.Generated by Claude Code