アクセシブルなWebインターフェースを構築することで、障害を持つユーザーを含むすべての人がアプリケーションを使用できるようになります。このスキルは、ReactコンポーネントにおけるWCAG標準、適切なARIA属性、キーボードナビゲーション、スクリーンリーダー互換性を保証します。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-accessibility」。 アクセシブルなボタンコンポーネントを作成
預期結果:
- 適切なtype属性を持つセマンティックなbutton要素
- 3:1のコントラスト比を持つ視認可能なフォーカスインジケーター
- テキストコンテンツまたはaria-labelによるアクセシブルな名前
- EnterキーとSpaceキーでのキーボード操作
- 無効状態が支援技術に適切に伝達される
正在使用「frontend-accessibility」。 このフォームをキーボードアクセシブルにする
預期結果:
- htmlForとidを介して入力フィールドに関連付けられたラベル
- 視覚的なレイアウトに従うフォーカス順序
- aria-describedbyを介してリンクされたエラーメッセージ
- 適切に管理されたタブインデックス値
- aria-requiredを介して通知される必須フィールド
安全審計
安全This skill contains only documentation and guidance instructions for implementing accessibility features. The static analyzer flagged 20 benign text patterns (URLs, hashes, documentation paths, license names) as security issues. All findings are false positives. No executable code, network operations, or file modifications exist.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (4)
⚙️ 外部命令 (2)
品質評分
你能建構什麼
アクセシブルなReactコンポーネントを構築
スクリーンリーダーやキーボードナビゲーションで動作するボタン、フォーム、インタラクティブ要素を作成
アクセシビリティ標準を維持
適切なARIA属性とコントラスト比を持つすべてのUIコンポーネントがWCAGガイドラインを満たすことを保証
アクセシビリティ規制に準拠
ADA、Section 508、WCAG要件を満たし、法的問題を回避してすべてのユーザーにサービスを提供
試試這些提示
この問い合わせフォームを、適切なラベル、ARIA属性、キーボードナビゲーションで完全にアクセシブルにする
このモーダルコンポーネントに適切なARIA属性、フォーカス管理、キーボードコントロールを追加する
これらのコンポーネントの色をWCAG 2.1 AAコントラスト比要件(最小4.5:1)を満たすように更新する
適切なARIAランドマーク、キーボードナビゲーション、スクリーンリーダーサポートを備えたアクセシブルなナビゲーションメニューを構築する
最佳實務
- htmlForとid属性を使用して、フォーム入力フィールドに常に適切なラベルを含める
- 出荷前にキーボードのみのナビゲーションでコンポーネントをテストする
- ARIAを持つdivの代わりに、セマンティックHTML要素(nav、main、button)を使用する
避免
- 適切なbutton要素の代わりに、onClickハンドラーを持つdivを使用しない
- テキストやアイコンの代替手段なしに、色のみのインジケーターを避ける
- カスタムフォーカスインジケーターを提供せずにフォーカスアウトラインを削除しない