はじめに

過去には、ユーザーを悩ませたり、話すことが非常にすくなかったり、情報の一部もしくは全体へアクセスできないときのみ、ウェブページの変更を伝えることができました。最近まで、スクリーンリーダーは変更を通知するための標準的なマークアップが存在していなかったために、これを改善することができませんでした。ARIA ライブリージョンはこのギャップを埋め、変更によるユーザへの割り込みをするのか、またはどのように割り込むのかをスクリーンリーダーへ提案します。

単純なライブリージョン

ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。

  1. aria-live: aria-live=POLITENESS_SETTING はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は off / polite / assertive で、デフォルトは「off」です。この属性は間違いなく最も重要な属性です。
  2. aria-controls: aria-controls=[IDLIST] は領域とそれをコントロールするものを関連付けるために使用されます。領域は div の ID のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば aria-controls="myRegionID1 myRegionsID2"。

    ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。

通常、aria-live="polite" のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさいくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。

重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、aria-live="off" で黙らせます。

シンプルなユースケース: コンボボックスがオンスクリーンの情報を更新する

ある鳥に特化したウェブサイトはドロップボックスを提供します。ドロップダウンから鳥が選択されると、ページ上の領域が選択された鳥の種類に関する詳細で更新されます。

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

<div role="region" id="bird-info" aria-live="polite">

ユーザーが新しい鳥を選んだ時、情報が読み上げられます。"polite" が指定されているので、スクリーンリーダーはユーザーが一時停止するまで待ちます。よって、ドロップダウンのリストを下に移動しても、ユーザーが通過したすべての鳥について読み上げられるわけではなく、最終的に選ばれた一つの鳥だけが読み上げられます。

優先する専門のライブリージョンロール

次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう:

ロール 説明 互換性に関する注意事項
log チャット、エラー、ゲームもしくは別種のログ 互換性を最大限にするために、このロールを使う際には冗長な aria-live="polite" を追加します。
status ある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。 互換性を最大限にするために、このロールを使う際には冗長な aria-live="polite" を追加します。
alert スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIAフォームのチュートリアルへのリンク) 互換性を最大限にするために、このロールを使う際に aria-live="assertive" を追加するよう勧める人もいます。しかし、aria-live と role=alert の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。
progressbar ウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。  
marquee 株式相場表示機のようなスクロールするテキストのためのものです。  
timer カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。  

高度なライブリージョン

(TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。

一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。

The Paciello Group は、ライブリージョンのサポート状況についての情報 (2014) をいくつかもっています。Paul Jadam は特に aira-atomic と aria-relevant のサポートについてのリサーチをしました。

  1. aria-atomic: aria-atomic=BOOLEAN は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は false/true で、デフォルトは false です。
  2. aria-relevant: aria-relevant=[LIST_OF_CHANGES] はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は additions/removals/text/all で "additions text" がデフォルトです。
  3. aria-labelledby: aria-labelledby=[IDLIST] は領域とラベルを関連付けるために使われます。aria-controls と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。
  4. aria-describedby: aria-describedby=[IDLIST] は領域と説明の関連付けを行います。aria-controls と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。

高度なユースケース: Roster

チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログイン/ログアウトステータスが動的に反映されるユーザーの一覧を表示します。

<ul id="roster" aria-live="polite" aria-relevant="additions removals">
	<!-- use JavaScript to add remove users here-->
</ul>

ARIA ライブプロパティの内訳:

  • aria-live="polite" はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。
  • 追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため aria-atomic は設定されていません (デフォルトの false が入ります)。
  • aria-relevant="additions removals" により追加もしくは削除されたユーザーが読み上げられることを確かにします。

TBD: aria-atomic="true" の現実的な使用例

ドキュメントのタグと貢献者

このページの貢献者: masuP9, momdo, 8845musign
最終更新者: masuP9,