skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

accessible-main-navigation

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
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill accessible-main-navigation
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
zerx-labzerx-lab
62

gpui-focus-handle

Manage keyboard focus and navigation with GPUI focus handles and focus events.

Community
Intermediate
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced