skills.rest
pedropenha
pedropenhaCOMMUNITY
Explore all skills by this author →
GitHub

web-a11y-navigation

Implements accessible navigation with landmarks, skip links, breadcrumbs, and current-page state.

Updated Sep 8, 2026
Search Tags:#accessibility#a11y#screen reader#navigation#aria#landmarks#skip links
One-click install
npx skills add https://github.com/pedropenha/project-skills --skill web-a11y-navigation-pedropenha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-a11y-navigation
Source: https://github.com/pedropenha/project-skills/tree/main/.agents/skills/web-a11y-navigation
Command: npx skills add https://github.com/pedropenha/project-skills --skill web-a11y-navigation-pedropenha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web navigation often fails keyboard and screen reader users because landmarks, headings, and current-page indicators are missing or misused. This Skill provides concrete rules and a checklist for building navigation that assistive technologies can interpret correctly. ## Core Features & Use Cases - Landmark and Heading Structure: Defines how to label repeated landmarks uniquely and expose information hierarchy through headings. - Navigation Patterns: Covers skip links, breadcrumbs with list semantics, disclosure navigation with buttons and links, and current-page state that does not rely on color alone. - ARIA Guidance: Clarifies when not to use ARIA menu roles for ordinary site navigation. - Use Case: When implementing a site header with a responsive nav bar, apply this Skill to add a skip link, mark the current page semantically, and keep keyboard and screen reader flow intact on mobile. ## Quick Start Review my header and sidebar markup and apply the web accessibility navigation rules to fix landmarks, skip links, and current-page indication.

Frequently Asked Questions about web-a11y-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make website navigation accessible for screen readers?▼

Use landmarks to communicate page regions and label repeated landmarks uniquely. Add skip links where repeated content creates friction, mark the current page semantically, and keep keyboard and screen reader flow intact in responsive layouts.

How to build an accessible breadcrumb navigation?▼

Wrap breadcrumbs in a labeled nav element with list semantics so count and structure aid orientation. Indicate the current item semantically and visually, and ensure the current state does not rely on color alone.

Should I use ARIA menu roles for site navigation?▼

No, ARIA menu roles should not be used for ordinary site navigation. Menus imply application-style keyboard behavior that confuses users on standard websites; use regular nav landmarks and links instead.

When should I use a button versus a link in navigation?▼

In disclosure navigation, use buttons for toggles that expand or collapse content and links for actual navigation to pages. Mixing these roles breaks keyboard and screen reader expectations.

Why do multiple landmarks need unique labels?▼

Screen reader users navigate by landmark lists, so repeated landmarks like multiple nav elements are indistinguishable without labels. Unique accessible names let users jump directly to the intended region.

Related Skills

Explore More Software Engineering Skills→
borderuxborderux
1

recursica-skill-breadcrumb

Guides correct implementation of Recursica breadcrumb trails with accessibility and hierarchy rules.

Official
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
BenjamindaosonBenjamindaoson

fixing-accessibility

Audit and fix HTML accessibility issues for WCAG compliance.

Community
Intermediate
dwhobandwhoban

kumo-ui

Provides a React component library for building Cloudflare Kumo user interfaces.

Community
Intermediate