ウェブサイトをマウスだけ、音声だけ、一つのメニューだけで利用する設計にすると、その方法を使えない人は情報や機能にたどり着けません。
同じ目的を複数の方法で達成できるようにしておけば、利用者は自分の環境や操作方法に合う手段を選べます。
この記事でいう複数の手段とは、情報の受け取り方、操作方法、ページの探し方を一つに限定しない設計です。
キーボード操作、明確なラベル、字幕や文字起こし、検索やサイトマップなどを組み合わせ、特定の感覚や機器だけに依存する箇所を減らします。
一つの方法に依存すると何が起きるか
利用者によって、使いやすい入力機器や情報の受け取り方は異なります。
そのため、見た目では使いやすい画面でも、操作方法や情報の伝え方が一つしかなければ、別の環境では利用できないことがあります。
| 依存している方法 | 生じる困りごと | 用意したい手段 |
|---|---|---|
| 画面上の位置や見た目だけで伝える | 画面を見にくい利用者に、内容や操作対象が伝わらない | 見出し、テキストラベル、画像の代替テキスト |
| マウス操作だけに対応する | マウスを使いにくい利用者が、リンクやボタンを操作できない | キーボード操作、対応している環境での音声入力 |
| 音声だけで情報を伝える | 音声を聞けない利用者や、音を出せない環境の利用者に内容が届かない | 字幕、文字起こし、本文による要約 |
| 一つのメニューだけでページを探す | そのメニューを理解しにくい、または操作しにくい利用者が目的のページを見つけにくい | 検索、サイトマップ、関連リンク、パンくずリスト |
代替手段は、元の方法を取り除くためのものではありません。
マウスに加えてキーボードでも操作できるようにするなど、選択肢を増やす考え方です。
複数の手段を設計する四つのポイント
1．キーボードだけで機能を使えるようにする
リンク、ボタン、入力欄などは、マウスを使わなくても到達して操作できるようにします。
Tabキーでフォーカスを移したときに現在位置が見え、ページ内の順序に沿って移動できるかを確認します。
確認するのは、単にフォーカスが当たるかどうかだけではありません。
ボタンを実行できること、入力欄に値を入れられること、開いたメニューや画面から抜けられることまで試します。
実装と確認の要点は、キーボード操作とフォーカス表示の整え方でも解説しています。
共通のヘッダーやメニューを何度も通過するページでは、本文へ直接移動できるスキップリンクも移動の負担を減らします。
2．操作対象の名前とページ構造を明確にする
スクリーンリーダーは、画面上のテキストや構造を音声などで伝える支援技術です。
見た目だけで意味を示したボタンやリンクは、読み上げても目的が分からないことがあります。
仕組みと対応方法は、スクリーンリーダーの基本で確認できます。
リンクやボタン、フォームには、その役割や行き先が分かるテキストラベルを付けます。
「ボタン」「リンク」だけではなく、「送信」「次のページ」のように、操作の結果を予測できる名前にします。
一方、代替テキストは主に画像の内容や目的を文字で伝えるものです。
操作部品のラベルと画像の代替テキストを同じものとして扱わず、それぞれの対象に合う説明を用意します。
画像ごとの判断方法は、代替テキストとalt属性の基本にまとめています。
3．音声と動画には文字でも内容を用意する
動画の音声で伝えている会話や必要な音の情報には、時間に合わせて表示される字幕を用意します。
音声コンテンツには、内容を文字で読める文字起こしを添えると、音声を聞けない場合にも情報を確認できます。
字幕と文字起こしは役割が異なります。
字幕は動画の進行に合わせて音声情報を伝え、文字起こしは音声の内容を独立した文章として読めるようにします。
動画の操作性を含む確認項目は、アクセシブルな動画掲載のポイントで詳しく説明しています。
4．目的のページを複数の方法で探せるようにする
主要なナビゲーションに加えて、サイト内検索やサイトマップなどを用意すると、利用者は自分が理解しやすい方法でページを探せます。
パンくずリストは現在位置を把握する助けになり、本文中の関連リンクは次に必要な情報へ進む手掛かりになります。
ここで注意したいのは、WCAGにおける「複数の手段」は、代替入力や字幕をすべてまとめた名称ではないことです。
達成基準2.4.5「複数の手段」は、一連の手順の結果として表示されるページなどを除き、サイト内のページを見つける方法を二つ以上用意することを求めています。
WCAG 2.2で対応箇所を整理する
キーボード、字幕、ナビゲーションは、WCAGでは別々の達成基準として整理されています。
分けて把握すると、何を実装し、どの方法で試験するのかが明確になります。
| 達成基準 | 確認する内容 |
|---|---|
| 2.1.1 キーボード | 動作の軌跡そのものが必要な機能などを除き、コンテンツの機能をキーボードインターフェースで操作できるか |
| 1.2.2 字幕（収録済み） | 収録済みの同期メディアに含まれる音声情報へ字幕を用意しているか |
| 2.4.5 複数の手段 | 対象となるページを見つける方法を二つ以上用意しているか |
ガイドラインに沿うことは確認の土台になりますが、達成基準だけで個々の利用者のニーズをすべて満たせるとは限りません。
実際のページを操作し、情報と機能が別の手段でも利用できるかを確かめる作業が必要です。
公開前に行う確認手順
- キーボードで操作する：マウスを使わずにTabキーとShift＋Tabキーで移動し、フォーカスの位置、移動順、リンクやボタンの実行、フォーム入力、開いた画面からの退出を確認します。
- スクリーンリーダーで読む：見出しの順序を一覧し、リンクやボタンの名前だけで目的が分かるか、画像の代替テキストが内容や目的を伝えているかを確認します。
- 音声を止めてメディアを確認する：動画の内容が字幕で分かるか、音声コンテンツの内容を文字でも読めるかを確認します。
- 別の経路でページを探す：主要メニューとは別に、検索やサイトマップなどから同じページへ到達できるかを確認します。
- 一連の操作を最後まで試す：ページ単位で終わらせず、情報を探してから操作を完了するまで、途中で一つの方法だけに依存する箇所がないかを確認します。
問題が見つかった場合は、まず「操作できない」「内容を受け取れない」状態を解消します。
その後、ラベルや移動順を整え、利用者が迷いにくい構造へ改善します。
複数の手段を選べる設計へ
アクセシビリティ対応は、一つの補助機能を追加すれば完了する作業ではありません。
操作、情報提示、ページ探索のそれぞれに代替手段を用意し、実際の利用手順で確かめることで、特定の機器や感覚に依存する箇所を減らせます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。