セマンティクスとコンテンツのナビゲーション

ページ ナビゲーションにおけるセマンティクスの役割

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

アフォーダンス、セマンティクス、支援技術がユーザー補助ツリーを使用してユーザーに代替のユーザー エクスペリエンスを提供する方法について学びました。多くの標準要素にはセマンティクスとサポート動作の両方が組み込まれているため、表現力豊かでセマンティックな 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 ブロックに置き換わり、より明確かつ情報量の多い形で作成者と読者の両方に対してページの構造を直感的に示します。