支援技術を使って、人はどうウェブを使うか
スクリーンリーダー、画面拡大、読み上げや表示の調整、音声操作、スイッチ、視線、キーボードで、人がページをどうたどり、それぞれがページに何を必要とするか
要点:同じページでも、使い方はまったく異なります。スクリーンリーダーはページを、見出し、リンク、ランドマークでたどる一続きの読み上げに変え、画面拡大ソフトは一度にページの一部だけを見せ、音声操作は画面に見えている名前で操作し、スイッチは項目を一つずつ順にたどります。どの使い方にも必要なのは、コードに構造があること、見えている文字と一致する名前があること、そして特定のポインター操作でしか動かないものがないことです。
01
使う場面
あるチームが、スポーツセンターのクラス時間割のページを作っています。ヘッダーには12個のリンクがあり、時間割には8つのクラスが並び、それぞれに「詳細」のリンクと「予約」のボタンがあります。料金の横には会員割引を説明する小さな「?」があり、センターを案内する2分の動画も載っています。デザイナーは、マウスも画面も使わない人がこのページをどうたどるのかを知りたがっていて、開発者は「スクリーンリーダーで確認しておきます」と答えます。
スクリーンリーダーは、いくつもある道具の一つです。そして道具ごとに使い方が異なります。この記事では、それぞれの使い方と、それぞれがページに何を必要とするかを説明します。
02
スクリーンリーダー:読む、入力する、構造でたどる
スクリーンリーダーは、ページを音声や点字、またはその両方に変えます。Windowsでは、2つのモードを使い分けます。
| モード | NVDAでの名前 | キーの働き |
|---|---|---|
| 読む | ブラウズモード | コンテンツはフラットに表現され、「通常のテキストドキュメントと同じように矢印キーを使って移動」できる。文字キーで次の見出し、リンク、入力欄へ移る |
| 入力する | フォーカスモード | 「ほとんどのキー入力をコントロールに直接渡す」ため、入力欄に文字を入れたり、ウィジェットの矢印キーを使ったりできる |
NVDAのユーザーガイドによれば、Tabキーやクリックでフォーカスモードが必要なコントロールに移ると自動的にフォーカスモードになり、不要な箇所に移るとブラウズモードに戻ります。日本ではNVDA日本語チームが配布するNVDA日本語版が使われ、ユーザーガイドも日本語で読めます。JAWSでは入力するモードをフォームモードと呼びます。MacのVoiceOverにはモードがなく、項目の中に入って操作します。ARIAの application ロールは、キーを横取りする支援技術に、キー入力をページへ渡すモードへ切り替えるよう求めています。その代わりARIAは、中にあるテキストや画像をすべて、フォーカスできる要素を通じて読めるようにすることを求めています。フォーカスできる要素にしか届かない利用者がいるためです。
長いページを先頭から読む人は多くありません。WebAIMの調査#11(2026年)は、長いページで情報を探すときに最初に何をするかを尋ねています。
| 長いページで最初にすること | 回答者の割合 |
|---|---|
| 見出しを順にたどる | 67.8% |
| ページ内検索を使う | 12.5% |
| ページを先頭から読む | 9.7% |
| リンクを順にたどる | 6.7% |
| ランドマークを順にたどる | 3.4% |
日本の国立国会図書館が2015年に行った調査(複数回答可)でも、同じ問いに対して見出しが最も多く挙がっています。
| とても長いページで最初にすること | 回答者の割合 |
|---|---|
| 見出しを順に移動する | 60.38% |
| リンクを順に移動する | 52.83% |
| 上から順番に読む | 42.14% |
| ブラウザーのページ内検索を使う | 35.22% |
WebAIMの調査では、ランドマークがあれば必ず、またはよく使う人が28.3%、見出しのレベルがとても、またはある程度役に立つという人が88.3%でした。スクリーンリーダーは、これらを一覧にもまとめます。NVDAの要素リストはページのリンク、見出し、フォーム項目、ボタン、ランドマークを一覧にし、VoiceOverのローターはスワイプで移動する単位を選びます。一覧のリンクは周りの文章なしで読まれるため、8つとも「詳細」のリンクは見分けがつきません。どれも同じ「続きを読む」のリンクがこの問題です。
スマートフォンにはキーがありません。指で画面をなぞって指の下にあるものを聞き、左右にスワイプして項目を一つずつ移り、ダブルタップで実行します。VoiceOverでは2本指で画面上のダイヤルを回すように操作するローターで見出しやリンクを選び、上下にスワイプします。TalkBackには同じ役割の読み上げコントロールと、TalkBack 9.1以降は3本指のタップで開くTalkBackメニューがあります。作業ごとのキーとジェスチャーは、スクリーンリーダーの操作方法にまとめています。
点字ディスプレイは、ピンを上下させて、ふつう40〜80文字の点字を1行表示します。NVDAのユーザーガイドもAppleのiPhoneのガイドも、点字ディスプレイの使い方を載せています。盲ろうの人は、ページ全体をこの方法で読むことがあります。一方で、視覚障害のある人が皆、点字を読めるわけではないと、W3Cの資料は付け加えています。
03
画面拡大、読みやすさの調整、コントラストテーマ
画面拡大ソフトは画面の一部を大きくするため、利用者はページの小さな窓をのぞき、それを動かしながら読みます。1.4.13のUnderstanding文書は、拡大表示は一般にマウスポインターかキーボードフォーカスに追従するとしています。iPhoneのズーム機能にも、選択項目、テキスト挿入ポイント、入力を追跡する「カーソルに追従」の設定があります。もう一つの拡大方法がブラウザーのズームで、幅1,280ピクセルのウィンドウを400%にすると、ページが使える幅は320 CSSピクセルになります。狭い画面で横スクロールが出るページで説明しているとおりです。
拡大と音声を組み合わせる人も多くいます。W3Cの資料は、画面を拡大し、文字と背景の色を変え、読みながら音声合成で文章を聞くロービジョンの人を紹介しています。Windowsの拡大鏡には文章を読み上げる機能があり、AppleのガイドによればiPhoneのズーム機能はVoiceOverと一緒に使えます。
ページの一部しか見えないため、ホバーで現れる内容はその場にとどまる必要があります。Understanding文書は、追加された内容が大きいとき、拡大表示の利用者はそれを見るために表示を動かす必要があり、ポインターをトリガーから離しても内容が消えないのでなければ、それはできないとしています。また、ページを覆う内容は、ポインターやフォーカスを動かさずに閉じられる必要があります。近づくと消え、閉じられないツールチップがこの問題です。
読みやすさの調整は、画面に映る量ではなく、文章の見せ方を変えます。W3Cの資料は、読書支援として次のものを挙げています。
- 内容を読み上げ、読んでいる箇所を強調表示する音声合成
- フォントの種類、大きさ、間隔、文字と背景の色の変更
- ブラウザーのリーダーモードのように、サイドバーやヘッダーを隠す表示
1.4.12のUnderstanding文書は、利用者が文字の間隔を変える方法として、ユーザースタイルシート、ブックマークレット、拡張機能、アプリを挙げています。間隔を広げると文字が切れるレイアウトでは使えません。文字の間隔を広げると切れる、ボタンのラベルで扱っています。
コントラストテーマは、さらにすべての色を置き換えます。Windowsでは「設定」の「アクセシビリティ」にある「コントラスト テーマ」で選び、それに従うブラウザーはページにもテーマの色を当てます。これをCSSでは強制配色と呼びます。背景の塗り、ボックスシャドウ、固定したアイコンの色だけで示しているものは消えることがあります。ハイコントラストモードで消えるフォーカス・アイコン・選択状態で説明しています。
04
音声、スイッチ、視線、ヘッドポインター、キーボード
マウスもタッチスクリーンも使わない人も、すべてのコントロールに届く必要があります。届き方は道具ごとに違います。
| 道具 | ページでの操作 | ページに必要なこと |
|---|---|---|
| 音声操作:iPhoneとMacの音声コントロール、AndroidのVoice Access、WindowsのDragon | コントロールに書かれた言葉と、「タップ」や「クリック」などの操作を言う。音声コントロールとVoice Accessでは「番号を表示」ですべてに番号を付け、「グリッドを表示」で位置を指す。DragonのグリッドはMouseGrid | 見えている言葉で始まる名前:表示と名前が食い違うボタンとリンク |
| スイッチ:iPhoneのスイッチコントロール、Androidのスイッチ アクセス | スキャンで項目が一つずつハイライトされ、押すとハイライト中の項目を選ぶ | 内容までの手数が少ないこと。ドラッグ、ホバー、押し続ける操作が必要な機能がないこと |
| 視線:Windowsの視線制御、iPhoneの視線トラッキング | 視線追跡装置がポインターを動かし、項目をしばらく見つめ続けるとクリックになる | 狙える大きさの対象。ホバーでしか現れないものがないこと |
| ヘッドポインター | 頭の動きでポインターを動かしたり、代替キーボードのキーを押したりする | ボタンが一つのマウスと同じ条件で使えること。すべての操作がキーボードでもできること |
| キーボードだけ | Tabキーでコントロール間を移り、EnterキーやSpaceキーで押す | 見えるフォーカス、筋の通った順序、繰り返し現れるブロックを飛ばす手段:設置されていない、またはTabで届かないスキップリンク |
日本語のサイトでは、音声操作も日本語で試します。Appleの対応状況のページは音声コントロールの言語に日本語を挙げ、GoogleのヘルプもVoice Accessが日本語に対応しているとしています。Dragonのヘルプは、Web拡張機能を通じてリンクやボタンを声でクリックする方法を説明しており、MouseGridは画面を9つの番号付きの領域に分け、番号を言うたびに小さく描き直します。W3Cの資料は、キーボードだけを使う人が皆、画面を見られるわけではないとも付け加えています。同じキーボードの経路が、耳で聞いても分かる必要があります。
字幕、書き起こし、手話は、音を聞けない人のためのものです。W3Cの資料は字幕を、音声と同期した、話し言葉と話し言葉以外の音の情報のテキストと説明し、ろう者の誰もが手話を使うわけではないこと、手話は一つではないことにも触れています。それぞれをガイドで扱っています。字幕のない動画と、確認されていない自動字幕、書き起こしのないポッドキャストと無音の動画、手話通訳がない、または手話が小さすぎて読み取れない動画です。
05
支援技術、使い方の工夫、そして習熟度
W3Cの資料は、2つを分けています。
- 支援技術: スクリーンリーダー、画面拡大ソフト、音声認識、スイッチなどのソフトウェアやハードウェア
- 使い方の工夫: 文字を大きくする、マウスの速度を下げる、字幕をオンにするなど、一般的なソフトウェア、ブラウザー、スマートフォン、そして支援技術での工夫
WCAGの支援技術の定義の注記は、主流のユーザーエージェントと支援技術との区別は「絶対的なものではない」とし、多くの主流のユーザーエージェントが障害のある人を支援する機能を備えているとしています。ページは、どちらの道具でも、どちらの使い方でも動く必要があります。
道具と同じくらい、習熟度もさまざまです。WebAIMの回答者は、自分のスクリーンリーダーの習熟度を次のように答えています。
| 習熟度 | 回答者の割合 |
|---|---|
| 上級 | 57.8% |
| 中級 | 38.8% |
| 初級 | 3.4% |
長いページで最初に見出しをたどるのは上級者の72.1%、初級者では41.4%で、初級者がページ内検索から始める割合は上級者の2.7倍です。WebAIMは、標本を管理していないとしています。国立国会図書館も2015年の調査について、ICTスキルのかなり高い、いわゆるパワーユーザーが回答者の多くを占めたと推測されるとしています。日本の数字も、熟練した人に偏っている可能性があります。W3Cの資料は、道具が高価で手に入らない、インストールされていない、ある言語では使えないことがあり、解決策があることや、その設定や使い方を知らない人もいると付け加えています。すべてのショートカットを知る熟練者にしか使えないページは、多くの利用者にとって使えないページです。
EN 301 549の4.2は、これらの道具が支えるニーズを、できること、できないことで表しています。視覚を使わない利用、視覚が限られる利用、色を知覚しない利用など、全部で11項目です。各グループの説明と、それに関わるガイドは影響を受ける利用者にあります。その実装が実際に使われているスクリーンリーダーで動くかの確かめ方は、その実装が、実際に使われているスクリーンリーダーで動くかにあります。
06
実例
チームは時間割のページを、それぞれの使い方で試します。
| 使い方 | 時間割で起きること | ガイド |
|---|---|---|
| スクリーンリーダーで見出しをたどる | クラス名が太字のテキストのため、ページタイトルの後に見出しがない | ページの構成と食い違う見出し |
| スクリーンリーダーのリンク一覧 | 8つのリンクがすべて「詳細」 | どれも同じ「続きを読む」のリンク |
| キーボードだけ、またはスイッチで一つずつスキャン | 最初のクラスより前に、ヘッダーの12個のリンクがどのページにもあり、スキップリンクがない | 設置されていない、またはTabで届かないスキップリンク |
| 音声操作 | 「予約」のボタンに aria-label="席を予約する" があり、ボタンに書かれた「予約」を言っても見つからない |
表示と名前が食い違うボタンとリンク |
| 画面拡大ソフト | 「?」の割引の説明が、ポインターを近づけると消える | 近づくと消え、閉じられないツールチップ |
| ブラウザーのズーム400% | 時間割が右端からはみ出し、ページが横にスクロールする | 狭い画面で横スクロールが出るページ |
| Windowsのコントラストテーマ | 選んだ曜日が背景の塗りだけで示され、見えなくなる | ハイコントラストモードで消えるフォーカス・アイコン・選択状態 |
| 字幕 | 案内の動画に字幕がない | 字幕のない動画と、確認されていない自動字幕 |
見つかった問題は8つで、どれも直し方をガイドが扱っています。そしてどれも、ある利用者と同じ使い方でページを試して見つかったものです。
07
よくある間違い
- スクリーンリーダーをTabキーだけで試す。 Tabキーが届くのはフォーカスできる要素だけですが、利用者はブラウズモードで、見出し、リンク、ランドマークを使って読みます。作業ごとのキーはスクリーンリーダーの操作方法にあります。
- スクリーンリーダーの利用者を皆、熟練者と考える。 初級者がページ内検索から始める割合は上級者の2.7倍で、ショートカットを知らない人も多くいます。上の習熟度の表のとおり、どちらの使い方でも動く必要があります。
- 一つの形式で全員に届くと考える。 視覚障害のある人が皆点字を読めるわけではなく、ろう者が皆手話を使うわけでもありません。書き起こしのないポッドキャストと無音の動画と手話通訳がない、または手話が小さすぎて読み取れない動画が、それぞれの形式を扱っています。
- 見えている言葉を含まない
aria-label。 スクリーンリーダーでは自然に聞こえても、音声操作では押せなくなります。直し方は表示と名前が食い違うボタンとリンクにあります。 - ホバーでしか現れない内容。 画面拡大、視線、スイッチの利用者は、ポインターをトリガーの上に置き続けられません。直し方は近づくと消え、閉じられないツールチップにあります。
- 強制配色を切る。
forced-color-adjust: noneは、ほかの色を選んだ人にページ自身の色を戻してしまいます。代わりにどうするかはハイコントラストモードで消えるフォーカス・アイコン・選択状態にあります。 - ページ全体やパネル全体に
role="application"。 ARIAは、その中の静的なテキストや画像をすべて、フォーカスできる要素を通じて読めるようにすることを求めています。フォーカスできる要素にしか届かない利用者がいるためです。どのウィジェットのロールにも当てはまらない操作にだけ使います。
08
規格の定め
- WCAG 2.2の用語集「支援技術」(WCAGがこの用語を使う箇所での要件):WAICの日本語訳では「障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び/又はソフトウェア」。注記と例(画面拡大ソフト、スクリーンリーダー、音声合成ソフトウェア、音声認識ソフトウェア、ヘッドポインターやスイッチなどを使う代替キーボード、代替ポインティングデバイス)は参考情報です。JIS X 8341-3:2016の規格本文はWCAG 2.0と一致しているため、日本でも同じ定義が当てはまります。
- EN 301 549 V3.2.1の4.2(機能性能の記述。附属書Cは、4章は参考情報で、試験を要する要件を含まないとしています):例えば4.2.1は、視覚による操作方法がある場合に、視覚を必要としない操作方法を少なくとも一つ提供するとしています。4.1は、5章から13章の要件がこれらのニーズに対応する試験可能な基準であるとし、どれがどれに対応するかは附属書Bにあります。4.1の注記4は、利用者が必要とするモードに切り替える方法も、同じニーズを満たす必要があるとしています。この記事が引用しているのはV3.2.1(2021-03)です。ETSIは2026年9月にV4.1.1を発行し、そこでは4章が機能性能基準(Functional Performance Criteria)となり、4.2.1も、視覚を必要としない操作方法を少なくとも一つ提供しなければならない(shall)という書き方になっています。最新の版はETSIのサイトで確かめてください。
- Section 508の302(4章と5章が扱わない機能についての、米国連邦政府機関の要件。E204.1による):機能性能基準で、例えば302.1は、視覚による操作方法がある場合、視覚を必要としない操作方法を少なくとも一つ提供しなければならない(shall)としています。EN 301 549 V3.2.1の4.2は、ICTが何を提供するかを記述する書き方で、V4.1.1の4.2は同じく「shall」で書かれています。
- How People with Disabilities Use the Web(助言):W3Cによる道具と使い方の工夫の説明で、2024年6月25日に更新されています。要件ではなく説明です。
- 1.4.13と1.4.12のUnderstanding文書(助言):拡大表示の利用者にホバーで現れる内容がとどまる必要がある理由と、利用者が文字の間隔を変える方法を説明しています。
09
制限
この記事は、道具の使われ方を説明するもので、すべてのキーやジェスチャーは扱いません。それらはスクリーンリーダーの操作方法に、グループごとに使えなくなる問題は影響を受ける利用者にあります。製品の機能はリリースごとに変わるため、利用者が使っているバージョンの開発元の説明を確かめてください。道具を自分で試すと仕組みは分かりますが、毎日それに頼っている人の使い方は分かりません。また、一人の利用者がグループ全体を代表するわけでもありません。ページが法律や契約を満たすかどうかは、発注者と弁護士が判断します。
10
用語
- 支援技術
- ユーザーエージェントとして、またはユーザーエージェントと一緒に動き、一般的なブラウザーにはない機能を障害のある人に提供するハードウェアやソフトウェア。
- 使い方の工夫
- 文字を大きくする、マウスの速度を下げる、字幕をオンにするなど、ふつうの道具や支援技術を自分に合わせて使うこと。W3Cはadaptive strategiesと呼ぶ。
- ブラウズモード
- NVDAでページを読むためのモード。矢印キーや文字キーがページに渡らず、読み上げのカーソルを動かす。
- フォーカスモード
- NVDAで、ほとんどのキー入力をコントロールに直接渡すモード。入力欄に文字を入れたり、ウィジェット自身のキーを使ったりできる。
- ローター
- VoiceOverで、スワイプで移動する単位(見出し、リンク、フォームコントロールなど)を選ぶダイヤル。
- スキャン
- スイッチでの操作の仕組み。項目が一つずつ順にハイライトされ、スイッチを押すとハイライト中の項目が選ばれる。
- 強制配色
- コントラストテーマのCSSでの呼び名。ページの色が、利用者の選んだ少数の色に置き換えられる。
11
出典とガイド
- 参考 How People with Disabilities Use the Web (W3C WAI): Tools and Techniques:Perception、Presentation、Input、Interaction(新しいタブで開きます)
- 参考 EN 301 549 V3.2.1: 4.1 Meeting functional performance statements、4.2 Functional performance statements(新しいタブで開きます)
- 規定 WCAG 2.2: 6 用語集:支援技術(新しいタブで開きます)
- 規定 Section 508 (36 CFR 1194): 302 Functional Performance Criteria、E204.1(新しいタブで開きます)
- 参考 Understanding SC 1.4.13 Content on Hover or Focus: Intent:Dismissible、Hoverable(新しいタブで開きます)
- 参考 WebAIM Screen Reader User Survey #11: Screen Reader Proficiency、Finding Information、Landmarks/Regions(新しいタブで開きます)
関連するガイド
- ハイコントラストモードで消えるフォーカス・アイコン・選択状態 選択中の項目を背景の塗りだけで示し、フォーカスの枠を影で描き、アイコンの色を固定しているため、コントラスト テーマで3つとも消えてしまう
- 表示と名前が食い違うボタンとリンク ショップが「かごに入れる」ボタンそれぞれに商品名と「カート」を含む aria-label を付けたため、名前にボタン上の言葉が含まれず、音声操作でボタンを見つけられない
- 近づくと消え、閉じられないツールチップ ポップアップはボタンにポインターがある間しか表示されないうえ、ボタンから離れた位置に出て下の入力欄を覆い、Escapeキーにも反応しない
- 設置されていない、またはTabで届かないスキップリンク スキップリンクを display: none で隠したうえ、本文もただの div に置いているため、メニューを飛ばす手段がない
- 狭い画面で横スクロールが出るページ 列の幅が320ピクセルより狭くならないカードのグリッドは、ページの余白が加わると幅320ピクセルの画面に収まらず、すべてのカードが右端からはみ出してしまう
- 字幕のない動画と、確認されていない自動字幕 使い方の動画が手順を音声だけで伝えるのに、字幕がないか、誰も確認していない音声認識の字幕しかない
この記事は実務の進め方を、再現した例で説明するものです。法的な助言ではなく、特定の顧客についての指摘でもありません。