この記事は翻訳作業中です。

はじめに

In the past, a web page change could only be spoken in entirety which often annoyed a user, or by speaking very little to nothing, making some or all information inaccessible. Until recently, screen readers have not been able to improve this because no standardized markup existed to alert the screen reader to a change. ARIA live regions fill this gap and provide suggestions to screen readers regarding whether and how to interrupt users with a change.

単純なライブリージョン

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

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

    Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.

通常、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: link to ARIA form tutorial with aria info) 互換性を最大限にするために、このロールを使う際にaria-live="assertive"を追加するよう勧める人もいます。しかし、aria-liveとrole=alertの両方を追加することはiOSのVoiceOverで二重に読み上げられてしまうという問題を引き起こします。
progressbar A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).  
marquee for text which scrolls, such as a stock ticker.  
timer or any kind of timer or clock, such as a countdown timer or stopwatch readout.  

高度なライブリージョン

(TBD: more granular information on the support of the individual attributes with combinations of OS/Browser/AT).

General support for Live Regions was added to JAWS on version 10.0. In Windows Eyes supports Live Regions since version 8.0 "for use outside of Browse Mode for Microsoft Internet Explorer and Mozilla Firefox". NVDA added some basic support for Live Regions for Mozilla Firefox back in 2008 and was improved in 2010 and 2014. In 2015 basic support was also added for Internet Explorer (MSHTML).

The Paciello Group has some information about the state of the support of Live Regions (2014). Paul Jadam has researched the support of Aria-Atomic and Aria-Relevant in particular. 

  1. aria-atomic: The aria-atomic=BOOLEAN is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes - the possible settings are false/true where false is the default.
  2. aria-relevant: The aria-relevant=[LIST_OF_CHANGES] is used to set what types of changes are relevant to a live region - the possible settings are additions/removals/text/all where "additions text" is the default.
  3. aria-labelledby: The aria-labelledby=[IDLIST] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region and again label identifiers are separated with a space.
  4. aria-describedby: The aria-describedby=[IDLIST] is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.

高度なユースケース: Roster

A chat site would like to display a list of users currently logged on. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).

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

Breakdown of ARIA live properties:

  • aria-live="polite" indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow.
  • aria-atomic is not set ("false" by default) so that only the added or removed users should be spoken and not the entire roster each time.
  • aria-relevant="additions removals" ensures that both users added or removed to the roster will be spoken.

TBD: Realistic use case for aria-atomic="true"

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

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