ARIA Live Regions

This translation is incomplete. Please help translate this article from English


No passado, uma mudança em página web somente podia ser falada na íntegra, o que frequentemente incomodava um usuário, ou falando muito pouco ou nada, tornando alguma ou toda informação inacessível. Até recentemente, leitores de tela não conseguiam melhorar isso porque não havia marcação padronizada para alertar o leitor de tela sobre uma mudança. Regiões ARIA live preenchem essa lacuna e provêem sugestões para os leitores de tela sobre se e como interromper os usuários para informar uma mudança.

Live Regions Simples

Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. Below is a list of each related ARIA live region property with a description.

  1. aria-live: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off/polite/assertive. The default setting is 'off'. This attribute is by far the most important.
  2. aria-controls: The aria-controls=[IDLIST] is used to associate a control with the regions that it controls. Regions are identified just like an ID in a div, and multiple regions can be associated with a control using a space, 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.

Normalmente, só o aria-live="polite" é usado. Qualquer região na qual receba atualizações que são importantes para usuários receberem, mas não tão rápido a ponto de ser irritante, deve receber esse atributo. O leitor de tela falará as mundaças sempre que o usuário estiver ocioso.

Para regiões que não são importante, ou que seria irritante por causa de rápídas atualizações ou por outros motivos, silencie-as com o aria-live="off".

Caso de uso simples: atualização de informações úteis na tela por combobox

A website specializing in providing information about birds provides a drop down box. When a bird is selected from the drop down, a region on the page is updated with details about the type of bird selected.

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

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

As the user selects a new bird, the info is spoken. Because "polite" is chosen, the screen reader will wait until the user pauses. Thus, moving down the list will not speak every bird the user visits, only the one finally chosen.

Preferindo funções Live Region específicas

In the following well-known predefined cases it is better to use a specific provided "live region role":

Role Description Compatibility Notes
log Chat, erros, game ou outro tipo de log To maximize compatibility, add a redundant aria-live="polite" when using this role.
status A status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status. To maximize compatibility, add a redundant aria-live="polite" when using this role.
alert Error or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info) To maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role. However, adding both aria-live and role=alert causes double speaking issues in VoiceOver on iOS.
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.

Live Regions Avançadas

(TBD: what is supported where?)

  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.

Caso de uso avançado: Lista

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"