experience-lwc-accessibility-validate について
Webコンポーネントの表示・操作部分に関わるHTML、JavaScript、CSSを対象としたアクセシビリティレビュー用スキルです。WCAG 2.2に基づく問題と修正に絞り、無関係なコードレビューは扱いません。
主な機能
- 01WCAG 2.2に特化したレビュー
- 02該当する達成基準の確認
- 03実行可能な修正案
- 04WAI-ARIAの適切な使用指針
- 05スクリーンショットによる視覚レビュー
活用シーン
- 01コンポーネントのマークアップの違反確認
- 02キーボード操作とフォーカスの確認
- 03フォーム、ラベル、エラー通知の評価
- 04画像によるコントラストとリフローの確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/experience-lwc-accessibility-validateを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/reviewers/sc-1-1-1-non-text-content.mdsc-1-3-1-i-lists.mdsc-1-3-1-ii-tables.mdsc-1-3-1-iii-form-labels.mdsc-1-3-1-iv-regions.mdsc-1-3-1-v-groups.mdsc-1-3-5-identify-input.mdsc-1-4-3-contrast.mdsc-2-1-1-keyboard.mdsc-2-4-4-link-purpose.mdsc-2-4-6-headings-labels.mdsc-2-5-1-pointer-gestures.mdsc-2-5-2-pointer-cancellation.mdsc-2-5-3-label-in-name.mdsc-2-5-7-dragging-movement.mdsc-3-2-1-on-focus.mdsc-3-2-2-on-input.mdsc-3-3-1-error-identification.mdsc-3-3-2-labels-instructions.mdsc-3-3-3-error-suggestion.mdsc-4-1-2-i-name.mdsc-4-1-2-ii-role.mdsc-4-1-2-iii-value.mdreferences/vision/sc-1-1-1-non-text-content.mdsc-1-4-1-use-of-color.mdsc-1-4-10-resize-reflow.mdsc-1-4-11-non-text-contrast.mdsc-1-4-3-contrast.mdscripts/contrast-ratio.py詳細
Web Component Accessibility
Web コンポーネントのアクセシビリティ（a11y）パターンと修正ガイダンスです。コンポーネントの表示面または操作面に関わる作業（HTML、JS、CSS の生成、変更、レビュー、スタイル設定）を行う際は、WCAG 2.2 の基準を適用するために、いつでも参照してください。
Review Context
WCAG（Web Content Accessibility Guidelines）に基づき、Web アクセシビリティの向上に特化したレビューを実施してください。
コードを違反として判定するには、引用する WCAG ルールとの直接的な関連性があり、その基準への明確な違反である必要があります。
主なレビュー基準：
- アクセシビリティのみに焦点を当てる：
- コンポーネントをアクセシビリティの観点のみから評価します。
- 引用した WCAG 達成基準への準拠のみを考慮し、ほかの基準に起因する違反は対象外とします。
- アクセシビリティに関係のない一般的なコードスタイル、パターン、問題への言及は避けます。
- アクセシビリティの最低限かつ十分な水準を確保する：
- コンポーネントが WCAG で定められた最低要件を満たすのを妨げるアクセシビリティ上の問題を特定します。
- WCAG への準拠に厳密に必要な場合を除き、準拠の範囲を超える改善提案は避けます。
- WAI-ARIA の使用：
- セマンティック HTML では対応できないアクセシビリティを実現するために厳密に必要な場合に限り、WAI-ARIA 属性を使用します。
- WAI-ARIA 属性の不適切または過剰な使用による不要な複雑化や、潜在的な後退を避けます。
- コンポーネントライブラリの使用
- よく知られたコンポーネントライブラリ（Salesforce Lightning、Material UI、Chakra UI など）は、正しく実装されていれば、標準でアクセシブルであると想定します。WCAG に明確に反する使い方をされていない限り、ライブラリが提供するコンポーネントは、このレビューの対象外とします。抽象化の内部では、アクセシブルに実装されているためです。
焦点：範囲外の余計なフィードバックを避けながら、コンポーネントが必要な WCAG アクセシビリティ要件を満たすための、実行可能なフィードバックを提示してください。コード内の問題は、すぐに修正できるものに限って特定してください。必ずレビューを実施し、その後、この問題を解決するコード修正を提案してください。
Success Criteria Reviewers
レビュー対象のコードに適用される達成基準を特定し、そのコードに関連する参照ファイルを開いてください。各参照ファイルには、分析フレームワーク、例、修正ガイダンスを含む、独立したレビュアーが記載されています。
Perceivable
- SC 1.1.1 Non-text Content
- SC 1.3.1 (i) Lists
- SC 1.3.1 (ii) Tables
- SC 1.3.1 (iii) Form Labels
- SC 1.3.1 (iv) Regions
- SC 1.3.1 (v) Groups
- SC 1.3.5 Identify Input Purpose
- SC 1.4.3 Contrast (Minimum)
Operable
- SC 2.1.1 Keyboard
- SC 2.4.4 Link Purpose
- SC 2.4.6 Headings and Labels
- SC 2.5.1 Pointer Gestures
- SC 2.5.2 Pointer Cancellation
- SC 2.5.3 Label in Name
- SC 2.5.7 Dragging Movements
Understandable
- SC 3.2.1 On Focus
- SC 3.2.2 On Input
- SC 3.3.1 Error Identification
- SC 3.3.2 Labels or Instructions
- SC 3.3.3 Error Suggestion
堅牢性
ビジョン支援レビュー
コンポーネントのスクリーンショットやデザインモックがある場合は、これらのビジョンレベルのレビュー担当者を使って、ソースコードレビューを補完してください。各リファレンスでは、対応する達成基準について、コントラスト比、色への依存、リサイズ／リフロー動作、DOM ではなくピクセルからの非テキストコンテンツの特定など、画像に基づく評価を扱います。
- SC 1.1.1 非テキストコンテンツ（ビジョン）
- SC 1.4.1 色の使用（ビジョン）
- SC 1.4.3 コントラスト（ビジョン）
- SC 1.4.10 リフロー（ビジョン）
- SC 1.4.11 非テキストコントラスト（ビジョン）
レビュー結果
評価した各達成基準について、見つかった違反を報告してください。ある基準に違反がない場合は、その基準について空のリストを返してください。