Técnicas para as WCAG 2.0

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

-

SCR37: Criar Caixas de Diálogo Personalizadas de uma Forma Independente do Dispositivo

Aplicabilidade

HTML e XHTML utilizados com script.

Esta técnica está relacionada com:

Descrição

Muitas vezes, os programadores dos sítios da Web pretenderem criar caixas de diálogo que não utilizem as janelas de pop-up fornecidas pelo browser. Normalmente, isto é efectuado juntando os conteúdos da caixa de diálogo num div e colocando o div acima do conteúdo da página, utilizando a ordem z e o posicionamento absoluto em CSS.

Para estarem acessíveis, estas caixas de diálogo têm de seguir algumas regras simples:

  1. Accionar o script que apresenta a caixa de diálogo a partir do evento onclick de um link ou botão.

  2. Colocar a caixa de diálogo div no Modelo de Objecto de Documento (DOM) imediatamente a seguir ao elemento que a accionou. O elemento accionador irá manter o foco, e a introdução do conteúdo da caixa de diálogo a seguir a esse elemento irá fazer com que o conteúdo dentro da caixa de diálogo seja o seguinte na ordem de leitura do leitor de ecrã e o seguinte na ordem de tabulação. A caixa de diálogo ainda pode ser posicionada em qualquer outra parte da página. Isto pode ser efectuado mediante a criação da caixa de diálogo em HTML e ocultando-a com CSS, conforme ilustrado no exemplo abaixo, ou inserindo-a imediatamente a seguir ao elemento accionador com o script.

  3. Garantir que o HTML dentro da caixa de diálogo div cumpre a mesma norma de acessibilidade do restante conteúdo.

Também é recomendável, mas nem sempre necessário, que o link de apresentação alterne entre a funcionalidade de abertura e fecho da caixa de diálogo, e que feche a caixa de diálogo quando esta deixar de receber o foco do teclado.

Exemplos

Exemplo 1: Um botão de opções que abre uma caixa de diálogo

O HTML para este exemplo inclui um elemento accionador, neste caso um botão, e um div que funciona como a frame para a caixa de diálogo.

O elemento accionador é um botão e o script é accionado a partir do evento onclick. Isto envia os eventos apropriados para o sistema operativo de modo a que a tecnologia de apoio tenha conhecimento da alteração efectuada no DOM.

Neste exemplo, os botões Submeter e Repor da caixa de diálogo ocultam o div.

Código Exemplo:

...
<button onclick="TogglePopup(event,true)"
        name="pop0001">Options</button>

<div class="popover" id="pop0001">
  <h3>Edit Sort Information</h3>
  <form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
    <fieldset>
      <legend>Sort Order</legend> 
      <input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
      <input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
    </fieldset>
<div class="buttons">
  <input type="submit" value="OK" />
  <input type="reset" value="Cancel" />
</div>
</form>

</div>
 ...

Os elementos div, heading e form são estilizados com CSS para parecerem uma caixa de diálogo.

Código Exemplo:

...
a { color:blue; }
a.clickPopup img { border:none; width:0; }

div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
 ...

O script alterna a apresentação da caixa de pop-up div, mostrando-a e ocultando-a.

Código Exemplo:

...
function TogglePopup(evt,show)
{
        HarmonizeEvent(evt);
        var src = evt.target;
        if ("click" == evt.type)
        {
                evt.returnValue = false;
        }
        var popID = src.getAttribute("name");
        if (popID)
        {
                var popup = document.getElementById(popID);
                if (popup)
                {
                        if (true == show)
                        {
                                popup.style.display = "block";
                        }
                        else if (false == show)
                        {
                                popup.style.display = "none";
                        }
                        else
                        {
                                popup.style.display = "block" == popup.style.display ? "none" : "block";
                        }
                        if ("block" == popup.style.display)
                        {
                                //window.alert(document.documentElement.scrollHeight);
                                popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
                                popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
                        }
                }
        }
}

function SubmitForm(elem)
{ 
        elem.parentNode.style.display='none'; 
        return false;
}

function ResetForm(elem)
{ 
        elem.parentNode.style.display='none'; 
        return false;
}
 ...

Está disponível um exemplo prático, Um botão de opções que abre uma caixa de diálogo.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Localize todas as áreas da página que accionam caixas de diálogo que não são janelas de pop-up.

  2. Verifique se as caixas de diálogo podem ser abertas utilizando a tecla de tabulação para percorrer a área e pressionando a tecla Enter.

  3. Verifique se, uma vez aberta, a caixa de diálogo é a seguinte na ordem de tabulação.

  4. Verifique se as caixas de diálogo são accionadas a partir do evento click de um botão ou link.

  5. Utilizando uma ferramenta que permita analisar o DOM gerado por scripts, verifique se a caixa de diálogo é a seguinte no DOM.

Resultados Esperados