Can it help with complex ARIA implementation?

Yes, it provides specific implementation patterns for ARIA roles, live regions, and states for complex widgets like tabs, modals, and accordions.

Why does this skill prioritize semantic HTML over ARIA?

Following the 'First Rule of ARIA,' this skill prioritizes native HTML elements because they provide built-in accessibility features that are more robust and less prone to developer error than custom ARIA implementations.

What standards does this skill follow?

The skill primarily targets WCAG 2.1 Level AA standards, which is the recognized industry standard and legal requirement for most commercial and public web projects.

Does it include accessibility testing strategies?

Absolutely. It includes patterns for automated testing with tools like jest-axe and comprehensive manual checklists for screen reader and keyboard-only testing.

Web Accessibility Patterns

Name: Web Accessibility Patterns
Author: organvm-iv-taxis

byorganvm-iv-taxis

•

Design Tools

Implements inclusive web design patterns and WCAG compliance across semantic HTML, ARIA, and keyboard navigation.

A comprehensive implementation toolkit designed to help developers build inclusive web interfaces that meet international WCAG standards. This skill provides Claude with domain-specific guidance on generating semantic HTML, managing complex ARIA states, ensuring keyboard navigability, and implementing robust testing strategies based on the POUR principles (Perceivable, Operable, Understandable, Robust). It is an essential resource for teams aiming to achieve Level AA compliance and ensure their applications are accessible to users with diverse needs and those using assistive technologies.

Key Features

01Comprehensive keyboard navigation and focus management strategies

02ARIA pattern implementation for complex UI components like modals and tabs

032 GitHub stars

04Semantic HTML structure and heading hierarchy optimization

05Automated and manual accessibility testing checklists

06WCAG AA/AAA color contrast and visual accessibility guidelines

Use Cases

01Building complex custom UI components with full keyboard support and proper ARIA states

02Auditing and remediating frontend code to meet legal WCAG 2.1 Level AA requirements

03Refactoring legacy div-based code into semantic HTML for improved screen reader support

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add organvm-iv-taxis/a-i--skills accessibility-patterns

For use in Claude.ai and ChatGPT

Download Skill