見出しを特定するために role=heading を使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。

これは達成基準 1.3.1: 情報及び関係性 (十分) に関する達成方法である。

解説

この達成方法の目的は、支援技術 (AT) に見出しとしてひとまとまりのコンテンツを識別するための手段を提供することである。要素に role="heading" を適用することで、(スクリーンリーダーなどの) 支援技術に、あたかもそれが見出しであったかのように扱わせることができる。

ページ上に複数の見出しがあり、かつ見出し階層が視覚的な提示を通して定義される場合、見出しの階層レベルを示すために aria-level 属性が使用されるべきである。

可能な場合、ネイティブな見出しマークアップを直接使用すること。たとえば、<div role="heading" aria-level="1"> を使用するのではなく、h1 を使用するのが好ましい。しかし、見出しマークアップの代わりに heading ロールを使用することが必要な場合がある。たとえば、スクリプトが既存の要素の階層構造に依存しているレガシーサイトを改装する場合などである。

heading ロールとネスティングレベルの用途については、WAI-ARIA Authoring Practices 1.1 で説明されている。

事例

事例 1: 単純な見出し

この例は、スクリプトが既存の要素の階層構造に依存する、又はレベルが不明であるレガシーなサイトを改装する際に、role="heading" を使用した簡単な見出しを実装する方法を示す。たとえば、さまざまなソースからシンジケートされたウェブコンテンツを、最終的なプレゼンテーションがどうなるかの知識なしで構築できるかもしれない。

<div role="heading">Global News items</div>
... a list of global news with editorial comment....

<div role="heading">Local News items</div>
... a list of local news, with editorial comment ...

事例 2: 追加の見出しレベル

この例は、role="heading" と aria-level 属性を用いてレベル7見出しを実装する方法を示す。

...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold/div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

  1. 属性 role="heading" をもつ各要素を調べる。
  2. 要素の内容が見出しとして適切であるかどうかを判断する。
  3. 要素が aria-level 属性を持つ場合、値が適切な階層レベルであるかどうかを判断する。

期待される結果

  • 2. 及び 3. の結果が真である。