fix: add header and main landmarks for accessibility - #193
Merged
Conversation
PageSpeed flags the site for missing HTML5 landmarks. The layout had no main landmark, and the "Fork me on GitHub" ribbon sat outside every landmark region. Wrap the slot in <main>, group the ribbon and navbar under <header>, and name the existing <nav>. No visual change: the ribbon is positioned against the viewport, so its place in the DOM only affects reading order, and Bootstrap's reboot already gives header/nav/main display: block. Co-Authored-By: Claude Opus 5 (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.
PageSpeed flags the site for missing HTML5 landmarks. The layout had no
mainlandmark at all, and the "Fork me on GitHub" ribbon link sat outside every landmark region.Changes in
src/layouts/Layout.astro(so they apply to all 10 pages):<slot />in<main>.<header>.<nav>witharia-label="Main".No visual change: the ribbon
<img>isposition: absoluteagainst the viewport (it has no positioned ancestor), so moving it in the DOM only affects reading order, and Bootstrap 4's reboot already setsheader,nav, andmaintodisplay: block, so the navbar's.menunegative margins behave as before.Verified with
npm run build: all 10 built pages contain the new landmarks.Not included: a skip-to-content link. It is the usual companion fix, but it adds a visible-on-focus element, so I left it out.
🤖 Generated with Claude Code