← 一覧へ
✅ テスト・チェックCC / Codex 両対応難易度: 中級
WCAGアクセシビリティ監査 wcag-audit-patterns
誰もが使いやすいウェブサイトをつくろう
これは何？
これはウェブサイトのアクセシビリティ(使いやすさ)をチェックするためのツールです。視覚障害者や身体障害のある方でも使いやすい設計になっているか、国際基準に沿って評価します。問題点を見つけたら、具体的な改善方法も教えてくれますよ。
これでできること
- ウェブページがWCAG 2.2基準に準拠しているかチェックできます
- アクセシビリティの問題点とその修正方法を提案します
- 色のコントラスト不足やキーボード操作の問題などを検出します
- アクセシブルなコンポーネントの実装方法を学べます
- 法的要件(ADA/Section 508)への対応を支援します
こんな時に便利
新しいウェブサイトを公開する前にアクセシビリティチェックを行いたい時
既存サイトでユーザーからアクセシビリティに関する苦情があった時
企業のコーポレートサイトを法律に準拠させる必要がある時
教育機関のウェブサイトを全ての学生が利用できるようにしたい時
使い方
監査したいウェブページのURLやHTMLコードを提供してください。自動的にチェックを行い、問題点をレベル別に報告します。より詳しい分析が必要な場合は、手動チェックの手順も案内します。初心者の方でも、提案された修正方法を一つずつ実装していけば大丈夫です。
使用例（こう頼んでみよう）
このウェブページのアクセシビリティをWCAG AAレベルでチェックしてくださいこのフォームにアクセシビリティの問題点はありますか？修正方法も教えてください視覚障害者が使いやすいように、このページを改善する方法を提案してください必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/wshobson/agents/tree/main/plugins/accessibility-compliance/skills/wcag-audit-patterns手動で置く
Claude Code →
~/.claude/skills/wcag-audit-patterns/Codex →
~/.agents/skills/wcag-audit-patterns/使いこなしのコツ
- 自動チェックだけでなく、実際にスクリーンリーダーで試すとより正確です
- 修正は一度に全部やろうとせず、重要な問題から順に対応しましょう
- セマンティックHTMLを使うと、多くの問題を自然に解決できます