本文へ移動

§18

アクセシビリティ

Accessibility

Patterns
10
Demos
10

§18-02

Visible focus ring

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

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

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

  • CSS のみ
  • キーボード操作
  • アクセシビリティ
詳細

§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 を購読して追従する。動きは消すだけでなく穏やかな代替に置き換える。

  • アクセシビリティ
  • ブラウザ API
詳細

§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() を呼ぶ。読み上げ対象は表示中の本文から取得し、再生中の段落を強調する。

  • ブラウザ API
  • アクセシビリティ
詳細

§18-09

色覚多様性配慮 (パターン併用)

色に加えて模様や形で状態を区別する。

色の区別が難しい利用者でも、グラフや状態表示を正しく読み取れる。系列が多いグラフや成功・失敗の表示で使う。

実装のポイント状態は色に加えてアイコン、形、テキストの少なくとも 1 つで区別する。グラフでは塗りにハッチングや破線を併用し、凡例にも同じ記号を載せる。

  • CSS のみ
  • アクセシビリティ
詳細

§18-10

字幕 / 音声説明 (動画)

動画に字幕と音声説明を付けて再生する。

音を出せない環境や聴覚に障害がある人にも動画の内容を届ける。音声説明は画面を見られない人に映像の情報を補う。

実装のポイントvideo 要素に track kind="captions" で WebVTT を読み込み、::cue で見た目を整える。音声説明は kind="descriptions" か別音声トラックで用意する。

  • アクセシビリティ
詳細