a11y(baseof): add skip-to-content link and a <main> landmark#3336
Open
Vidminas wants to merge 1 commit into
Open
a11y(baseof): add skip-to-content link and a <main> landmark#3336Vidminas wants to merge 1 commit into
Vidminas wants to merge 1 commit into
Conversation
Keyboard and screen-reader users had no way to bypass the repeated header nav, and the content region was a bare `<div class="page-body">` with no landmark (WCAG 2.4.1). - Add a skip link as the first focusable element, visually hidden until focused (sr-only / focus:not-sr-only), targeting `#main-content`. - Promote the page-body wrapper from `<div>` to `<main id="main-content">`. - Add the `skip_to_main_content` string to i18n/en.yaml (other locales fall back to English until translated). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
✅ Deploy Preview for academic-demo canceled.
|
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.
Keyboard and screen-reader users had no way to bypass the repeated header nav, and the content region was a bare
<div class="page-body">with no landmark (WCAG 2.4.1).🚀 What type of change is this?
🎯 What is the purpose of this change?
Two related accessibility gaps in
baseof.html(WCAG 2.4.1 — Bypass Blocks):reach the content.
<main>landmark — the content region is a bare<div class="page-body">, so screenreaders can't jump to "main".
Fix.
<body>, visually hidden until focused(
sr-only→focus:not-sr-only+ a visible focused state), targeting#main-content.<div>to<main id="main-content">(keeps thepage-bodyclass, so styling is unchanged).
skip_to_main_contentstring toi18n/en.yaml; other locales fall back to English untiltranslated.
Verified on the
academic-cvstarter: the skip link is the first focusable element (before theheader in source order),
<main id="main-content">wraps the content, and thesr-onlyutilitiescompile. Tabbing from the top reveals the skip link, which jumps focus to the content.
📸 Screenshots or Screencast (if applicable)
Pressing Tab from the top of the page (academic-cv starter):
mainBefore, the first tab stop is the site logo — a keyboard/screen-reader user must then tab through
the entire nav to reach the content. After, the first tab stop is a "Skip to main content"
button that jumps straight to
<main>.ℹ️ Documentation Check
Nothing to configure — the skip link and
<main>landmark are automatic (no block/param/API), so there's no in-repo doc to change, and this repo has no accessibility/features page (user docs live on docs.hugoblox.com). Two follow-ups belong there, not in this PR:a skip-to-content link and a
<main>landmark. Could be included in Feature request (docs): add an "Accessibility" page documenting HugoBlox's built-in a11y features #3334skip_to_main_contentis added toi18n/en.yaml(the source locale),consistent with how the project handles new keys — other locales fall back to English until a
translator adds it (e.g.
award_level_selectedis likewise en-only today).📜 Contributor Agreement
Thank you for your contribution!