Does this skill help with WCAG compliance?

Yes, it provides specific implementation patterns and a checklist designed to meet WCAG AA standards, covering contrast, structure, and navigation.

Can it help refactor non-semantic HTML?

It provides clear guidance and code examples to convert inaccessible elements, such as clickable divs, into semantic buttons or links that work for all users.

How does it handle dynamic content for screen readers?

The skill includes patterns for ARIA live regions and status roles to ensure that toast notifications, errors, and loading states are announced correctly.

Does it include mobile accessibility features?

Yes, it covers touch target minimums (44x44px), safe area insets for device notches, and mobile-specific touch behaviors.

Web Accessibility Standard

Name: Web Accessibility Standard
Author: s-hiraoku

bys-hiraoku

0•

デザインツール

Implements WCAG-compliant web interfaces using semantic HTML, keyboard navigation patterns, and ARIA best practices.

This skill provides a comprehensive framework for building inclusive and accessible web interfaces. It guides developers through the implementation of semantic HTML, robust keyboard navigation, and ARIA roles to ensure compatibility with screen readers and assistive technologies. By following these standards, developers can perform accessibility audits, optimize touch targets for mobile devices, and ensure that forms and dynamic content remain usable for all users, regardless of how they interact with the web.

主な機能

010 GitHub stars

02Comprehensive keyboard navigation and focus management patterns

03Accessible form validation with aria-describedby and error announcements

04Semantic HTML element selection and conversion guides

05ARIA implementation for icons, live regions, and loading states

06Mobile-first touch target and safe area optimization

ユースケース

01Refactoring legacy 'div-soup' code into clean, semantic, and accessible HTML

02Auditing existing frontend components for WCAG compliance and UX gaps

03Building complex interactive UI elements with full keyboard and screen reader support

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add s-hiraoku/synapse-a2a web-accessibility

For use in Claude.ai and ChatGPT

Download Skill