accessibility-check
アクセシビリティコンプライアンスのチェック
このスキルは、WCAG 2.1ガイドラインに対してUIコンポーネントとページを評価します。アクセシビリティの問題を特定し、具体的な修正方法を提供します。障害を持つ人々が利用可能なインターフェースを確保するために使用してください。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「accessibility-check」を使用しています。 Check accessibility of this button: <button class="btn">Click me</button>
期待される結果:
- 発見された問題:アクセシブルな名前の欠落、可視的なフォーカススタイルがない
- 修正:aria-labelまたはテキストコンテンツを追加し、2pxのアウトラインで可視的なフォーカスインジケーターを確保
- WCAG基準:2.4.7 フォーカスの可視化、4.1.2 名前・役割及び値
- コード例:<button class="btn" aria-label="Submit form">Click me</button>
「accessibility-check」を使用しています。 Audit this form for WCAG compliance: <input type="email" placeholder="Email" />
期待される結果:
- 問題:明示的なlabel要素の欠落、placeholderはアクセシブルな名前ではない
- 修正:inputのidと一致するhtmlForを持つ<label>要素を追加
- WCAG基準:1.3.1 情報及び関係性、3.3.2 ラベル又は説明
- キーボードナビゲーションテストに合格
「accessibility-check」を使用しています。 Check color contrast of text with #999 color on #fff background
期待される結果:
- コントラスト比:2.5:1(WCAG AA不合格)
- WCAG 1.4.3は通常のテキストに最低4.5:1を要求
- 修正:テキストの色を#595959に変更して7:1の比率を達成
- カラーコントラストチェッカーツールを使用して検証
セキュリティ監査
安全This is a pure documentation skill containing WCAG 2.1 guidelines and accessibility audit templates. No executable code, network calls, filesystem access, or external commands are present. The skill operates solely through prompt-based content delivery. All 42 static findings are false positives from the scanner misinterpreting markdown formatting and documentation content as security threats.
リスク要因
🌐 ネットワークアクセス (2)
📁 ファイルシステムへのアクセス (1)
品質スコア
作れるもの
コードレビューのアクセシビリティ
プルリクエストをマージする前に、ReactコンポーネントのWCAGコンプライアンスをレビュー
デザインシステム監査
コンポーネントライブラリのアクセシビリティギャップとインクルーシブデザインの問題を監査
コンプライアンス検証
法的コンプライアンスのためのアクセシビリティ要件を製品が満たしているか検証
これらのプロンプトを試す
このボタンコンポーネントのアクセシビリティをチェックしてください。キーボードでアクセス可能ですか?適切なフォーカス状態がありますか?
このフォームのアクセシビリティ問題を監査してください。ラベル、エラーメッセージ、キーボードナビゲーションをチェックしてください。
このページのWCAG 2.1 AAアクセシビリティ監査を実施してください。知覚可能、操作可能、理解可能、堅牢の基準をチェックしてください。
このダッシュボードでアクセシビリティチェックとUX監査の両方を実行してください。コントラスト、ナビゲーション、ARIAの使用に焦点を当ててください。
ベストプラクティス
- すべての機能リリース前にアクセシビリティチェックを実行
- 自動テストツールと手動キーボードテストを組み合わせる
- 可能な限り障害を持つ人々をユーザーテストに含める
回避
- 適切なフォームラベルの代わりにplaceholderテキストを使用
- 情報を伝えるために色のみに依存
- 開発の最後までアクセシビリティテストをスキップ