Stats
Actions
Tags
From grimoire
Adds visible skip links, unique page titles, and descriptive link text so keyboard and screen reader users can bypass repeated navigation and jump directly to main content.
How this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:apply-skip-navigationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Add skip links, meaningful page titles, and descriptive link text so keyboard users can navigate efficiently without traversing repeated content on every page load.
Add skip links, meaningful page titles, and descriptive link text so keyboard users can navigate efficiently without traversing repeated content on every page load.
Adopted by: WCAG 2.1 SC 2.4.1 is Level A — required by all major accessibility
laws. WebAIM survey data shows 68% of screen reader users navigate by links and 34%
use "skip to content" links when available. The US Government's 18F accessibility
guide and UK Government Digital Service accessibility guidelines both mandate skip links
as baseline requirements.
Impact: A navigation menu with 15 links requires 15 Tab presses to skip on every
page load without a skip link. For a user who reads 200 pages per day (e.g., researchers,
power users), that is 3,000 unnecessary Tab presses. WebAIM found skip links reduce
keyboard navigation time to main content by 70–90% on typical government pages.
Why best: The alternative — relying on heading navigation (H key in screen
readers) — only works for screen reader users, not sighted keyboard users. A visible
skip link serves both groups. HTML5 landmark elements complement skip links but don't
replace them for sighted keyboard users who need a visible affordance.
Sources: W3C WCAG 2.1 SC 2.4.1, 2.4.2, 2.4.4 (2018); WebAIM Skip Navigation guide; US 18F Accessibility Guide
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- First element in body — becomes first Tab stop -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>...15 navigation links...</nav>
</header>
<main id="main-content" tabindex="-1">
<!-- tabindex="-1" allows programmatic focus on non-interactive element -->
<h1>Page Title</h1>
...
</main>
</body>
</html>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 9999;
text-decoration: none;
font-weight: bold;
}
.skip-link:focus {
top: 0; /* becomes visible only on keyboard focus */
}
The skip link must be visible when focused — a skip link hidden on focus fails WCAG 2.4.1. Some implementations keep it always visible; showing on focus is acceptable.
<title> on every page<!-- Wrong — identical titles on every page -->
<title>Acme Corp</title>
<!-- Right — page purpose first, site name second -->
<title>Order Confirmation — Acme Corp</title>
<title>Shopping Cart (3 items) — Acme Corp</title>
<title>404 Page Not Found — Acme Corp</title>
Screen readers announce the page title immediately on load. Format: [Page Purpose] — [Site Name].
In SPAs, update document.title on every route change.
<!-- Wrong — identical text, no context -->
<a href="/order/1">Read more</a>
<a href="/order/2">Read more</a>
<!-- Right — each link describes its destination -->
<a href="/order/1">View order #4821 (placed June 10)</a>
<a href="/order/2">View order #4820 (placed June 8)</a>
<!-- When visual context makes short text acceptable, use aria-label -->
<a href="/order/1" aria-label="View order #4821">Details</a>
Screen reader users often navigate a page by listing all links. A list of "read more × 20" is meaningless. Each link must describe its destination in isolation.
<nav aria-label="Skip links" class="skip-links">
<a href="#main-content">Skip to main content</a>
<a href="#search">Skip to search</a>
<a href="#site-footer">Skip to footer</a>
</nav>
For complex pages (e-commerce, dashboards), multiple skip targets reduce Tab distance to any major section.
1. Open page in Chrome/Firefox
2. Press Tab — skip link should become visible
3. Press Enter — page should scroll and focus should move to #main-content
4. Press Tab again — focus should continue from main content, not from nav
Verify tabindex="-1" is on the target element — without it, focus moves to the
anchor but subsequent Tab presses restart from the top of the DOM.
document.title per view.Skip link that is permanently hidden. display: none or visibility: hidden removes the skip link from the tab order entirely. Use off-screen positioning (top: -40px) that moves on-screen on :focus.
Linking to an anchor without tabindex="-1" on the target. Clicking the skip link scrolls to the target, but keyboard Tab focus continues from the last focusable element before the skip link — not from the target. Add tabindex="-1" to the target <main> or <div>.
"Click here" links. 34% of screen reader users navigate by links list. "Click here × 20" is indistinguishable. Every link text must identify its destination without surrounding context.
npx claudepluginhub jeffreytse/grimoire --plugin grimoireAudits and improves web accessibility following WCAG 2.2 guidelines, including POUR principles, alt text for images/icons, color contrast, and focus states. Use for a11y audits and compliance.
Web accessibility discipline: semantic HTML first, ARIA only when needed, keyboard access always. Invoke whenever task involves any interaction with accessible web content -- writing, reviewing, refactoring, or debugging HTML/CSS/JS for WCAG compliance, ARIA usage, keyboard navigation, focus management, screen reader support, or accessible component patterns.
Guides implementation of WCAG web accessibility (POUR principles) for UI components, forms, navigation, and multimedia. Use when designing, reviewing, or refactoring interfaces for compliance.