Webアプリケーションは、不適切なアクセシビリティ実装により、障害のあるユーザーを排除することがよくあります。このスキルは、包括的でスクリーンリーダー対応、キーボード操作可能なインターフェースを作成するためのWCAG 2.1ガイダンスを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「web-accessibility」を使用しています。 Create an accessible modal in React
期待される結果:
- role='dialog'、aria-modal='true'、aria-labelledby、フォーカストラップ、ESCハンドラー、外側クリックで閉じる機能を備えたModalコンポーネントを返します
- アクセシビリティチェックリストを含みます：セマンティックHTML、キーボードナビゲーション、スクリーンリーダーアナウンス
「web-accessibility」を使用しています。 Build accessible login form
期待される結果:
- <label htmlFor>の関連付け、aria-required、aria-invalid、エラーメッセージ用のaria-describedbyを備えたフォーム
- エラーアナウンス用のrole='alert'と、検証失敗時の適切なフォーカス管理を含みます
セキュリティ監査
安全All 113 static findings are FALSE POSITIVES. The skill is documentation about web accessibility (WCAG 2.1). The scanner detected backticks in markdown, legitimate reference URLs to accessibility resources, relative paths in docs, and false positives for 'key' (keyboard) and 'cryptographic' (MDN). No executable code, no shell commands, no malicious patterns exist.
品質スコア
作れるもの
新しいアクセシブルコンポーネントの構築
最初から適切なフォーカス管理、ARIAラベル、キーボードサポートを備えたReactモーダル、ドロップダウン、またはフォームを作成します。
既存のアクセシビリティ問題の修正
WCAGチェックリストに従い、適切なセマンティックHTMLを実装することで、レガシーコードのアクセシビリティ問題を特定して修正します。
アクセシビリティテストの実装
Jestでaxe-coreを使用した自動アクセシビリティテストをセットアップし、デプロイ前に回帰を検出します。
これらのプロンプトを試す
次の要件でアクセシブルなモーダルコンポーネントを作成します： - フレームワーク：[React/Vue/Vanilla JS] - WCAGレベル：AA - 機能：フォーカストラップ、ESCで閉じる、外側クリックで閉じる - 適切なARIA属性とスクリーンリーダーアナウンスを含める
次の要素を含むアクセシブルなフォームを構築します： - 必須フィールドの検証 - aria-describedbyを使用した明確なエラーメッセージ - 適切なラベルの関連付け - 成功/エラー状態のアナウンス - 検証エラー時のフォーカス管理
[ドロップダウン/タブ/メニュー]に完全なキーボードナビゲーションサポートを追加します： - 矢印キーナビゲーション - Home/Endキーサポート - Enter/Spaceによるアクティベーション - Escapeで閉じる - 可視化されたフォーカスインジケーター
アクセシビリティの問題についてこのコンポーネントコードをレビューします： [コードを貼り付け] チェック項目：セマンティックHTML、ARIAの使用、キーボードアクセシビリティ、色のコントラスト、フォームラベル、フォーカス管理
ベストプラクティス
- ARIA属性を追加する前に、まずセマンティックHTML要素を使用します - ネイティブHTML要素には組み込みのアクセシビリティがあります
- 常に可視化されたフォーカスインジケーターを維持します - 代替手段を提供せずにoutline: noneを使用しないでください
- 開発中は自動化ツールだけでなく、実際のキーボードナビゲーションとスクリーンリーダーでテストしてください
回避
- ネイティブの<button>要素の代わりに、role='button'を使用したdivを使用する
- フォーム入力の唯一のラベルとしてプレースホルダーを使用する
- 可視化されたフォーカスインジケーターを提供せずにoutline:focusスタイルを削除する