Caution
This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.
適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス
ページを開いたり新たなページに遷移した直後、多くのスクリーン・リーダーでは自動的にtitle要素の内用を読み上げます。また、複数のウィンドウやタブを切り替えながら利用している場合、title要素の中身で目的のウィンドウ/タブかを判断します。したがって、title要素の内用をそのページを特定できるものにすることが求められます。
目的のページにたどり着いたら、ユーザーはまずそのページに自分が求めている情報や機能があるかどうかを判断する場合が多いでしょう。画面全体を一度に見ることができる場合、この判断は容易ですが、スクリーン・リーダーを使っているユーザーの多くは、ある程度ページの中身を読まないと判断することが困難です。
多くのスクリーン・リーダーには、ARIAランドマークで示される複数の領域の間を移動する機能があります。
ARIAランドマークで示される領域とは、header要素、nav要素、main要素、footer要素、aside要素などで、ページを構成する領域を示したものです。これらの要素の代わりに、div要素などに対してrole属性を用いて明示する方法もあります。
ページ上に存在する領域を確認するには、ページのソースを確認するか、Chrome拡張、Firefoxアドオン、Opera拡張、Edgeアドオンとして提供されているLandmark Navigation via Keyboard or Pop-upのようなツールを活用すると良いでしょう。
ページを構成するすべての要素が適切な領域に含まれていれば、ユーザーは斜め読みのような形でページ全体の構成を把握することができ、また目的の情報が掲載されているかどうかの判断や目的の情報を迅速に見つけることに役立てることができます。
ARIAランドマークについて詳しくは、以下のMDNの記事を参考にしてください：
さらに、特に長いページにおいてより効率的な斜め読みを可能にするためには、h?要素を用いてページ内に複数の見出しを配置することが有効です。ただ、コンテンツの量や性質によっては、複数の見出しを配置することが必ずしも適当ではない場合もありますので注意が必要です。
複数の見出しがあるページの場合、ページ内の情報の構造に合わせて適切な見出しレベルを用いることが重要です。たとえば、記事のタイトルはh1要素、記事中の小見出しはh2要素、さらに仮想の見出しはh3要素を用いる、といった具合です。
実際にコンテンツを読み始めるとき、ナビゲーションのリンクなどを飛ばして本文の先頭に移動することになります。本文部分がmain要素でマークアップされていたり、本文の先頭の見出しがh1でマークアップされていれば、スクリーン・リーダーの機能を活用して本文の先頭に容易に移動することが可能です。
そしてさらに読み進めていくに当たっては、スクリーン・リーダーはDOM treeに出現する順序（≒HTMLソースの記述順序）に従って読み上げます。そのため、画面上ではCSSによって隣接した位置に表示されている要素であっても、DOM tree上で離れた位置にあれば、画面表示と読み上げの順序が異なることになります。当該要素が隣接していることで、その意味が伝わりやすいような場合は特に、DOM tree上の順序が適切になっていることが重要です。
なお、ユーザーの操作によって表示されるコンテンツが変化するようなページについては、さらに注意が必要です。DOMツリーとスクリーン・リーダーも合わせて参照してください。