要約

ユーザーがすぐにアクセスしたいと考えられる重要なコンテンツの構成要素には、それぞれ、ARIAランドマークを用いて意味のあるラベルを付けます。

テクニック

例

例 1 — 明示的なラベルを持つランドマークロール

aria-labelledby属性は、ラベルがランドマークロールに正しく関連付けるのに使用します（属性の値は、ラベルを含む要素のIDです。この例ではh2の要素です）。

<section role="doc-endnotes" aria-labelledby="note_hd">
    <h2 id="note_hd">巻末注</h2>
    …
</section>
例 2 — あいまいなラベルを持つランドマークロール

ランドマークセクションのコンテンツが見出しの前にある場合は、見出しがラベルとして正しく識別されるように、常にaria-labelledbyを使用する必要があります。

<section role="chapter" aria-labelledby="c23_hd">
	<img src="img/comic/panel23.jpg" alt="章見出しの前のひとコマ漫画"/>
	<details>
		<summary>詳細</summary>
		<p>…</p>
	</details>
    <h2 id="c23_hd">第23章</h2>
    …
</section>
例 3 — ラベルのないランドマークロール

ドキュメント内にランドマークロールのインスタンスが1つしかない場合、明示的なラベルは必要ありません。支援技術によって、ランドマークの一般的なタイプ（たとえば、doc-indexなら「インデックス」）のみがアナウンスされますが、ユーザーがそこに移動すると見出しの内容が音声で提示されるでしょう。

<section role="doc-chapter">
    <h2>第1章</h2>
    …
</section>
例4 — ラベルが追加されたランドマーク

次のランドマークに明示的なタイトルが存在しない場合には、aria-label属性を使用してラベルを設定します。

<section role="chapter" aria-label="第21章">
    <p>目が覚めると …</p>
    …
</section>
例 6 — 一意のラベルのないランドマーク

次のランドマークには一意のラベルがありません（つまり、同じタイトルの同じランドマークがドキュメント内に複数存在します）。ランドマークを区別するために、hidden属性を使用して支援技術用の連番を与えます。この要素は非表示であるため、aria-labelledby属性から参照する必要があります（つまり、非表示の子孫コンテンツは無視されるため、番号を取得するには明示的な参照が必要です）。すべてのユーザーの便宜を図るために、各ランドマークに目に見える連番を与えるのが理想的です。

<aside aria-labelledby="pp2 pp2-num">
    <h4 id="pp2">練習問題（Practice Problem）<span id="pp2-num" hidden="">2</span></h4>
    …
</section>

解説

ARIA ランドマークは、Web サイトで使用され、ユーザーがページのさまざまな主要領域（サイトのヘッダーとフッター、検索ボックス、広告、メインコンテンツ領域）を識別し、すばやく移動できるようにします。

ページ上で見つかったランドマークは、支援技術によってリンクのリストにまとめられます。ユーザーは、ランドマーク間をすばやく移動してページにおける位置を確認し、探しているコンテンツの特定のセクションにアクセスできることを期待します。

出版物は通常、各ドキュメントに1つのセクションまたは章のテキストのみを含むよう構成されていますが、ランドマークは、ユーザーがこれらの主要領域内の主要なコンポーネントにアクセスできるようにする上で重要な役割を果たします（たとえば、メモ、用語集、学習目標、練習問題、サイドバー、またはインタラクティブなウィジェットに素早くアクセスするなど）。

出版物のコンテンツのすべてのセクションがランドマークである必要はなく、そうあるべきでもありません。ランドマークは、ユーザーがすぐにアクセスする必要がある重要なセクションにのみ使用してください。たとえば、すべてのセクションとサブセクションのリストがあるよりも、用語集にアクセスできる方がユーザーにとってありがたいでしょう。

DPUB-ARIA モジュールには、出版物の次のランドマーク ロールがあります。


次のナビゲーションロールもランドマークです。


加えて、コアARIA仕様の以下のロールもランドマークです。


よくある質問

すべての章／セクションがランドマークである必要がありますか?

いいえ。

ランドマークは文書内の見出しの階層構造を保持しないので、目次の代わりとしては使用しないでください。ランドマークの使用は、ユーザーが手動で検索しなければならないような、ページ内の構成要素に限定してください。ランドマークを作成しすぎると、ユーザーに長いリスト中から探すのを強いてしまいます。

ユーザーがセクションの見出しに移動したり、目次を閲覧したりしたい場合は、そのための仕組みがすでに用意されています。必要に応じて、ドキュメント内の主要なコンテンツ セクションのみを特定します（つまり、すべてのサブセクションではなく、章または最上位レベルのセクション）。

