アクセシビリティ
ルール
- セマンティックHTML:
<button>、<nav>、<main>、<article>を使用 —<div onClick>は使わない - ARIA属性: セマンティックHTMLでパターンを表現できない場合のみ使用
- キーボードナビゲーション: すべてのインタラクティブ要素はキーボードで到達可能かつ操作可能でなければならない
- フォーカス管理: モーダルはフォーカスをトラップし、ルート変更時はフォーカスをコンテンツに移動する
- カラーコントラスト: 通常テキストは4.5:1、大きいテキスト(18px以上、または14px以上で太字)は3:1
- 画像のaltテキスト: すべての画像にaltテキストを設定 — 装飾画像には空の
alt="" - フォームラベル: すべての入力に
htmlForでリンクされた可視の<label>を付ける - スキップナビゲーションリンク: 最初のフォーカス可能要素として配置
- スクリーンリーダーテスト: VoiceOver(Mac)または NVDA(Windows)でテストする