Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
O que é uma armadilha de teclado numa página Web?
Uma armadilha de teclado é um local numa página Web onde a marcação do teclado fica presa: Quem nela entra com a tecla de tabulação nunca sai com o teclado sozinho. Para as pessoas sem rato, a página acaba ali — ler mais, fazer uma encomenda ou enviar o formulário é impossível. As causas comuns são seletores de datas, janelas de chat, vídeos incorporados e galerias de imagens. O critério WCAG 2.1.2 proíbe essas armadilhas.
Assim surge uma armadilha de teclado
A maioria das armadilhas de teclado ninguém constrói intencionalmente. Surgem de componentes prontos de fornecedores terceiros: Um seletor de datas apanha o foco para que os seus dias de calendário fiquem acessíveis com as teclas de seta — e esquece a saída. Uma janela de chat fixa a marcação no seu campo de entrada. Uma janela de diálogo personalizada sem botão de fechar deixa o foco rodar entre os seus dois botões. Com o rato isto nunca se nota, porque os utilizadores simplesmente clicam noutro lado. É exatamente por isso que as armadilhas de teclado muitas vezes passam despercebidas durante meses, enquanto os utilizadores de teclado desistem no mesmo local durante esse tempo.
Assim o serviço de verificação mede a armadilha de teclado
O serviço de verificação pressiona genuinamente a tecla de tabulação na sua página e regista cada parada com posição e elemento. Se a marcação rodar entre alguns poucos elementos sem atingir o final do documento, considera-o uma armadilha de teclado. O relatório nomeia os elementos envolvidos e inclui uma captura de ecrã de prova. Se o foco rodar dentro de um quadro incorporado de um fornecedor terceiro, o relatório assinala o caso para verificação manual — não se pode decidir com segurança se há uma saída. Se a medição atinge o fim do documento sem rodar, o critério é considerado cumprido.
Beispiele
Dialog ohne Ausgang
<div role="dialog" aria-modal="true">
<p>Newsletter?</p>
<input type="email">
<!-- kein Schließen-Knopf, Escape ohne Wirkung -->
</div><dialog id="nl">
<p>Newsletter?</p>
<input type="email">
<button type="button" onclick="nl.close()">Schließen</button>
</dialog>
<!-- dialog schließt mit Escape von selbst -->Aus jedem Bereich muss die Tastatur wieder herauskommen: mit Tab, Escape oder einem beschriebenen Weg.
- Navegue completamente pela sua página inicial com a tecla de tabulação até à zona de rodapé — se ficar preso em algum lugar, encontrou a armadilha.
- Verifique cada novo componente terceiro individualmente: seletor de datas, janela de chat, carrossel, reprodutor de vídeo.
- Peça à sua agência para dar a cada janela de diálogo uma forma de fechar acessível pelo teclado, no mínimo a tecla Escape.
- Teste novamente após cada atualização dos componentes integrados — uma nova versão pode introduzir uma armadilha.