accessibility-compliance

概要

accessibility-complianceとは？

accessibility-complianceは、アクセシブルなユーザーインターフェースの実装、監査、保守が必要なフロントエンド開発者向けの実践的なスキルです。WCAG 2.2のガイドライン、ARIAパターン、キーボードナビゲーション、スクリーンリーダー対応、モバイルアクセシビリティに重点を置いています。このスキルを使うことで、障害のある方を含むすべてのユーザーが使いやすいWebやReactプロジェクトを実現できます。

どんな人におすすめ？

• UIコンポーネントの構築やリファクタリングを行うフロントエンドエンジニア
• WCAG 2.2のLevel AAまたはAAA準拠を目指すチーム
• ARIAのロール、状態、プロパティを追加する開発者
• アクセシビリティ監査やインクルーシブデザインを担当する方

解決できる課題

• インターフェースを知覚可能、操作可能、理解可能、堅牢に保つ
• 実践的なARIAパターンやモバイルアクセシビリティ技術を提供
• キーボード、スクリーンリーダー、タッチユーザー向けの設計を支援
• 法的・組織的なアクセシビリティ基準の遵守をサポート

使い方

インストール手順

1. 以下のコマンドでエージェントやプロジェクトにスキルを追加します：

   npx skills add https://github.com/wshobson/agents --skill accessibility-compliance
   

2. SKILL.mdファイルから始めて、accessibility-complianceの機能とワークフローの概要を把握してください。

3. 実装の詳細は以下の補助ファイルを参照してください：

   • references/aria-patterns.md：Reactの例を含むARIAのロール、状態、プロパティ
   • references/mobile-accessibility.md：モバイルのタッチターゲットのサイズ、間隔、スクリーンリーダー対応
   • references/wcag-guidelines.md：WCAG 2.2の原則、適合レベル、コードサンプル

プロジェクトへの適用

• 提供されるパターンは参考例として利用し、コードベースやUIフレームワークに合わせてARIAやキーボードナビゲーション、モバイルアクセシビリティの技術を調整してください。
• カスタムコンポーネントやフォームを作成する際は、アクセシビリティチェックを開発ワークフローに組み込みましょう。
• VoiceOver、TalkBack、NVDAなどの実際の支援技術やキーボード操作でテストしてください。

accessibility-complianceを使うタイミング

• アクセシビリティ問題の監査や修正を行うとき
• インクルーシブデザインの新しいUIコンポーネントを構築するとき
• モバイルとデスクトップのアクセシビリティの整合性を確保するとき
• 組織や法的なアクセシビリティ要件を満たす必要があるとき

よくある質問

accessibility-complianceは何をカバーしていますか？

このスキルはWCAG 2.2のガイドライン、ARIAパターン、キーボードナビゲーション、フォーカスマネジメント、アクセシブルなフォーム、モバイルのタッチターゲット、スクリーンリーダー対応をカバーしています。ReactやWebプロジェクト向けのコード例とベストプラクティスを提供します。

どこから始めればいいですか？

まずはSKILL.mdで概要を把握し、その後references/フォルダ内の詳細なパターンやコードサンプルを確認してください。特にreferences/aria-patterns.mdとreferences/mobile-accessibility.mdは実装に役立ちます。

このスキルはReact専用ですか？

多くの例はReactを使っていますが、原則やパターンはどのフロントエンドフレームワークやバニラHTML/JSプロジェクトにも適用可能です。

WCAG準拠を保証しますか？

いいえ。accessibility-complianceはガイダンスとパターンを提供しますが、各自の環境に合わせて適用・テストする必要があります。必ず実際のユーザーや支援技術で検証してください。

追加のリソースはどこで見つけられますか？

references/フォルダに厳選されたガイドやコードサンプルがあります。ファイル一覧はAgent Skills FinderのFilesタブで確認できます。