アクセシビリティ

§18-01

Skip to content link

Tab 1 回で本文へ移動するリンク。

キーボード利用者が毎ページ長いナビゲーションを通過せずに本文へ到達できる。ヘッダーにリンクが多いサイトほど効果が大きい。

実装のポイントbody 先頭に置き、通常は画面外に隠して :focus 時だけ表示する。リンク先の本文要素に tabindex="-1" を付けると、移動後のフォーカスが確実に本文へ移る。

§18-02

Visible focus ring

キーボード操作中の要素を枠で目立たせる。

キーボードで操作している人が、今どこにいるかを見失わないようにする。マウスを使わない利用者には必須で、全ての操作可能な要素に適用する。

実装のポイント:focus-visible を使うとマウスクリックでは出さずキーボード操作時だけリングを出せる。outline を消すなら必ず代替のリングを付け、背景とのコントラスト 3:1 を確保する。

§18-03

キーボードショートカット一覧 (?)

「?」キーでショートカットの一覧を表示する。

キーボード操作を覚えたい利用者が、その場で一覧を確かめられる。操作頻度が高いツールで、慣れた人の速度を上げたいときに使う。

実装のポイントkeydown で「?」を拾うときは input や textarea、contenteditable にフォーカス中は無視する。一覧は OS に応じて Cmd/Ctrl の表記を切り替える。

§18-04

ARIA live region

画面の動的な変化を支援技術に読み上げさせる。

保存完了やエラーなど画面上で変わった内容をスクリーンリーダー利用者に伝える。視覚的な通知だけでは気づけない問題に効く。

実装のポイントlive region は空の状態で先に DOM に置き、後から中身を差し替える。通常は aria-live="polite" で割り込まず読ませ、assertive はエラーなど緊急時に限る。

§18-05

prefers-reduced-motion 尊重

OS の動き抑制設定に従いアニメーションを控える。

動きで体調を崩す利用者や集中を妨げられたくない人に配慮する。装飾的なアニメーションを持つサイト全般で守るべき設定。

実装のポイントCSS は @media (prefers-reduced-motion: reduce)、JS は matchMedia の change を購読して追従する。動きは消すだけでなく穏やかな代替に置き換える。

§18-06

高コントラストモード

配色を強めて文字と背景の差を大きくする。

弱視や強い日差しの下でも文字と境界を見分けられるよう、配色の差を強める。見た目を選べない人のための設定で、公共性の高いサービスでは必須。

実装のポイントOS 設定は prefers-contrast: more と forced-colors: active で検出する。forced-colors 下では背景色が無視されるので境界は border で示す。

§18-07

文字サイズ調整 (A− A+)

ボタンで本文の文字サイズを拡大・縮小する。

ブラウザ設定を変えられない利用者でも、読みやすい大きさに調整できる。高齢者や視力の弱い人が多い読み物中心のサイトに向く。

実装のポイントルートの font-size を変え、本文を rem で組んでおくと全体が比例して拡大する。選んだ倍率は localStorage に保存し、初回描画前に適用してちらつきを防ぐ。

デモはフォント / 文字サイズ調整と共通です。

§18-08

読み上げモード切替

本文を音声で読み上げるモードに切り替える。

読むのが難しい状況や視覚に負担がある利用者に本文を届ける。長い記事や移動中の利用で、画面を見続けられない場面に向く。

実装のポイントSpeechSynthesisUtterance に lang を指定し、停止時やアンマウント時は speechSynthesis.cancel() を呼ぶ。読み上げ対象は表示中の本文から取得し、再生中の段落を強調する。