Can I use it to fix existing accessibility errors?

Absolutely. The skill provides specific patterns and checklists to help you audit your current markup and refactor it using semantic HTML and proper ARIA roles.

Why does the skill prioritize semantic HTML over ARIA?

The skill follows the 'First Rule of ARIA': don't use ARIA if a native HTML element already provides the semantics. Native elements are more robust and better supported by assistive technologies.

Does this skill help with ADA and EAA compliance?

Yes, it targets WCAG 2.1/2.2 Level AA standards, which are the recognized benchmarks for legal requirements like the Americans with Disabilities Act (ADA) and the European Accessibility Act (EAA).

Does it cover mobile-specific accessibility?

Yes, it includes requirements for touch target sizes, viewport zoom settings, content reflow, and device orientation to ensure a high-quality experience for mobile users.

Accessibility Compliance & WCAG Standards

Name: Accessibility Compliance & WCAG Standards
Author: peixotorms

bypeixotorms

0•

Design Tools

Implements WCAG 2.1/2.2 standards and POUR principles to create inclusive, legally compliant web interfaces.

This skill empowers developers to build web interfaces that are accessible to all users, regardless of visual, auditory, motor, or cognitive impairments. It provides comprehensive guidance on implementing WCAG 2.1 and 2.2 Level AA standards through semantic HTML, correct ARIA usage, and robust focus management. By adhering to the POUR (Perceivable, Operable, Understandable, Robust) principles, the skill ensures UI components like modals, tabs, and forms meet legal requirements such as the ADA and EAA while providing detailed checklists for manual and screen-reader testing.

Key Features

01Advanced ARIA patterns for complex UI widgets and live regions

02Step-by-step manual testing checklists for keyboard and screen readers

03Automated guidance for color contrast and responsive reflow

04WCAG 2.1/2.2 Level A and AA compliance mapping

05Semantic HTML optimization for native screen reader support

060 GitHub stars

Use Cases

01Auditing and refactoring existing frontend codebases for ADA compliance

02Building accessible-by-design UI components like modals, accordions, and tabs

03Ensuring enterprise web applications meet international accessibility laws (EAA/Section 508)

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills accessibility-compliance

For use in Claude.ai and ChatGPT

Key Features

01Advanced ARIA patterns for complex UI widgets and live regions

02Step-by-step manual testing checklists for keyboard and screen readers

03Automated guidance for color contrast and responsive reflow

04WCAG 2.1/2.2 Level A and AA compliance mapping

05Semantic HTML optimization for native screen reader support

060 GitHub stars

Use Cases

01Auditing and refactoring existing frontend codebases for ADA compliance

02Building accessible-by-design UI components like modals, accordions, and tabs

03Ensuring enterprise web applications meet international accessibility laws (EAA/Section 508)

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills accessibility-compliance

For use in Claude.ai and ChatGPT