ページ ナビゲーションにおけるセマンティクスの役割
アフォーダンス、セマンティクス、ユーザー補助技術がユーザー補助ツリーを使用してユーザーに代替のユーザー エクスペリエンスを提供する方法について学びました。多くの標準要素にはセマンティクスとサポート動作の両方が組み込まれているため、表現力豊かでセマンティックな 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>
複雑なアプリケーションでは、視覚デザインで表示されるヘッダーが不要であるか、表示するスペースがない場合に、ヘッダーを配置するのに適した方法です。
その他のナビゲーション オプション
適切な見出しが付いたページは、スクリーン リーダー ユーザーのナビゲーションに役立ちますが、リンク、フォーム コントロール、ランドマークなど、ページ内を移動するために使用できる要素は他にもあります。
読者は、スクリーン リーダーのローター機能（ページの見出しのリストを簡単に分離してスキャンできる機能）を使用して、ページのリンクのリストにアクセスできます。ウィキのようにリンクが多い場合は、読者がリンク内のキーワードを検索することがあります。これにより、ページ内のすべてのキーワードではなく、実際にキーワードを含むリンクにヒットが限定されます。
この機能は、スクリーン リーダーがリンクを見つけることができ、リンクテキストに意味がある場合にのみ役立ちます。たとえば、リンクを見つけにくい一般的なパターンは次のとおりです。
href属性のないアンカータグ。シングルページ アプリケーションでよく使用されるこれらのリンク ターゲットは、スクリーン リーダーで問題を引き起こします。詳しくは、シングルページ アプリに関するこちらの記事をご覧ください。- リンクで実装されたボタン。これにより、スクリーン リーダーはコンテンツをリンクとして解釈し、ボタンの機能が失われます。このような場合は、アンカータグを実際のボタンに置き換え、適切にスタイル設定します。
- リンク コンテンツとして使用される画像。リンクされた画像は、スクリーン リーダーで使用できない場合があります。リンクが支援技術に適切に公開されるようにするには、画像に
alt属性テキストがあることを確認します。
リンクテキストが不適切であることも問題です。「詳細」や「ここをクリック」などのクリック可能なテキストは、リンク先に関するセマンティック情報を提供しません。代わりに、「レスポンシブ デザインの詳細」や「このキャンバス チュートリアルをご覧ください」などの説明的なテキストを使用して、スクリーン リーダーがリンクに関する有意なコンテキストを提供できるようにします。
ロータはフォーム コントロール リストを取得することもできます。このリストを使用すると、読者は特定のアイテムを検索して直接移動できます。
スクリーン リーダーがよく間違えるのは発音です。たとえば、画面読み上げ機能では、「Udacity」が「oo-dacity」と発音されたり、電話番号が大きな整数として読み上げられたり、大文字のテキストが頭字語のように読み上げられたりすることがあります。興味深いことに、スクリーン リーダーのユーザーはこの特性に慣れており、この特性を考慮に入れています。
一部のデベロッパーは、スクリーン リーダー専用のテキストを音声で読み上げることで、この状況を改善しようとしています。音声文字変換に関する簡単なルールは、使用しないことです。問題を悪化させるだけです。たとえば、ユーザーが点字ディスプレイを使用している場合、単語のスペルが間違って表示され、混乱を招くことになります。スクリーン リーダーでは単語を読み上げることができます。そのため、読者が操作を管理し、読み上げが必要なタイミングを判断できるようにします。
読者はローターを回転させてランドマークのリストを表示できます。このリストは、読者がメイン コンテンツと、HTML ランドマーク要素によって提供される一連のナビゲーション ランドマークを見つけるのに役立ちます。
HTML5 では、ページのセマンティック構造を定義する新しい要素が導入されました。header、footer、nav、article、section、main、aside などです。これらの要素は、組み込みのスタイルを強制することなく（これは CSS で行う必要があります）、ページの構造的な手がかりを提供します。
セマンティック構造要素は、複数の繰り返し div ブロックに代わるもので、作成者と読者の両方にとって、ページ構造を直感的に表現するより明確で説明的な方法を提供します。