アクセシビリティ対応
AIにアクセシビリティ問題を検出させ、修正を依頼することで、すべてのユーザーが使いやすいアプリを作ります。
AIにa11y診断を依頼
コンポーネントの診断
以下のコンポーネントのアクセシビリティ問題を指摘してください。
```tsx
<div onClick={handleClick} className="button">
<img src="/icon.png" />
送信
</div>
```
WCAG 2.1 レベルAAに準拠するよう修正してください。
問題点
- ✗ div は button ではない（キーボード操作不可）
- ✗ img に alt がない
- ✗ role 属性がない
修正後
<button
onClick={handleClick}
className="button"
aria-label="フォームを送信"
>
<img src="/icon.png" alt="" aria-hidden="true" />
送信
</button>
主要なチェックポイント
キーボード操作
- ・Tabで全要素にフォーカス可能
- ・Enterでボタン・リンクを実行
- ・Escapeでモーダルを閉じる
スクリーンリーダー
- ・適切な見出し階層（h1→h2→h3）
- ・画像にalt属性
- ・フォームにlabel
色とコントラスト
- ・コントラスト比 4.5:1 以上
- ・色だけで情報を伝えない
ARIA属性
- ・role で要素の役割を明示
- ・aria-label で説明を追加
- ・aria-live で動的更新を通知
自動テスト
jest-axe でテスト
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('アクセシビリティ違反がないこと', async () => {
const { container } = render(<MyComponent />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
まとめ
- ✓AIに診断を依頼 - 問題点を洗い出す
- ✓セマンティックHTML - 適切な要素を使う
- ✓自動テスト - jest-axe で継続的に検証