適用 (対象)
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>
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
- 属性 role="heading" をもつ各要素を調べる。
- 要素の内容が見出しとして適切であるかどうかを判断する。
- 要素が
aria-level属性を持つ場合、値が適切な階層レベルであるかどうかを判断する。
期待される結果
- 2. 及び 3. の結果が真である。