Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung
Acessibilidade
Por que um elemento focado nunca deve ser escondido?
Qualquer pessoa que passa por uma página com o teclado deve ver onde o foco está. Barras de cabeçalho adesivo, banners de cookies e janelas de chat sobre o conteúdo; O foco pousa por baixo e é invisível. O nível AA (2.4.11, novo no WCAG 2.2) requer que o elemento focado permaneça pelo menos parcialmente visível. O critério de nível AAA 2.4.12 requer: totalmente visível, sem pixel obscurecido.
O que o critério requer
Quando um item recebe o foco do teclado, nenhuma parte dele está por trás de qualquer outro conteúdo gerado pelo autor: nenhum cabeçalho ou rodapé pegajoso, nenhum banner de cookies, nenhum botão de bate-papo, nenhuma janela de referência. Ao mudar de foco, o navegador só rola até que o elemento entre na área visível; Ele não sabe nada daqueles que estão acima dela. O lado deve, portanto, garantir que a área sob uma tira adesiva seja mantida limpa durante o rolagem.
Execução
A propriedade CSS rolagem no recipiente de rolagem reserva-se para cima e para baixo tanto espaço quanto as tiras adesivas são altas; o navegador, em seguida, rola para fora elementos focados sob a barra. Janelas deitadas sobre o lado capturam o foco (foco permanece na janela) ou fecham quando o foco entra no lado. Um botão de bate-papo no canto permanece pequeno ou se move de lado ao focar em um elemento abaixo.
É assim que lidamos com isso
A medição passa pela página com a tecla tabulação, mede a parte visível para cada elemento focado e compara com elementos adesivos; Parcialmente visível para o nível AA, totalmente visível para AAA. A mesma medição fornece ambos os valores. O critério pertence à categoria AAA no conhecimento; o relatório contém a parte oculta por ponto de referência.
Exemplos
Meio campo focado sob o botão de bate- papo
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }No nível AA, parte do elemento focado deve ser obscurecida, e nenhum pixel no AAA.
- Defina a parte superior e inferior do rolagem para a altura da virilha adesiva.
- Permitir que banners de cookies e janelas de referência capturem o foco até que estejam fechados.
- Passe por cada modelo com a tecla tabulação e observe o quadro de foco; Não pode desaparecer em lado nenhum.
- Mantenha os botões flutuantes (chat, up) pequenos e a uma distância da borda.
