アクセシビリティ

誰でも使えるための最低ラインです。これを下回る画面は出しません。

最低ライン

項目	決まり
文字のコントラスト	本文・ラベルは 4.5 : 1 以上。24 px 以上の大きい文字とアイコンは 3 : 1 以上
押せるところ	44 × 44 px 以上（決まりの中で最も厳しい値に合わせています）
フォーカス	キーボードのフォーカスの輪（2 px、外側に 2 px 空ける）をいつも見せる。固定の帯や島の下に隠さない
見出し	h1 は 1 つ。h2・h3 を飛ばさない
色	色だけで意味を伝えない。言葉・形・アイコンを添える
拡大	文字を 200% にしても欠けない。ピンチで拡大できる
幅	320 px まで縮めても横に流れない
動き	「動きを減らす」設定では動きを止める
透明	「透明度を下げる」設定では透けない地にする
図	図には要点の読み上げと、元の数字の表を付ける

読み上げ

• 案内のまとまりには名前を付けます（「目次」「素早い移動」「パンくず」）。
• 今いる場所には aria-current を付けます。
• 飾りのアイコンは読み上げません。アイコンだけのボタンには名前を付けます。
• 件数のバッジは、名前と一緒に読み上げます（「お知らせ 3 件」）。
• 「保存しました。」などの知らせや、8 秒たった読み込みの知らせは、読み上げにも伝えます。
• 失敗したのに何も読み上げられない「黙った失敗」は、不具合として扱います。

キーボード

• すべての操作を、キーボードだけでできるようにします。
• シートやダイアログを開いたら、フォーカスはその中だけを回ります。Esc で閉じ、開いたボタンにフォーカスを戻します。
• 本文へ飛ぶリンク（「本文へ移る」）を最初に置きます。

確かめ方

自動の検査（製品ごとに入れています）

• すべての画面を、明るい表示・暗い表示、パソコンとスマートフォンの幅で自動検査します（WCAG 2.2 AA）。
• 色の組み合わせのコントラストを、色の値を変えるたびに検査します。
• 44 px より小さい押せるところの数を数え、増えたら止めます。

人の目での確認（大きな変更のとき・公開の前）

• iPhone の VoiceOver と Android の TalkBack で、読み上げの順番と名前を確かめる。
• いちばん大きい文字の設定で、欠けないかを確かめる。
• 横向き、ピンチでの拡大、「透明度を下げる」設定を確かめる。

基準

WCAG 2.2 の AA を基準にし、押せるところの大きさなど、より厳しい決まりがあるものはそちらに合わせます。