skills.rest
Gaku52
Gaku52COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-accessibility

Implement WCAG-compliant accessibility with semantic HTML, ARIA, and testing workflows.

6|2|Updated Dec 24, 2025
Search Tags:#accessibility#a11y#ARIA#WCAG#keyboard#screen-reader
One-click install
npx skills add https://github.com/Gaku52/claude-code-skills --skill web-accessibility-gaku52
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/Gaku52/claude-code-skills/tree/main/frontend/web-accessibility
Command: npx skills add https://github.com/Gaku52/claude-code-skills --skill web-accessibility-gaku52

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

このスキルは、Webアプリケーションのアクセシビリティを向上させる実践的ガイドを提供します。WCAG 2.1準拠、セマンティックHTML、ARIA属性、キーボード操作、スクリーンリーダー対応など、誰もが使えるWebアプリを構築するためのベストプラクティスをまとめています。

Core Features & Use Cases

  • WCAG 2.1準拠の完全ガイドと実装例
  • セマンティックHTMLとARIAの実践的パターン
  • キーボード操作とスクリーンリーダー対応の設計指針
  • アクセシビリティテストのワークフロー（axe-core, Lighthouse, pa11y など）と自動化の組み込み
  • 使用ケース: 新規UIコンポーネントの監査、既存UIの監査・修正、リリース前監査の標準化

Quick Start

このスキルを使い始めるには、AIに以下を依頼してください。

  1. 現在のUIのアクセシビリティ監査計画を作成する。
  2. WCAG原則に基づく改善点を適用する。
  3. axe-core/Lighthouse/pa11yなどの自動テストとスクリーンリーダーテストを組み合わせ、検証を完了する。

Frequently Asked Questions about web-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my web app WCAG compliant with ARIA and semantic HTML?▼

Make your web app WCAG compliant by using semantic HTML elements for structure and applying ARIA attributes to define roles and states for screen reader compatibility.

What is the best way to test keyboard navigation for web accessibility?▼

The best way to test keyboard navigation is combining automated tools like axe-core and Lighthouse with manual screen reader testing workflows to verify focus management and operability.

How do I audit an existing UI component for screen reader accessibility?▼

Audit an existing UI component for screen reader accessibility by running automated checks with axe-core or pa11y, then manually verifying ARIA patterns and keyboard navigation workflows.

Does automated accessibility testing with axe-core catch all WCAG violations?▼

Automated accessibility testing with axe-core does not catch all WCAG violations; it must be combined with manual screen reader testing to verify semantic HTML and keyboard interactions.

When do I need ARIA attributes for web accessibility?▼

You need ARIA attributes for web accessibility when semantic HTML alone cannot convey the dynamic state, role, or name of a UI component to assistive technologies like screen readers.

Related Skills

Explore More Software Engineering Skills→
k97k97
4

rams

Audit UI source code for WCAG 2.1 compliance and design consistency.

Community
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
vosslabvosslab
2

color-accessibility-expert

Detect and fix color contrast issues in code and images using WCAG ratios.

Community
Advanced