Repository navigation
a11y: search landmark, article aria-label, touch targets (#5) - #23
Open
ashishbhateja wants to merge 1 commit into
Open
ashishbhateja wants to merge 1 commit into
ashishbhateja wants to merge 1 commit into
Conversation
Three focused WCAG improvements to the reader:
- reader.html: add role="search" to the search section, making it a
proper ARIA landmark (screen reader users can jump to it with their
landmark shortcut rather than finding a generic region).
- reader.js: set aria-label on the <article> landmark to the article
title when opened, so the landmark menu names the open piece ("The
Mother on Equanimity" instead of just "Article"). Reset to "Article"
on close.
- reader.css: add padding-block: 0.55rem to .link buttons. With 1rem
text and 1.65 line-height the tap height was ~26 px; the padding
brings it to ~44 px, meeting WCAG 2.5.5 Touch Target (Level AA).
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
Three small, targeted WCAG improvements to the reader UI, all in
src/reader/:reader.html— addrole="search"to the search<section>.The section was already labelled via
aria-labelledby, making it a genericregionlandmark. Addingrole="search"promotes it to a proper ARIA search landmark, which screen-reader users can jump to directly with their landmark shortcut (e.g. D in NVDA, or the VoiceOver rotor).reader.js— set the<article>landmark'saria-labelto the open article's title.When an article opens, the static
aria-label="Article"was the only label visible to the landmark menu. The label is now set dynamically to the article title (e.g."The Mother on Equanimity") so screen-reader users see which piece is open without having to navigate into the element. It is reset to"Article"on close.reader.css— addpadding-block: 0.55remto.linkbuttons..linkis the style for every article-title button in the reading list. With the base font (1 rem, 1.65 line-height) the rendered height was ~26 px, well below the WCAG 2.5.5 Touch Target (AA) minimum of 44 px. The added vertical padding raises the tap target to ~44 px.Why
Closes part of #5 (Accessibility: ARIA landmarks, touch target sizes).
Checklist
node scripts/smoke.mjspasses (19/19)Generated by Claude Code