Verified:GitHub

accessible-responsive-navigation

Build accessible, responsive navigation with ARIA states and keyboard support.

2|Updated Mar 21, 2026

Search Tags:#a11y #navigation #wcag #responsive #keyboard #aria #accessible

One-click install

npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill accessible-responsive-navigation

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: accessible-responsive-navigation
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-development/accessible-responsive-navigation
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill accessible-responsive-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a framework for building navigation systems (headers, menus, dropdowns) that are responsive across devices and accessible to keyboard and assistive technologies, ensuring WCAG compliance.

Core Features & Use Cases

Semantic HTML structure using <nav>, <ul>, and <li> elements for clear landmark semantics.
ARIA state management for toggles and dropdowns (aria-expanded, aria-controls, aria-haspopup).
Keyboard and focus management, including ESC handling and focus restoration across breakpoints.
Responsive behavior with mobile toggles and desktop layouts, plus guidance for testing accessibility.

Quick Start

Create an accessible responsive navigation boilerplate that uses semantic HTML and ARIA state management to ensure keyboard operability.

Frequently Asked Questions about accessible-responsive-navigation

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

FAQPage Schema

How do I build accessible website navigation with proper ARIA states?▼

To build accessible website navigation, use semantic HTML structures like <nav> and <ul> elements combined with ARIA state management such as aria-expanded and aria-controls to ensure operability for assistive technologies.

What is the best way to make responsive dropdown menus keyboard accessible?▼

Making responsive dropdown menus keyboard accessible requires implementing focus management, handling ESC key events, and restoring focus across breakpoints to ensure users can navigate without a mouse.

How does ARIA state management work for mobile navigation toggles?▼

ARIA state management for mobile toggles uses attributes like aria-expanded, aria-controls, and aria-haspopup to communicate open and closed states dynamically to assistive technologies when the viewport changes.

Do I need semantic HTML landmarks to meet WCAG compliance for headers?▼

Yes, you need semantic HTML landmarks using <nav>, <ul>, and <li> elements to provide clear structural semantics for headers and menus, which is a foundational requirement for ensuring WCAG compliance.

How to handle focus restoration across responsive navigation breakpoints?▼

Handling focus restoration across responsive breakpoints involves actively managing keyboard focus states and returning focus to the triggering element, ensuring continuous keyboard operability when layouts shift between mobile and desktop.