見出しのあるsectionはすべてランドマークですか?

いいえ。

sectionタグは、次のいずれかまたは両方が当てはまる場合にのみランドマークとなります。

  • ランドマークの役割を指定するrole属性が付与されている。
  • aria-label 、 aria-labelledby 、またはtitle属性が付与されている。

それ以外の場合、 sectionには特定のセマンティクスは関連付けられていません（つまり、本質的にはdivに似ています）。

すべてのランドマークにラベルが必要ですか?

いいえ。

ただし、常にaria-labelledby 、aria-label、またはtitle属性のいずれかを使用してラベルを提供するのが最も安全な方法です。

技術的には、これらの属性を使用する必要があるのは、ページに同じランドマークロールが複数存在する場合（例：doc-chapterまたはdoc-bibliographyが 2 つ以上）のみです。このような場合、一意のラベルがないと、ユーザーが探しているものを見つけるのが難しくなる可能性があります。たとえば、インデックスが 2 つある場合、一意のラベルがないと、ユーザーは手動でそれぞれを確認しない限り、どちらがトピックインデックスでどちらが名前のインデックスであるかを判断できません。

異なる素材を元にしたデータを組み合わせたり、出力に応じてコンテンツを異なる方法で固まりにするワークフローでは、明示的ラベルにするのがベストプラクティスです。このようにすることで、WCAG要件の意図しない違反を回避できます。

非表示のラベルにはtitleとaria-label属性のどちらを使用すればよいですか?

テキストにラベルがない場合は、常にaria-label属性の方が優先されてきました。要素とコントロールのアクセシブルな名前が優先され、titleはこれまであまりサポートされてきませんでした。

ランドマークの名前はなぜ一意であるべきなのでしょうか?

ドキュメント内に同じランドマークロールが複数ある場合、それぞれに一意の名前を付けることで、どのコンポーネントにアクセスしているのか混乱しないようにできます。各コンポーネントのタイトルで目的が明確になるのが理想的ですが、同じ名前がそれぞれに再利用される場合（複数の「練習問題」サイドバーなど）、一意の識別子を使用すると使いやすさが向上します。識別子は、コンポーネントが属するサブセクションや、印刷物の追加部分でコンポーネントが見つかるページなど、役立つものにする必要があります。

ARIA ランドマークと EPUB のランドマーク／ガイドの違いは何ですか?

ARIA ランドマークは個々の Web ページ用にコンパイルされるため、ドキュメント間で保持されることはありません。EPUB 出版物は多数のドキュメントで構成されているため、リーディングシステムには出版物全体にわたって重要なコンテンツを効率的に見つける方法が必要です。EPUB のランドマーク（EPUB 3）とガイド（EPUB 2）は、ランドマークが多数のドキュメントに分散するというこの問題を解決するために設計されました。

相互運用性を最大限に高めるには、両方のタイプのランドマークを提供することをお勧めします。

landmarkロールを使用できないのはなぜですか?

landmarkロールは、WAI-ARIA 仕様で抽象ロールと呼ばれているものです。直接実装されることを意図したものではなく、使用可能なロールが継承するトップレベルの定義として使用されます。

特定の役割を持たないランドマークの場合は、意味のあるラベルとともにregionロールを使用できます。

なぜasideにはラベルが必要なのにsectionには必要ないのでしょうか?

最初の意図と異なり、 section要素はdivと同じように使用されてきました（つまり、純粋にスタイルのために）。そのため、支援技術のユーザーに不利益をもたらす誤用を避けるため、この要素にはデフォルトのロールがありません。

その結果、次の例は見出しがあってもランドマークではありません。

<section> <h2>Section 3.1.1 — Elephants on Parade</h2> … </section>

ただし、要素にラベルを割り当てると、その要素はregionの役割を引き受け、ランドマークになります。

<section aria-labelledby="s311"> <h2 id="s311">Section 3.1.1 — Elephants on Parade</h2> … </section>

逆に、 aside要素にはcomplementary的な役割が暗黙的に含まれており、ラベルが必要です。HTML 要素の暗黙的なロールの詳細については、 HTML ドキュメントの ARIAを参照してください。

要素 X でランドマークを使用できないのはなぜですか?

一部の HTML 要素は、必要なセマンティクスが上書きされるのを防ぐために、受け入れるロールが制限されています。

特に、 body要素には、他のロールによって上書きできない特別なロールdocumentがあります。

どの要素にどのロールが使用できるかの詳細は、HTMLドキュメントのARIAで提供されます。

関連リンク