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.



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


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

<div role="region" id="bird-info" aria-live="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-->

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,