ステータスメッセージを提示するために role=status を使用する

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) を用いたコンテンツ。

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

解説

この達成方法は、ARIA 仕様の status ロールを用いて、コンテンツが利用者又はアプリケーションの状態についての情報を更新した際に、支援技術に通知するものである。これは、ステータスメッセージ (status message) を含む要素に role="status" を追加することで行われる。status ロールの ARIA ライブリージョンは、暗黙的に aria-live の属性値 polite を持っており、ステータスメッセージが追加されたときに、利用者は支援技術 (スクリーンリーダーなど) を介して通知を受けることが可能になる。status ロールはまた、aria-atomic のデフォルト属性値 true を持っており、そのため status ロールでマークされたコンテナへの更新は、コンテンツ制作者が定義したラベル(又は追加のネストされた要素)を含むコンテナの内容全体が、支援技術によって利用者に提示される結果になる。このような追加のコンテキストは、ステータスメッセージのテキストだけでは視覚的な体験と同等のものを提供しない場合に、重要になり得る。aria-live コンテナのコンテンツは、テキストが表示されている箇所にフォーカスが当たらなくても、支援技術が自動的に読み上げる。詳細は WAI-ARIA 1.1 status (role) を参照のこと。

事例

例 1: 検索結果のメッセージを含む

利用者が検索ボタンを押すと、ページのコンテンツが検索結果を含むように更新され、検索ボタンの下の部分に表示される。このコンテンツ変更はまた、新しいコンテンツの上部近くに「5 results returned.」というメッセージを含む。このテキストには、ステータスメッセージとして適切なロールが与えられる。スクリーンリーダーは「5 results returned.」と読み上げる。


	<div role="status">5 results returned.</div>

					

実装例: 検索結果における role=status

例 2: ショッピングカートの状態を更新する

利用者がショッピングカートへの追加ボタンを押すと、ショッピングカートのアイコンの近くにあるコンテンツが「1 items」と読めるように更新される。このテキストのコンテナ(この場合は <p>)は status ロールでマークされている。これは視覚的なコンテキストを追加するので、ショッピングカートの画像―簡潔で正確な ALT テキストを伴う―もコンテナに配置される。aria-atomic のデフォルトの値のため、スクリーンリーダーは「Shopping cart, six items」を読み上げる。


	<p role="status" >
		<img src="shopping-cart.png" alt="Shopping Cart">
		<br>
		<span id="cart">0</span> items
	</p>

実装例: ショッピングカートにおける role=status

検証

手順

それぞれの ステータスメッセージ (status message) に対して:

  1. ステータスメッセージを持つことになるコンテナが、そのステータスメッセージが出現する前にrole 属性及びその値 status を持つことを確認する。
  2. ステータスメッセージが出現したとき、そのメッセージがコンテナの中に内包されていることを確認する。
  3. ステータスメッセージによる視覚的な体験と同等の情報を提供する要素又は属性(適切な ALT テキストを持つショッピングカート画像など)もコンテナの中に存在することを確認する。

期待される結果

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