要約

ARIA role属性を使用して、支援技術のユーザーにドキュメントの構造に関する詳細情報を提供します。

テクニック

• ページ領域を識別します。[[WCAG-1.3.1]]

例

<section role="doc-chapter" aria-labelledby="hd03">
   <h2 id="hd03">1 - It begins</h2>
   …
</section>

<p>lorum ipsum.<a role="doc-noteref" href="#fn01">1</a></p>
<aside role="doc-footnote">
   …
</aside>

<section role="doc-endnotes" aria-labelledby="hd-notes">
   <h1 id="hd-notes">Endnotes</h1>
   
   <section>
     <h2>Chapter 1</h2>
     <ol>
      <li role="doc-endnote">…</li>
      …
     </ol>
   </section>
   …
</section>

解説

コアHTMLマークアップの文法は、一般的な出版物の構造を識別するのに適していないという限界があります。たとえば、出版物には何百ものaside要素があるかもしれませんが、どれがサイドバーの注を表し、どれが警告やアラートを表しているかなどを確実に識別できません。

目の見えるユーザーにとっては、CSSスタイルシートによって視覚的なレンダリングが強化されて、この欠点が覆い隠されています（背景、枠線、および陰影は、役割を視覚的に伝えるために使用されています）。円滑なナビゲーションのためにその基礎となるマークアップを頼りとしている支援技術のユーザーにとっては、視覚的な表現の下では、主要な資料と補足的な資料が区別できないことが多く、Web ベースの技術ではアクセシビリティが限られていました。

出版物をよりアクセシブルにするためには、多くのユーザーが視覚に頼らない方法でコンテンツを使っているということを考慮する必要があります。そのため、論理的な読み取り順序をマークアップレベルで定義しなければなりません。また、ARIA のrole属性を使用して、汎用タグにさらに正確な意味を付与し、判別しやすくすることができます。

ARIA仕様では多くのロールが定義されていますが、そのほとんどはスクリプト化されたHTMLインターフェースをより使いやすくするためのものです（スクリプトセクションのARIAを参照）。コア仕様には多数のドキュメント構造ロールとランドマークロールが含まれていますが、これらは主にWebページのレイアウトに重点を置いています。出版業界では、Digital Publishing WAI-ARIA モジュールで定義されたロールを使用するのが一般的です。

よくある質問

すべてのセクションにランドマークロールを追加する必要がありますか？

いいえ、ランドマークは読者が出版物の主要なセクションに素早く移動できるように設計されているもので、目次の代わりとなるものではありません。

DPUB-ARIA語彙にセクションのロールが含まれていない場合、 regionロールを持つ新しいランドマークを定義する前に、ナビゲーションへの影響を考慮してください。ランドマークは目的地が列挙されている階層構造のないフラットなリストなので、リストに小見出しを詰め込みすぎても分かりにくくなるだけです。

タイトルのないセクションにaria-labelまたはtitleを追加すると、ランドマークが作成されますか?

はい。そのため、この方法で作成されるランドマークによって、ランドマークリストの項目が増えすぎないように注意する必要があります。section要素にラベルがある場合、そのセクションは、 regionロールが適用されているかのように処理されて、ランドマークになります。

タイトルのないセクションがdoc-chapterなどの既存のランドマークロールに関連付けられていない場合は、ラベルを付ける前にナビゲーションへの影響を考慮してください。

すべてのロールにラベルを付ける必要はありますか？

いいえ、ラベルが必要かどうかは、ロールがアクセシブルな名前を必要とするかどうかによって決まります。アクセシブルな名前が必要かどうかを判断するには、 DPUB-ARIAまたはARIA仕様のロール定義を参照してください。ロールのプロパティリストに「アクセシブルな名前が必要」というフィールドがない場合は、ロールのスーパークラス（継承元のクラス）を確認してください（値は継承されます）。

ランドマークには常にラベルを付けるべきですか？

aria-labelledby属性（テキストに見出しがある場合）またはaria-label属性（セクションに明示的な見出しがない場合）を使用してランドマークにラベルを付けるのが、ベストプラクティスです。

DPUB-ARIAランドマークにはラベルは必須ではありませんが、語彙のサポートもまだ広く普及していません。語彙が認識されない場合でも、ラベルを追加するとHTMLのデフォルトの処理ルールによってランドマークが作成されます（つまり、 section要素にラベルを追加することで、アクセシビリティツリーを作成するときに、ブラウザーはセクションを暗黙のregionとして扱います）。

関連リンク

• WAI-ARIA ロール
• デジタル出版 WAI-ARIA モジュール