skills.rest
Hack23
Hack23OFFICIAL
Explore all skills by this author →
WebsiteGitHub

accessibility-wcag-patterns

Implement WCAG 2.1 AA accessibility patterns for CIA platform UI components and audits.

235|56|Updated Aug 1, 2015
Search Tags:#accessibility#ARIA#screen-reader#keyboard-navigation#WCAG-2.1#inclusive-ui
One-click install
npx skills add https://github.com/Hack23/cia --skill accessibility-wcag-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag-patterns
Source: https://github.com/Hack23/cia/tree/main/.github/skills/accessibility-wcag-patterns
Command: npx skills add https://github.com/Hack23/cia --skill accessibility-wcag-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides practical guidance for implementing WCAG 2.1 AA accessibility standards in the CIA platform, ensuring data is accessible to users with disabilities. It covers ARIA attributes, keyboard navigation, screen reader optimization, and automated accessibility checks.

Core Features & Use Cases

  • Guidance on adding ARIA roles and properties to interactive components (forms, data tables, charts) to improve screen reader compatibility.
  • Patterns for accessible keyboard navigation, focus management, and visible focus indicators across dashboards and data visualizations.
  • Use Case: a new data dashboard is updated for accessibility; apply the patterns to ensure all controls are operable via keyboard and announced to screen readers.

Quick Start

Review the WCAG patterns and ARIA guidance, implement accessible attributes in a sample UI, and run automated tests (axe/Pa11y) to verify compliance.

Frequently Asked Questions about accessibility-wcag-patterns

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

FAQPage Schema
How do I make interactive dashboards accessible with WCAG 2.1 AA compliance?▼

To achieve WCAG 2.1 AA compliance for dashboards, apply accessible ARIA roles, keyboard navigation patterns, and visible focus indicators. This ensures interactive data visualizations are fully operable via keyboard and announced correctly to screen readers.

What ARIA attributes do I need for accessible data tables and forms?▼

For accessible data tables and forms, implement specific ARIA roles and properties to improve screen reader compatibility. Adding these attributes ensures interactive components meet WCAG 2.1 AA standards and are properly announced to assistive technologies.

How do I test my UI for screen reader compatibility and keyboard navigation?▼

To test UI for screen reader compatibility and keyboard navigation, run automated accessibility checks using tools like axe or Pa11y. This verifies implemented ARIA patterns and keyboard operability meet WCAG 2.1 AA requirements.

Does this WCAG 2.1 AA guidance apply to charts and data visualizations?▼

Yes, this WCAG 2.1 AA guidance applies directly to charts and data visualizations. It provides patterns for accessible keyboard navigation, focus management, and ARIA usage to ensure complex visual data is accessible to users with disabilities.

What is the best way to manage focus indicators across complex data tables?▼

The best way to manage focus across data tables is applying established WCAG 2.1 AA patterns for visible focus indicators and keyboard navigation. This ensures users can track their position and operate controls without a mouse.

When do I need automated accessibility testing for ARIA implementation?▼

You need automated accessibility testing after implementing ARIA attributes and keyboard navigation patterns in your UI. Running tools like axe or Pa11y verifies compliance with WCAG 2.1 AA standards before final release.

Related Skills

Explore More Design & Creative Skills→
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
a53alia53ali

accessibility-testing

Test web and mobile applications for WCAG 2.1/2.2 AA conformance using automated tools and manual techniques.

Community
Advanced
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic
serkan-ozalserkan-ozal
7

accessibility-audit

Audits web accessibility via ARIA snapshots, AX tree analysis, WCAG validation, and keyboard navigation testing using browser-devtools-cli.

Community
Intermediate