Técnicas para as WCAG 2.0

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

-

SCR26: Introduzir conteúdo dinâmico no Modelo de Objecto de Documento imediatamente a seguir ao elemento accionador

Aplicabilidade

HTML e XHTML, script.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é colocar elementos da interface de utilizador inseridos no Modelo de Objecto de Documento (DOM), de modo a que a ordem de tabulação e a ordem de leitura do leitor de ecrã sejam definidas correctamente pelo comportamento predefinido do agente de utilizador. Esta técnica pode ser utilizada para qualquer elemento da interface de utilizador que esteja oculto ou visível, tais como menus e caixas de diálogo.

A ordem de leitura num leitor de ecrã baseia-se na ordem dos elementos HTML ou XHTML no Modelo de Objecto de Documento, tal como a ordem de tabulação predefinida. Esta técnica introduz um novo conteúdo no DOM imediatamente a seguir ao elemento que foi activado para accionar o script. O elemento accionador tem de ser um link ou um botão, e o script tem de ser invocado a partir do seu evento onclick. Estes elementos podem receber o foco de forma nativa e o seu evento onclick é independente do dispositivo. O foco permanece no elemento activado e o novo conteúdo, introduzido após o mesmo, surge imediatamente a seguir na ordem de tabulação e na ordem de leitura do leitor de ecrã.

Note que esta técnica funciona para actualizações síncronas. Para actualizações assíncronas (por vezes chamadas AJAX), é necessária uma técnica adicional para informar a tecnologia de apoio que o conteúdo assíncrono foi introduzido.

Exemplos

Exemplo1

Este exemplo cria um menu quando se clica num link, e coloca-o após o link. O evento onclick do link é utilizado para invocar o script ShowHide, apresentando um ID para o novo menu como parâmetro.

Código Exemplo:

<a href="#" onclick="ShowHide('foo',this)">Toggle</a>

O script ShowHide cria um div que contém o novo menu e introduz-lhe um link. A última linha representa o núcleo do script. Localiza o objecto principal do elemento que accionou o script e anexa o div criado por este como um novo objecto subordinado ao elemento principal. Isto faz com que o novo div surja no DOM após o link. Quando o utilizador pressiona a tecla de tabulação, o foco desloca-se para o primeiro item que pode receber o foco no menu, ou seja, o link criado.

Código Exemplo:

function ShowHide(id,src)
{
        var el = document.getElementById(id);
        if (!el)
        {
                el = document.createElement("div");
                el.id = id;
                var link = document.createElement("a");
                link.href = "javascript:void(0)";
                link.appendChild(document.createTextNode("Content"));
                el.appendChild(link);
                src.parentElement.appendChild(el);
        }
        else
        {
                el.style.display = ('none' == el.style.display ? 'block' : 'none');
        }
}

O CSS é utilizado para fazer com que o div e o link se assemelhem a um menu.

Testes

Procedimento

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

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

  3. Utilizando uma ferramenta que permita inspeccionar o DOM gerado pelo script, verifique se a caixa de diálogo surge em seguida no DOM.

Resultados Esperados