skills.rest
TheNordicOne
TheNordicOneCOMMUNITY
Explore all skills by this author →
GitHub

a11y-interactive

Enforce accessible link, button, keyboard, and focus semantics for web UI.

9|Updated Jan 18, 2025
Search Tags:#accessibility#screen reader#keyboard navigation#semantic html#focus management#aria-live
One-click install
npx skills add https://github.com/TheNordicOne/ngx-formbar --skill a11y-interactive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-interactive
Source: https://github.com/TheNordicOne/ngx-formbar/tree/main/.claude/skills/a11y-interactive
Command: npx skills add https://github.com/TheNordicOne/ngx-formbar --skill a11y-interactive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid inaccessible interactive elements by ensuring correct semantic roles, keyboard behavior, focus order, and screen reader announcements.

Core Features & Use Cases

  • Links vs Buttons Semantics: Use anchors for navigation and buttons for actions, including correct handling for icon-only controls.
  • Keyboard Navigation Patterns: Apply roving tabindex for composite widgets and prevent broken focus order using tabindex rules.
  • Focus Management & Overlays: Move focus logically after content changes and rely on dialog focus trapping where appropriate.
  • ARIA Live Region Announcements: Choose appropriate live region roles (alert/status), configure timing, and ensure containers exist before updates.

Quick Start

Ask the Skill to review your UI markup and keyboard/focus flow for links, buttons, composite widgets, focus changes, and ARIA live announcements.

Frequently Asked Questions about a11y-interactive

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

FAQPage Schema
How do I implement roving tabindex for keyboard navigation in composite widgets?▼

Roving tabindex manages keyboard navigation by assigning tabindex="0" to the active element and tabindex="-1" to others, ensuring only one item in a composite control receives focus at a time while maintaining deterministic focus movement.

When should I use links vs buttons for accessible interactive elements?▼

Use semantic HTML anchors for navigation actions and buttons for functional actions. This distinction ensures screen readers correctly announce interactive elements, with icon-only controls requiring specific accessibility roles for proper identification.

How do I set up ARIA live regions for screen reader announcements?▼

ARIA live regions require pre-existing DOM containers using alert or status roles before dynamic content updates occur. This ensures screen readers announce changes reliably without missing dynamic content updates due to timing constraints.

What is the correct way to manage focus when UI content changes dynamically?▼

Focus management requires programmatically moving focus to logical destinations after dynamic content changes. For overlays, rely on dialog focus trapping to prevent screen reader users from navigating to hidden background elements.

Why does tabindex management prevent broken focus order in custom widgets?▼

Tabindex constraints prevent broken focus order by ensuring custom keyboard-navigable widgets follow logical sequences. Avoiding positive tabindex values keeps the focus order deterministic and aligned with the visual layout for screen reader users.

Related Skills

Explore More Design & Creative Skills→
Focus-GTSFocus-GTS

block-accessibility

Audit AEM Edge Delivery Services block markup for WCAG 2.1 AA accessibility failures.

Official
Advanced
spencerpaulyspencerpauly
672

accessibility-auditing

Audit web pages for accessibility issues using browser snapshots and keyboard navigation checks.

Community
Intermediate
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
Shaarav4795Shaarav4795

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus, contrast, and forms.

Community
Intermediate