skills.rest
maxritter
maxritterCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

standards-accessibility

Audit frontend components for semantic HTML, ARIA, keyboard navigation, and WCAG compliance.

1.8k|153|Updated Oct 18, 2025
Search Tags:#accessibility#ARIA#WCAG#semantic-html#keyboard-navigation#alt-text#focus-management
One-click install
npx skills add https://github.com/maxritter/claude-pilot --skill standards-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: standards-accessibility
Source: https://github.com/maxritter/claude-pilot/tree/main/pilot/skills/standards-accessibility
Command: npx skills add https://github.com/maxritter/claude-pilot --skill standards-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams close accessibility gaps by guiding semantic HTML, ARIA attributes, keyboard navigation, and WCAG-aligned practices across frontend components.

Core Features & Use Cases

  • Semantic HTML & Landmarks: Use appropriate HTML elements (nav, main, header, footer, article) to convey meaning to assistive tech and improve document structure.
  • ARIA Integration: Add aria-label, aria-labelledby, aria-describedby for non-semantic components to provide clear accessible names and descriptions.
  • Keyboard & Focus: Ensure keyboard operability and visible focus indicators across dialogs, menus, and interactive controls.
  • Alt Text & Image Semantics: Provide descriptive alt text for informative images and proper labeling for decorative content.
  • Heading Hierarchy: Maintain logical h1-h6 order to create a coherent document outline for screen readers.
  • Color & Contrast: Verify WCAG-compliant contrast ratios for text and UI components to support readability.

Quick Start

Use the standards-accessibility skill to audit a UI component or page for semantic HTML, ARIA labeling, keyboard navigation, and color contrast, then implement the recommended improvements.

Frequently Asked Questions about standards-accessibility

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

FAQPage Schema
How do I make UI components accessible with ARIA and semantic HTML?▼

Make UI components accessible by using semantic HTML elements like nav and main for structure, and apply ARIA attributes such as aria-label and aria-labelledby to give non-semantic elements clear accessible names for assistive technologies.

What is the best way to ensure keyboard navigation and focus management in modals?▼

Ensure keyboard navigation in modals by enforcing keyboard operability and maintaining visible focus indicators across all interactive controls, allowing users to navigate and dismiss dialogs without a mouse.

How do I audit a frontend page for WCAG compliance?▼

Audit a frontend page for WCAG compliance by checking its semantic HTML structure, ARIA labeling, keyboard operability, heading hierarchy, and color contrast ratios, then implement the recommended improvements.

When do I need to add alt text and ARIA attributes to images?▼

Add descriptive alt text to informative images to convey their meaning to screen readers, and use proper labeling like empty alt attributes for decorative content to prevent unnecessary verbosity for assistive tech users.

How does heading hierarchy affect screen reader navigation?▼

Heading hierarchy affects screen reader navigation by requiring a logical h1 through h6 order, which creates a coherent document outline that allows assistive technology users to understand page structure and jump between sections.

Can I use this approach to fix accessibility gaps in modern frontend frameworks?▼

Yes, you can apply these accessibility practices across modern frontend frameworks to close accessibility gaps in UI components, forms, modals, and menus by enforcing WCAG-aligned standards and proper element usage.

Related Skills

Explore More Software Engineering Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
Camilo8902Camilo8902

accessibility-auditor

Audit web pages for WCAG 2.1 compliance with ARIA and keyboard navigation.

Community
Advanced
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
DexploarerDexploarer
6

wcag-compliance-checker

Audits web applications for WCAG 21 Level AA conformance using axe-core, pa11y, Lighthouse, and outputs remediation recommendations.

Community
Advanced