【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用 (対象)

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

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

ARIA12 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。

解説

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

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

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

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

訳注: heading ロールとネスティングレベルの用途に関する「WAI-ARIA 1.0 Authoring Practices」のリンクは、正しくは WAI-ARIA 1.0 Authoring Practices§3.2.7.3. Implicit Nesting and Headings となる。しかしながら、この文書は古い文書であり、最新の Authoring Practices である 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見出しを実装する方法を示す。HTMLはレベル6までの見出しのみをサポートしているため、このセマンティックスを提供するためのネイティブ要素は存在しない。

...
<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 属性を持つ場合、値が適切な階層レベルであるかどうかを判断する。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。