Descrição
Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.
O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:
- Um valor inválido foi inserido em um campo de um formulário
- A sessão atual expirou
- a conexão com o servidor foi perdida, as mudanças locais não serão salvas.
Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.
Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores
Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:
- Exibir o elemento como tendo uma função de alerta (alert role) na API de acessibilidade do sistema operacional.
- Disparar um evento de alerta acessível, usando a API de acessibilidade do sistema operacional, se houver suporte para tal.
Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.
- Leitores de tela podem interromper a produção corrente (quer sejam a fala, ou o braille) e, imediatamente, anunciar, ou exibir, a mensagem de alerta.
- Ampliadores de tela podem, visualmente, indicar que houve um alerta e qual era o seu texto.
Exemplos
Exemplo 1: Adicionando o atributo (role) no código HTML:
O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:
Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:
var myAlert = document.createElement("p");
myAlert.setAttribute("role", "alert");
var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
myAlert.appendChild(myAlertText);
document.body.appendChild(myAlertText);
Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
Exemplo 3: Adicionando a função de alerta a um elemento existente:
Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:
<p id="formInstruction">You must select at least 3 options</p>
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
document.getElementById("formInstruction").setAttribute("role", "alert");
Exemplo 4: Construindo um elemento com uma função de alerta visível:
Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes.
Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.
.hidden {
display:none;
}
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
document.getElementById("expirationWarning").className = "";
Exemplos de Trabalhos:
- Exemplo de funções com caixas de alerta ARIA - Alert role example using an ARIA alert box
- Exemplo de alerta utilizando uma caixa de diálogo modal ARIA - Alert example using a modal ARIA dialog box
Notas:
- A utilização da função alerta em um elemento implica que ele tenha a
aria-live="assertive". - O atributo alert role deve ser usado, apenas, para conteúdo com texto estático. O elemento no qual a função alerta for usada não deve ser passível de receber foco, então, um leitor de tela vai, automaticamente, anunciar o alerta, independentemente de onde o foco do teclado esteja localizado no momento.
- Se um alerta oferecer, também, controles interativos (tais como um controle de formulário que possibilite a sua correção, ou um botão "OK" que descarte o alerta), em seu lugar deve-se utilizar um alertdialog (diálogo de alerta).
Atributos ARIA utilizados
Técnicas ARIA relacionadas
Compatibilidade
TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT
Recursos Adicionais
- Melhores práticas ARIA - Alert Role: https://www.w3.org/TR/wai-aria-practices/#alert