適用 (対象)
Accessible Rich Internet Applications (WAI-ARIA) を用いたコンテンツ。
これは、次の達成基準に関連する達成方法である:
- 達成基準 4.1.3: ステータスメッセージ (より具体的な手法を用いる十分な達成方法)
- 達成基準 4.1.3: ステータスメッセージ (十分、G193: ウェブページでアシスタントによるヘルプを提供するとともに)
解説
この達成方法は、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>
例 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>
検証
手順
それぞれの ステータスメッセージ (status message) に対して:
- ステータスメッセージを持つことになるコンテナが、そのステータスメッセージが出現する前に、
role属性及びその値statusを持つことを確認する。 - ステータスメッセージが出現したとき、そのメッセージがコンテナの中に内包されていることを確認する。
- ステータスメッセージによる視覚的な体験と同等の情報を提供する要素又は属性（適切な ALT テキストを持つショッピングカート画像など）もコンテナの中に存在することを確認する。
期待される結果
- 1.、2. 及び 3. の結果が真である。