accessible-main-navigation

Name: accessible-main-navigation
Availability: InStock
Author: CoastDigitalGroup

Implement accessible keyboard-friendly main navigation with ARIA attributes and skip links.

2|Updated Mar 21, 2026

Search Tags:#semantic-html #aria #keyboard-accessibility #skip-links #accessible-navigation #responsive-navigation

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Achieve accessible, keyboard-friendly primary site navigation by combining semantic HTML, skip links, and robust mobile interactions to serve all users.

Core Features & Use Cases

Semantic structure with header, nav, and landmarks for screen readers.
Skip-link integration and responsive mobile toggle for WCAG-compliant navigation.
Use-case: audit and implement an accessible main navigation across websites and apps.

Quick Start

Build an accessible header with a skip link, landmarks, and a responsive toggle that announces state changes to screen readers.

Frequently Asked Questions about accessible-main-navigation

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

FAQPage Schema

How do I build a keyboard-friendly main navigation with semantic HTML and ARIA?▼

Keyboard-friendly accessible navigation uses semantic header and nav landmarks combined with ARIA attributes like aria-expanded and aria-controls to manage state changes for screen readers during interaction.

What is a skip link and when do I need it for accessible navigation?▼

A skip link is an anchor element placed at the top of the page that allows keyboard users to bypass main navigation and jump directly to content. It is required for WCAG-compliant navigation menus.

How do I manage ARIA state attributes for a responsive mobile navigation menu?▼

Responsive mobile navigation requires toggling aria-expanded to indicate menu visibility and using aria-haspopup to signal dropdown behavior, ensuring screen readers announce state changes accurately to users.

Does accessible main navigation require specific HTML landmarks for screen readers?▼

Accessible navigation requires semantic HTML landmarks, specifically header and nav elements, to establish clear regions that screen readers can identify and navigate programmatically without visual context.

What's the best way to implement keyboard navigation patterns for a site menu?▼

Implementing keyboard navigation requires supporting standard tab order and ensuring focus states are visible. The protocol defines specific keyboard patterns to enter, traverse, and exit menu items logically.

Why does my mobile navigation toggle fail to announce state changes to screen readers?▼

State changes fail when the mobile toggle lacks proper ARIA state management. Implementing aria-expanded on the toggle button and aria-controls linking it to the menu resolves screen reader announcement issues.