← ClaudeAtlas

navigationlisted

Load this skill whenever the project contains navigation components — primary navigation menus, dropdown menus, mega menus, breadcrumbs, pagination, mobile hamburger menus, or in-page jump navigation. Under no circumstances create navigation without proper landmark roles, keyboard support, and accessible labels. Absolutely always wrap navigation in <nav> with a unique aria-label.
mgifford/accessibility-skills · ★ 15 · AI & Automation · score 77
Install: claude install-skill mgifford/accessibility-skills
# Navigation Accessibility Skill > **Canonical source**: `examples/NAVIGATION_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when creating or reviewing navigation patterns: primary nav, dropdowns, breadcrumbs, pagination, mobile menus, and in-page navigation. **Only load this skill if the project contains navigation components.** --- ## Core Mandate Navigation is how users find content. Screen reader users rely on landmark structure to orient themselves; keyboard users rely on predictable tab order and dropdown behaviour; voice control users rely on visible, correctly-labelled interactive elements; magnification users rely on nav that reflows without breaking. Get navigation wrong and everything downstream is harder. --- ## Severity Scale (this skill) | Level | Meaning | |---|---| | **Critical** | Navigation completely unreachable or creates a keyboard trap | | **Serious** | Dropdown only works on hover; `role="menu"` misused; no `aria-current` | | **Moderate** | Missing `aria-label` on secondary nav; breadcrumb not labelled | | **Minor** | Nav item count exceeds 7; inconsistent `aria-expanded` update | --- ## Assistive Technology Context Navigation behaves differently across AT. Test with: | AT | Browser | Key behaviour | |---|---|---| | NVDA | Chrome | `H` key for headings, `R` for regions, list count announced on nav entry | | JAWS | Chrome |