ページ ナビゲーションにおけるセマンティクスの役割
アフォーダンス、セマンティクス、支援技術がユーザー補助ツリーを使用してユーザーに代替のユーザー エクスペリエンスを作成する方法について学習しました。多くの標準要素にはセマンティクスとサポート動作の両方が組み込まれているため、表現力豊かでセマンティックな HTML を記述すると、ほとんど労力をかけずに多くのユーザー補助機能を実現できます。
このレッスンでは、スクリーン リーダーのユーザーにとって非常に重要で、しかしわかりづらいナビゲーションに関するセマンティクスについて説明します。コントロールは多くてもコンテンツが少ないシンプルなページでは、簡単にページをスキャンして必要なものを見つけられます。しかし Wikipedia のエントリやニュース アグリゲータなど、コンテンツが非常に多いページで上から順にすべての情報を読み取るのは実用的ではありません。コンテンツを効率良くナビゲーションする方法が必要です。
デベロッパーがよく誤解しているのは、スクリーン リーダーはわずらわしく速度が遅すぎるとか、画面上のすべての情報をスクリーン リーダーでフォーカスおよび検索できるようにする必要がある、という点です。これは、ほぼ事実ではありません。
スクリーン リーダーは多くの場合、見出しのリストを使用して情報を見つけます。ほとんどのスクリーン リーダーには、ページの見出しのリストを容易に区別してスキャンできる、ローターと呼ばれる重要な機能が備わっています。この機能をサポートするために、効果的に HTML の見出しを活用する方法を見てみましょう。
見出しを効果的に使用する
最初に、フォーカスの順序だけでなくスクリーン リーダーの順序にもDOM 順序が影響する点についてもう一度説明します。VoiceOver、NVDA、JAWS、ChromeVox といったスクリーン リーダーで実際に試すとわかりますが、見出しのリストは視覚的順序よりも DOM 順序に従います。
スクリーン リーダーは全般的にそのようになっています。スクリーン リーダーはアクセシビリティ ツリーとやり取りし、アクセシビリティ ツリーは DOM ツリーに基づいているため、スクリーン リーダーが受け取る順序は直接 DOM 順序に基づいています。つまり、適切な見出し構造がより重要になります。
適切な構造を持つページでは、見出しのレベルがネストされ、コンテンツ ブロック間の親子関係が示されています。WebAIM チェックリストでも、このテクニックについて何度も取り上げています。
- 1.3.1 に「セマンティックなマークアップは見出しを指定するために使用」と記載
- 2.4.1 は、コンテンツ ブロックをバイパスする手法として見出し構造に言及しています。
- 2.4.6 で、有用な見出しの記述方法の詳細について説明しています。
- 2.4.10 「コンテンツの個々のセクションは、状況に応じて見出しを使用して指定します」と記載されています。
すべての見出しを画面に表示する必要はありません。たとえば Wikipedia では、スクリーン リーダーなどの支援技術のみがアクセスできるように、意図的に見出しを画面外に配置するテクニックを使用しています。
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
複雑なアプリケーションの場合、視覚的デザイン上、見出しを表示するスペースを必要としない、またはスペースがない場合に、この方法で見出しを表示できます。
その他のナビゲーション オプション
適切な見出しが付けられたページはスクリーン リーダーのユーザーがナビゲートする際に役立ちますが、リンク、フォーム コントロール、ランドマークなど、ページ内の移動に活用されている要素は他にもあります。
リーダーはスクリーン リーダーのローター機能（ページの見出しのリストを容易に区別およびスキャンする方法）を使用して、ページ上のリンクのリストにアクセスできます。Wiki のように多数のリンクがあるため、読者がリンク内の用語を検索する場合があります。これにより、ページ上で繰り返し使われているすべての用語ではなく、実際にその用語を含むリンクのみを検索するように制限できます。
この機能は、スクリーン リーダーがリンクを見つけることができ、リンクテキストが意味をもっている場合にのみ有用です。リンクが見つかりにくくなる一般的なパターンの例を以下に示します。
href属性のないアンカータグ。主にシングルページ アプリケーションで使用されています。このようなリンク ターゲットは、スクリーン リーダーにとって問題になります。詳しくは、シングルページ アプリケーションに関するこちらの記事をご覧ください。- リンク付きで実装されているボタン。スクリーン リーダーがコンテンツをリンクとして解釈し、ボタンの機能が失われます。このような場合は、アンカータグを実際のボタンに置き換え、適切なスタイルを設定します。
- リンクのコンテンツとして使用されている画像。必要なリンク付きの画像がスクリーン リーダーで使用できない場合があります。支援技術にリンクが適切に表示されるようにするには、画像に
alt属性テキストを指定します。
情報不足のリンクテキストも問題になります。「詳細」や「こちらをクリック」といったクリック可能なテキストは、リンク先に関するセマンティックな情報がありません。代わりに、「レスポンシブ デザインに関する詳細」や「こちらの canvas チュートリアルを参照」のようなテキストを使用し、スクリーン リーダーがリンクについて意味のある情報を提供できるようにします。
ローターは、フォーム コントロール リストも取得できます。このリストを使用すると、リーダーは特定の項目を検索して直接アクセスできます。
スクリーン リーダーでよく起こるエラーは、発音です。たとえば、スクリーン リーダーが「Udacity」を「オーダシティ」と発音したり、電話番号を大きな数値のように読み上げたり、大文字のテキストを略語のように読むことがあります。興味深いことに、スクリーン リーダーのユーザーはこうした特徴に慣れていて、考慮する必要があります。
デベロッパーによっては、音声学に従ってスペルを記述したスクリーン リーダー専用のテキストを用意して、この状況の改善に努めています。以下に、発音のつづりに関する簡単なルールを示します。「しないでください。」です。この方法では、問題が悪化します。たとえば、点字ディスプレイのユーザーにとって、誤ったスペルの単語は混乱の元になります。スクリーン リーダーを使用すると、単語のスペルを読み上げることができるため、 読者側で操作を制御し、必要なタイミングを判断できます。
リーダーはローターを使用して、ランドマーク リストを参照できます。このリストは、リーダーがメイン コンテンツと、HTML ランドマーク要素で指定されたナビゲーション用のランドマークを特定するために役立ちます。
HTML5 では、header、footer、nav、article、section、main、aside など、ページのセマンティックな構造を定義するために活用できる新しい要素が導入されました。これらの要素は、組み込みのスタイルを適用することなく、ページの構造上の手がかりとなります（いずれにせよ CSS で行うようにしてください）。
セマンティックな構造を持つ要素は、繰り返し登場する div ブロックに置き換わり、より明確かつ情報量の多い形で作成者と読者の両方に対してページの構造を直感的に示します。