Can it help fix existing accessibility issues?

Yes, the skill includes patterns for refactoring non-semantic code into accessible landmarks and managing complex keyboard interactions for legacy projects.

What frontend frameworks is this compatible with?

The patterns are based on web standards and can be applied to React, Vue, Angular, or vanilla HTML/CSS/TypeScript projects.

Is focus management included?

Yes, it includes detailed patterns for focus trapping in modals, restoring focus after interactions, and implementing skip-links for keyboard users.

Does it support screen reader optimization?

Absolutely. It covers ARIA roles, live regions for dynamic content updates, and proper alt text strategies to support assistive technologies.

How does this skill help with WCAG compliance?

It provides standardized code patterns and semantic structures that align with Web Content Accessibility Guidelines (WCAG) 2.1 principles, including POUR standards.

Web Accessibility Patterns

Name: Web Accessibility Patterns
Author: bradtaylorsf

bybradtaylorsf

•

デザインツール

Implements WCAG-compliant design patterns and semantic HTML to ensure web applications are accessible to all users.

The Web Accessibility Patterns skill provides a comprehensive set of standards and code implementations for building inclusive frontend interfaces. It guides developers through the core principles of Perceivable, Operable, Understandable, and Robust (POUR) design by offering ready-to-use patterns for semantic HTML, focus management, ARIA roles, and keyboard navigation. This skill is essential for ensuring compliance with WCAG guidelines, improving SEO through better document structure, and creating a seamless experience for users relying on assistive technologies like screen readers.

主な機能

01Color contrast validation guidelines for text and UI components

02Comprehensive accessibility testing checklists for manual and automated audits

03Semantic HTML mapping to ensure proper document structure and landmark usage

04Standardized ARIA patterns for complex UI components like modals, tabs, and alerts

05Advanced focus management techniques for keyboard-only navigation and focus trapping

066 GitHub stars

ユースケース

01Remediating existing 'div-soup' legacy code into semantic, accessible layouts

02Building WCAG 2.1 compliant React or Vue components from scratch

03Implementing keyboard-accessible navigation menus and interactive modal dialogs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bradtaylorsf/alphaagent-team accessibility-patterns

For use in Claude.ai and ChatGPT

Download Skill