8 - Notificações

Boas práticas de acessibilidade para componentes de notificação

Notificações acessíveis

Aqui você tem instruções para construção de componentes de notificação, "notificação" é uma mensagem que apenas permite que você saiba o que está acontecendo. Isso pode ser feito para que você possa decidir agir mais tarde ou para garantir que um evento já tenha ocorrido.

Evite

Evite forçar o focus em um elemento de notificação esse tipo de mudança brusca deixa o usuário de leitor de tela desorientado na interface.

Aria Live

Existem atributos aria-live que devem ser usados no container principal da notificação, ai quando um elemento de notificação é renderizado na interface o leitor de tela pode descrever seu conteúdo filho de acordo com a regra de priorização do aria-live.

Aria live Polite

Quando um elemento com aria-live polite em seu container for renderizado na interface o leitor de tela segue no foco de leitura escolhido pelo usuário e faz a descrição do conteúdo da notificação assim que terminar de ler o conteúdo focalizado pelo usuário.

notification polite

<!-- usuário é notificado quando o leitor de tela fica ocioso. -->

<div aria-live="polite">
  <h3>Titulo da notificação</h3>
  <p>Mensagem de notificação polite</p>
</div>

Aria live Assertive

Quando um elemento com aria-live assertive em seu container for renderizado na interface o leitor de tela interrompe a leitura de foco do usuário e descreve o conteúdo da notificação, após encerrar a notificação o leitor retoma para o foco original do usuário.

notification assertive

<!-- usuário é notificado imediatamente, leitor de tela é interrompido... -->
<!-- mas o foco continua no mesmo lugar -->

<div aria-live="assertive">
  <h3>Titulo da notificação</h3>
  <p>Mensagem de notificação polite</p>
</div>

Repositórios

On Demand Live Regions

On Demand Live Regions é um modulo npm que possibilita fazer com que os leitores de tela anunciem o texto sob demanda, sem uma mudança visual na interface.

On Demand Live Regions

const liveRegion = new OnDemandLiveRegion()
liveRegion.say('Hello World!')

Referencias

Mozilla - Aria Live Regions