Técnicas para as WCAG 2.0

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

-

F42: Falha dos Critérios de Sucesso 1.3.1 e 2.1.1 devido àutilização de eventos de scripting para emular links de um modo que não é determinável de forma programática

Aplicabilidade

HTML e XHTML com Scripting.

Esta falha está relacionada com:

Descrição

Esta falha ocorre quando os processadores de eventos JavaScript estão anexados a elementos para ''emular links''. Um controlo ou link criado desta forma não pode ser acedido através da tecla de tabulação a partir do teclado e não recebe o foco do teclado como os outros controlos e/ou links. Se os eventos de scripting forem utilizados para emular links, os agentes de utilizador, incluindo a tecnologia de apoio, podem não conseguir identificar os links no conteúdo como sendo links. Podem não ser reconhecidos como controlos interactivos pela tecnologia de apoio, ou podem ser reconhecidos como controlos interactivos mas não links. Estes elementos não surgem na lista de links gerada pelos agentes de utilizador ou pela tecnologia de apoio.

A finalidade dos elementos <a href> e <area> é marcar os links.

Anexar os processadores de eventos a elementos que normalmente não são interactivos, tais como span e div, pode ser bastante confuso para os utilizadores. Mesmo se houver cuidado em fornecer acesso a estes elementos através do teclado, os utilizadores podem ter dificuldade em descobrir que existem controlos interactivos no conteúdo, ou compreender qual o comportamento que podem esperar dos referidos controlos. Por exemplo, os utilizadores podem não saber quais os batimentos de tecla que são suportados pelo script para activar o elemento. Além disso, estes elementos não geram os mesmos eventos do sistema operativo que os elementos interactivos, por isso a tecnologia de apoio pode não ser notificada quando o utilizador os activa.

Exemplos

Exemplo de Falha 1: Utilizar scripts num elemento <span>

O processamento de eventos que suporta scripts é adicionado a um elemento span para que funcione como um link quando se clica sobre o mesmo com um rato. A tecnologia de apoio não reconhece este elemento como um link.

Código Exemplo:

<span onclick="this.location.href='newpage.html'">
    Fake link
</span>

Exemplo de Falha 2: Utilizar scripts num elemento <img>

O processamento de eventos que suporta scripts é adicionado a um elemento img para que funcione como um link quando se clica sobre o mesmo com um rato. A tecnologia de apoio não reconhece este elemento como um link.

Código Exemplo:

                                   src="go.gif" 
   alt="go to the new page" 
   onclick="this.location.href='newpage.html'"

Exemplo de Falha 3: Utilizar scripts num elemento <img>, com suporte de teclado.

O processamento de eventos que suporta scripts é adicionado a um elemento img para que funcione como um link. Neste exemplo, a funcionalidade do link pode ser invocada com o rato ou através da tecla Enter, se o agente de utilizador incluir o elemento na sequência de tabulação. Contudo, o elemento não é reconhecido como link.

Código Exemplo:

function doNav(url)
{
   window.location.href = url;
}

function doKeyPress(url)
{
   //if the enter key was pressed
   if (window.event.type == "keypress" &&
       window.event.keyCode == 13)
   {
      doNav(url);
   }
}

A marcação para a imagem é a seguinte:

Código Exemplo:

<p>
        <img src="bargain.jpg"
                tabindex="0" 
                alt="View Bargains"
                onclick="doNav('viewbargains.html');"
                onkeypress="doKeyPress('viewbargains.html');"
        >
</p>

Exemplo de Falha 4: Utilizar scripts num elemento <div>

Este exemplo utiliza o script para fazer com que o elemento div se comporte como um link. Embora o autor forneça o acesso total através do teclado e separe os processadores de eventos da marcação para permitir uma nova finalidade do conteúdo, o elemento div não é reconhecido como um link pela tecnologia de apoio.

Código Exemplo:

window.onload = init;

function init()
{
        var objAnchor = document.getElementById('linklike');

        objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
        objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}

function changeLocation(objEvent, strLocation)
{
        var iKeyCode;

        if (objEvent && objEvent.type == 'keypress')
        {
                if (objEvent.keyCode)
                        iKeyCode = objEvent.keyCode;
                else if (objEvent.which)
                        iKeyCode = objEvent.which;

                if (iKeyCode != 13 && iKeyCode != 32)
                        return true;
        }

        window.location.href = strLocation;
}

A marcação para o elemento div é a seguinte:

Código Exemplo:

<div id="linklike">
View the results of the survey.
</div>

Recursos

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

Testes

Procedimento

  1. Verifique se existem processadores de eventos JavaScript num elemento que emule um link.

  2. Verifique se função determinada de forma programática do elemento é um link.

Resultados Esperados