Utilizar o role status

Descrição

Esta técnica demonstra como usar o role status, e descreve ainda o seu impacto em browsers e tecnologia assistiva.

role status é um tipo de live region para avisos que não são suficientemente importantes para constarem de um alert. Tais avisos são normalmente apresentados como uma barra de estado. Quando o role é adicionado ao elemento, o browser envia um evento de estado para produtos de tecnologia assitiva, que por sua vez podem alertar o utilizador.

Informação de status tem de ser fornecida num objeto de status, objeto este que não deve poder ser focado. Se outra parte da página controla o que aparece como status, deve-se utilizar o atributo aria-controls para relacionar essa parte da página com o objeto de status.

Produtos de tecnologias assistiva podem reservar determinadas células de uma tela Braille para exibir o status.

Possível impacto em user agents e tecnologia assistiva 

Quando o role status é adicionado a um elemento, ou quando esse elemento fica visível, o user agent deve:

  • Expôr o elemento como tendo um role de status através da API de acessibilidade do sistema operativo. 
  • Emitir um evento status acessível através da API de acessibilidade do sistema operativo, se possível.

Produtos de tecnologia assistiva devem captar o evento de estado e notificar o utilizador adequadamente:

  • Leitores de ecrã (screen readers) podem implementar uma tecla especial para anunciar o status atual, apresentando assim o conteúdo de uma live region de status. Estes devem ser anunciados apenas quando o utilizador está inativo, a menos que se tenha definido o atributo aria-live=”assertive”, caso em que o utilizador pode ser interrompido. 
  • Ampliadores de ecrã (screen magnifiers) poderão aumentar o tamanho do status.
Nota: Opiniões sobre como produtos de tecnologia assistiva lidam com esta técnica podem variar. A informação acima é apenas uma dessas opiniões, pelo que não pode ser considerada normativa.

Exemplos

Exemplo 1: Adicionar o role status em HTML

O snippet em baixo mostra como se pode adicionar o role de status diretamente em código HTML. 

<p role="status">Your changes were automatically saved.</p> 

Exemplos a Correr:

Notas 

Atribuos ARIA utilizados

Técnicas ARIA relacionadas 

Compatibilidade

  • The Paciello Group publicou dados sobre da compatibilidade deste role num artigo de 2014: Screen reader support for ARIA live regions

  • A determinar: Adicionar informação atualizada sobre combinações comuns de produtos de tecnologia assistiva comuser agents

Mais recursos