Accessibility Ally Skill
このスキルは、アプリケーションを「誰にとっても使いやすく」するためのガイドです。 スクリーンリーダー対応、キーボード操作性、配色のコントラストなど、アクセシビリティ（a11y）の観点からコードを診断します。
主な機能
- •
Semantic HTML Check (セマンティックチェック)
- •適切な HTML タグが使われているか検証します（例: クリック可能な要素は
divではなくbuttonやa）。 - •画像に
alt属性があるか、フォーム要素にラベル（label/aria-label）が紐付いているかを確認します。
- •適切な HTML タグが使われているか検証します（例: クリック可能な要素は
- •
Keyboard Navigation (キーボード操作)
- •マウスを使わずに Tab キーや矢印キーだけで操作可能かどうかの観点でコードを見直します。
- •フォーカス順序（
tabIndex）が論理的か、フォーカスインジケータ（outline）が消されていないかを確認します。
- •
Visual Accessibility (視覚的アクセシビリティ)
- •文字色と背景色のコントラスト比が WCAG 基準（AA/AAA）を満たしているか推測・確認します。
- •色情報だけに頼った表現（例: 「赤色のボタンを押して」）がないかチェックします。
使用例
- •「アクセシビリティチェックをして」
- •「キーボードで操作できるようにしたい」
- •「スクリーンリーダーでどう読み上げられるか確認して」
検証ツール・コマンド例
- •
eslint-plugin-jsx-a11yのルール準拠確認 (pnpm lint) - •ブラウザの開発者ツール（Lighthouse, Axe）での診断推奨