accessibility について
accessibilityは、UIの作成・レビュー・監査でアクセシビリティに配慮するためのスキルです。WCAGの原則に基づき、自動チェックとキーボード・スクリーンリーダーによる手動テストを組み合わせます。
主な機能
- 01セマンティックHTMLとテキスト代替の確認
- 02コントラスト、キーボード操作、フォーカス管理への対応
- 03WCAGの知覚可能性と操作可能性の適用
- 04自動テストと手動テストの併用
- 05問題と修正例の記録
活用シーン
- 01インタラクティブなコンポーネントやフォームのレビュー
- 02UIへのキーボード操作とARIAの追加
- 03スクリーンリーダーでのページテスト
- 04既存ページのアクセシビリティ問題の監査
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/accessibilityを入力して読み込まれたか確認します。
同梱ファイルplugin.jsonreferences/full-guide.md
詳細
アクセシビリティ（a11y）スキル
使用する場面
次のような場合に使用します。
- UI コンポーネントを作成またはレビューするとき
- インタラクティブな要素（ボタン、フォーム、モーダル）を実装するとき
- キーボードナビゲーションを追加するとき
- 色のコントラストやビジュアルデザインをレビューするとき
- スクリーンリーダーでテストするとき
- 既存のページにアクセシビリティ上の問題がないか監査するとき
- ARIA 属性を実装するとき
クイックワークフロー
- プロジェクト固有のアクセシビリティ要件と既存のパターンを確認します。
- 基本ルールを適用します。セマンティック HTML、テキストによる代替、コントラスト、キーボード操作、フォーカス管理です。
- 自動ツールに加え、キーボード操作とスクリーンリーダーによる手動テストで検証します。
- 問題と修正内容を、例を添えて記録します。
WCAG の原則
- 知覚可能：テキストによる代替、コントラスト、レスポンシブ対応。
- 操作可能：キーボード操作、フォーカス管理、タイミング。
- 理解可能：明確な表現、予測可能な動作。
- 堅牢：有効な HTML と ARIA の使用。
参考資料
関連項目
audit— 対象となる単一の観点が指定されていない場合に、アクセシビリティ、パフォーマンス、テーマ設定、レスポンシブデザイン、アンチパターンを対象に、0〜4 のスコアで一括評価します。design-consistency-auditor— トークンの不整合、ハードコードされた色、デザインシステムとの乖離を確認します。
コメント
Markdown 対応