ページ ナビゲーションにおけるセマンティクスの役割
アフォーダンスとセマンティクス、および支援技術がユーザー補助ツリーを使用して代替のユーザー エクスペリエンスを作成する方法について学習しました。多くの標準要素にはセマンティクスとサポート動作の両方が組み込まれているため、表現力の高いセマンティック 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
ブロックに代わるもので、著者と読者の両方にとってページ構造を直感的に表現するための明確でわかりやすい方法を提供します。