← 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 · ★ 48 · AI & Automation · score 78
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 must remain understandable and operable with keyboards, touch, speech input, screen readers, screen magnification, text resizing, and browser zoom. 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 | Do not assign severity from the pattern alone — determine the actual effect on navigation and task completion. Consider whether u