Does it support modern frameworks like React or Vue?

The skill provides implementation patterns in TSX/React and CSS that are easily adaptable to any modern component-based frontend framework.

Can I use this for mobile web development?

Yes, it includes specific guidelines for touch targets (44x44px), safe area insets, and mobile-friendly input types.

Why focus on semantic HTML over custom components?

Semantic HTML provides native accessibility features, such as keyboard focus and screen reader descriptions, that are more reliable and performant than custom div-based implementations.

How do I handle dynamic content for screen readers?

The skill includes patterns for ARIA live regions to announce toasts, error alerts, and loading states effectively without disrupting the user experience.

How does this skill help with WCAG compliance?

It provides specific code patterns and a checklist to ensure your site meets WCAG AA standards, covering contrast, navigation, and screen reader support.

Web Accessibility Standards

Name: Web Accessibility Standards
Author: s-hiraoku

bys-hiraoku

0•

デザインツール

Implements and audits web interfaces for WCAG compliance, semantic HTML, and universal keyboard navigation.

This skill provides a comprehensive framework for building inclusive web applications that meet modern accessibility standards. It guides developers through implementing semantic HTML, managing keyboard focus, applying ARIA patterns, and ensuring form usability. Whether you are building a new UI or auditing an existing codebase, this skill ensures your interfaces are accessible to screen readers, keyboard users, and mobile devices while maintaining high UX quality and internationalization standards.

主な機能

01ARIA live regions and state management for dynamic content

02Comprehensive keyboard navigation and focus management patterns

03WCAG-compliant form validation and touch target optimization

04Internationalization (i18n) and locale-aware formatting standards

050 GitHub stars

06Semantic HTML element selection and structure guidance

ユースケース

01Implementing keyboard-navigable custom UI components like modals or dropdowns

02Generating accessible form structures with proper error handling and labels

03Auditing existing React/Next.js components for WCAG AA compliance

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