Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
Porque é que uma website deve ser operável sem rato?
Um website tem de ser operável sem rato, porque muitas pessoas usam exclusivamente o teclado: pessoas cegas com programa de leitura, pessoas com tremor ou paralisia e utilizadores de teclados especiais. Se a tecla Tab não alcança um ponto de menu ou botão, esta função simplesmente não existe para todas essas pessoas — como se nunca a tivesse construído. O critério WCAG 2.1.1 exige portanto a operabilidade completa do teclado.
Operação por teclado no dia a dia: Tab, Enter e setas do teclado
A operação sem rato segue um padrão fixo. A tecla de tabulação move uma marca visível de elemento em elemento: do logótipo para o menu, do menu para o campo de busca, adiante para ligações e botões. A tecla Enter abre o elemento marcado, as setas teclado comandam menus e listas de seleção. Um exemplo: quem preenche o seu formulário de contacto salta com Tab de campo em campo e envia no final com a tecla Enter. Este padrão funciona apenas se cada elemento de operação está tecnicamente construído como ligação, botão ou campo de formulário. Um parágrafo de texto clicável, que um script torna botão, parece igual com o rato — para o teclado não existe.
Assim verifica o serviço a operação por teclado
O serviço de verificação de verdade pressiona a tecla Tab no seu website, paragem por paragem, até ao final do documento. Além disso procura no código-fonte elementos de operação que reagem apenas ao clique do rato: elementos com instrução de clique que são inacessíveis para o teclado. Se encontra tais elementos, o critério vale como violado e o relatório nomeia o primeiro elemento afetado com foto de prova. Se a tecla Tab não chega a nenhuma paragem apesar de elementos de operação presentes, também isso é violação. Se a medição fica indecisa, o relatório mostra-o abertamente como ponto de verificação manual — uma medição vazia é para nós erro, nunca salvo-conduto.
Beispiele
Klick-Handler auf einem div
<div class="knopf" onclick="warenkorb()">In den Warenkorb</div><button type="button" onclick="warenkorb()">In den Warenkorb</button>Ein div erreicht die Tabulatortaste nicht und reagiert nicht auf Enter oder Leertaste. Ein button kann beides von selbst.
Menü öffnet nur beim Überfahren
.menue li:hover > ul { display: block; }.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }focus-within öffnet das Untermenü auch, wenn der Fokus per Tastatur auf einem Eintrag liegt.
- Coloque o rato de lado e opere a sua página inicial cinco minutos apenas com tecla de tabulação, Enter e teclas de seta.
- Verifique especialmente menus, campo de pesquisa e carrinho de compras — é aí que se escondem a maioria dos locais que apenas reagem a clique com rato.
- Peça à sua agência para usar elementos de controlo verdadeiros para cada elemento clicável: ligação, botão ou campo de formulário em vez de texto clicável.
- Repita o teste de teclado após cada remodelação maior — um novo script de menu pode remover a operação por teclado despercebidamente.