accessibility-compliance について
アクセシブルなインターフェースの実装・評価に取り組む開発者やデザイナー向けのスキルです。WCAG の指針、操作パターン、よくある問題、テスト方法を扱います。
主な機能
- 01WCAG 2.2 AA・AAA の指針
- 02キーボード操作とフォーカス管理
- 03アクセシブルなフォームとスクリーンリーダー
- 04動きの軽減とコントラスト設定
- 05自動・手動テストツール
活用シーン
- 01インターフェースのアクセシビリティ監査
- 02コントロールへのキーボード操作追加
- 03アクセシブルなフォームの構築
- 04モバイルのスクリーンリーダー対応確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/accessibility-complianceを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/aria-patterns.mddetails.mdmobile-accessibility.mdwcag-guidelines.md詳細
アクセシビリティコンプライアンス
アクセシビリティの実装をマスターし、障害のあるユーザーを含むすべての人が利用できる包括的な体験を作りましょう。
このスキルを使う場面
- WCAG 2.2 レベル AA または AAA への準拠を実装する
- スクリーンリーダーで利用可能なインターフェースを構築する
- インタラクティブなコンポーネントにキーボードナビゲーションを追加する
- フォーカス管理とフォーカストラップを実装する
- 適切なラベル付けを備えたアクセシブルなフォームを作成する
- モーションの低減やハイコントラストの設定をサポートする
- モバイルのアクセシビリティ機能（iOS VoiceOver、Android TalkBack）を構築する
- アクセシビリティ監査を実施し、違反を修正する
詳細なパターンと実例
詳細なパターンのドキュメントは references/details.md にあります。上記のナビゲーション階層では不十分な場合は、そのファイルをお読みください。
ベストプラクティス
- セマンティック HTML を使用する：可能な場合は ARIA よりもネイティブ要素を優先しましょう
- 実際のユーザーでテストする：ユーザーテストに障害のある人を参加させましょう
- キーボードファースト：マウスなしで動作するようにインタラクションを設計しましょう
- フォーカススタイルを無効にしない：削除するのではなく、スタイルを整えましょう
- テキストの代替を提供する：すべての非テキストコンテンツには説明が必要です
- ズームをサポートする：コンテンツは 200% のズームでも動作する必要があります
- 変更を通知する：動的なコンテンツにはライブリージョンを使用しましょう
- 設定を尊重する：prefers-reduced-motion と prefers-contrast を尊重しましょう
よくある問題
- alt テキストの欠如：説明のない画像
- 不十分な色のコントラスト：背景に対してテキストが読みにくい
- キーボードトラップ：コンポーネント内でフォーカスが固定される
- ラベルの欠如：関連付けられたラベルがないフォーム入力
- 自動再生メディア：ユーザーの操作なしに再生されるコンテンツ
- アクセスできないカスタムコントロール：ネイティブ機能を不適切に再現したもの
- スキップリンクの欠如：繰り返しコンテンツをバイパスする手段がない
- フォーカス順序の問題：タブ順序が視覚的な順序と一致しない
テストツール
- 自動：axe DevTools、WAVE、Lighthouse
- 手動：VoiceOver（macOS/iOS）、NVDA/JAWS（Windows）、TalkBack（Android）
- シミュレーター：NoCoffee（視覚）、Silktide（さまざまな障害）
コメント
Markdown 対応