ページ ナビゲーションにおけるセマンティクスの役割
アフォーダンス、セマンティクス、支援技術がユーザー補助ツリーを使用してユーザーに代替のユーザー エクスペリエンスを作成する方法について学習しました。表現力豊かなセマンティック 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属性テキストを指定します。
また、リンクテキストが不十分なことも問題です。「詳細」や「ここをクリック」などのクリック可能なテキストでは、リンク先に関するセマンティックな情報が提供されません。スクリーン リーダーがリンクに関する有意義なコンテキストを提供できるように、「レスポンシブ デザインの詳細」や「こちらのキャンバス チュートリアルを参照」などの説明テキストを使用してください。
ローターはフォーム コントロール リストを取得することもできます。このリストを使用すると、読者は特定のアイテムを検索して直接アクセスできます。
スクリーン リーダーでよく発生するエラーは、発音です。たとえば、スクリーン リーダーは「Udacity」を「oo-dacity」と発音する、電話番号を大きな整数として読み取る、大文字のテキストを頭字語のように読み上げる、などが考えられます。興味深いことに、スクリーン リーダーのユーザーはこうした特徴に慣れていて、考慮する必要があります。
一部のデベロッパーは、発音表記のつづりであるスクリーン リーダー専用テキストを提供することで、この状況の改善に努めています。以下に、発音のつづりに関する簡単なルールを示します。「しないでください。」です。この方法では、問題が悪化します。たとえば、ユーザーが点字ディスプレイを使用している場合、スペルが間違っているため、混乱が生じます。スクリーン リーダーを使用すると、単語のスペルを読み上げることができるため、読み上げの制御や必要性の判断はリーダーに任せることができます。
リーダーはローターを使用してランドマーク リストを表示できます。このリストは、メイン コンテンツと、HTML ランドマーク要素で指定されたナビゲーション ランドマーク セットを読者が見つけるのに役立ちます。
HTML5 では、ページのセマンティック構造の定義に役立つ新しい要素（header、footer、nav、article、section、main、aside など）が導入されました。これらの要素は、組み込みのスタイルを適用することなく、ページの構造上の手がかりとなります（いずれにせよ CSS で行うようにしてください）。
セマンティック構造要素は、複数の反復的な div ブロックを置き換え、作成者と読者の両方に対してページ構造を直感的に表現するための、より明確でわかりやすい方法を提供します。