スクリーンリーダープレビュー

二次元から一次元へ

目で見れば、ページは一度に把握できます。左上にロゴ、横にメニュー、中央に記事、右にサイドバー。音声では「一度に」はできません。NVDA、JAWS、VoiceOver、TalkBackなどのスクリーンリーダーは、ソースの順番どおりにHTMLをたどり、要素を一つずつ、テキストの前にその役割を付けて読み上げます。「見出しレベル2、料金」「リンク、お問い合わせ」「編集、メール、必須」のようにです。

これを最初から最後まで聞き通す人はいません。慣れた利用者は種類ごとに移動します。あるキーで次の見出しへ飛び、別のキーでページ内のリンクをすべて一覧にし、また別のキーでメインのランドマークへ直行します。つまり彼らにとっては、各要素の役割と名前がインターフェースのすべてです。画面上では一目でわかるボタンでも、テキストがなければ「ボタン」と読み上げられ、聞こえるのはそれだけです。

書き起こしの作り方

当サーバーはページを一度ダウンロードし、支援技術と同じように <body> をたどります。ページを開いたときに最初に読み上げられるのは <title> なので、これを先頭に置きます。そのあと、各要素が1行になります。

• ランドマーク：バナー、ナビゲーション、メイン、補足、コンテンツ情報、検索、および名前付きの領域とフォーム。
• レベル付きの見出し、リンク先付きのリンク、状態（展開、折りたたみ、押下）付きのボタン。
• 種類と状態付きのフォームの入力欄：「チェックボックス、未チェック」「コンボボックス」「編集、メール、必須」。
• 画像、フレーム、項目数付きのリスト、行数と列数付きの表。

各要素の名前は、ブラウザーと同じ順番で決めます。aria-labelledby、次に aria-label、次に本来のソース（alt、<label>、テキスト内容）、最後に title です。hidden、aria-hidden="true"、インラインの display:none が付いたものは除外し、閉じた <details> の中身も同様です。alt="" の画像は読み飛ばし、装飾として数えます。

「再生」を押すと、ブラウザーの音声エンジンが各行を読み上げます。役割は英語で読み上げられます。内容は、端末に該当する音声があれば、ページの lang 属性に合った音声で読み上げられ、独自の lang が指定された部分では音声が切り替わります。

指摘の意味

赤の指摘は、その要素に名前がまったくないことを示します。黄色の指摘は、名前はあるものの役に立たないことを示します。概要では、ページの言語、<h1>、メインのランドマークがない場合にも報告し、メインのコンテンツの前にいくつの要素があるかを示します。この数が多いと、どのページを訪れても毎回、同じ長いメニューの読み上げから始まることになります。

フィルターの3つの使い方

1. 見出しを選び、その一覧だけを読んでください。ページの目次として機能するはずです。
2. リンクを選んでください。どの行も、前後の文がなくても意味が通じる必要があります。
3. 入力欄とボタンを選び、目を閉じて「再生」を押してください。各操作部品が何を求めているか、わかるはずです。

どの行を選んでも、そこから読み上げをやり直せます。速度のスライダーを使うと、普段の利用者が選ぶペースを体感できます。通常の話し言葉よりかなり速いことが多いです。

既知の欠けがある、近似です

書き起こしは、サーバーが送ったままのHTMLから作ります。JavaScriptは実行せず、スタイルシートも適用しないため、スクリプトで追加された内容は欠け、CSSのクラスで隠された内容は読まれてしまいます。聞き取り時間は、1分あたり約170語として見積もった目安です。非常に長いページは1,200要素で止まります。実際のスクリーンリーダーはそれぞれ独自の言い回しとショートカットを持っているので、公開前に少なくとも一つで試してください。NVDAはWindows向けに無料で、VoiceOverはmacOSとiOSに標準で入っています。