Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

SCR14: Utilizar scripts para tornar opcionais os alertas não essenciais

Aplicabilidade

Tecnologias de scripting que utilizem alertas de scripting para comunicação não urgente.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é apresentar uma caixa de diálogo que contém uma mensagem (alerta) para o utilizador. Quando o alerta é apresentado, recebe o foco e o utilizador tem de activar o botão OK na caixa de diálogo para a fechar. Visto que estes alertas fazem com que o foco altere, podem distrair o utilizador, sobretudo quando utilizados para informação não urgente. Os alertas utilizados para fins não urgentes, tais como apresentar a citação do dia, sugestões de utilização úteis, ou a contagem decrescente para um evento em particular, não são apresentados, a não ser que o utilizador os active através de uma opção fornecida na página Web.

Esta técnica atribui uma variável JavaScript global para guardar as preferências do utilizador para apresentar alertas. O valor predefinido é falso. Uma função “wrapper” é criada para verificar o valor desta variável antes de apresentar o alerta. Todas as chamadas para apresentar um alerta são feitas a esta função wrapper, em vez de se chamar a função alert() directamente. No início da página, é fornecido um botão para que o utilizador active a apresentação de alertas na página. Esta técnica funciona numa base de visita-a-visita. Cada vez que uma página é carregada, os alertas são desactivados e o utilizador tem de os activar manualmente. Em alternativa, o autor pode utilizar cookies para guardar as preferências do utilizador em todas as sessões.

Exemplos

Exemplo 1

O script seguinte apresenta uma citação numa caixa de alerta, de dez em dez segundos, se o utilizador seleccionar o botão "Activar os Alertas". O utilizador pode desactivar as citações de novo seleccionado "Desactivar os Alertas".

Código Exemplo:

<script type="text/javascript">
var bDoAlerts = false;  // global variable which specifies whether to 
                                       // display alerts or not
/* function to enable/disable alerts.
 * param boolean bOn - true to enable alerts, false to disable them.
*/
function modifyAlerts(isEnabled) {
   bDoAlerts = isEnabled;
}
/* wrapper function for displaying alerts.  Checks the value of bDoAlerts
*and only calls the alert() function when bDoAlerts is true.
*/
function doAlert(aMessage) {
    if (bDoAlerts) {
       alert(aMessage);
    }
}
// example usage - a loop to display famous quotes.
var gCounter = -1;  // global to store counter
// quotes variable would be initialized with famous quotations
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
   if (++gCounter &gt;= quotes.length) {
     gCounter = 0;
   }
   doAlert(quotes[gCounter]);
   setTimeout("showQuotes();", 10000);
}
showQuotes();
</script>

No corpo de uma página, inclua uma forma de activar e desactivar os alertas. Este é um exemplo:

Código Exemplo:

<body>
<p>Press the button below to enable the display of famous quotes 
using an alert box<br />
<button id="enableBtn" type="button" onclick="modifyAlerts(true);">
Turn Alerts On</button><br />
<button id="disableBtn" type="button" onclick="modifyAlerts(false);">
Turn Alerts Off</button></p>

Este é um exemplo prático deste código: Demonstração de Alertas.

Testes

Procedimento

Para uma página Web que suporte interrupções não urgentes utilizando um alerta JavaScript:

  1. Carregue a página Web e verifique se os alertas não urgentes não são apresentados.

  2. Verifique se existe um mecanismo para activar os alertas não urgentes.

  3. Active os alertas não urgentes e verifique se estes são apresentados.

Resultados Esperados