Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Por qué un elemento enfocado nunca debe ocultarse?
Cualquier persona que pasa por una página con el teclado debe ver dónde está el foco. Barras adhesivas, banners de cookies y ventanas de chat sobre el contenido; El foco aterriza debajo y es invisible. Nivel AA (2.4.11, nuevo en WCAG 2.2) requiere que el elemento concentrado siga siendo al menos parcialmente visible. El criterio de nivel AAA 2.4.12 requiere: totalmente visible, ningún pixel oscurecido.
Lo que el Criterio requiere
Cuando un artículo recibe el foco del teclado, ninguna parte de él está detrás de cualquier otro contenido que el autor ha generado: ninguna cabecera pegajosa o calzado, ninguna banner de cookies, ningún botón de chat, ninguna ventana de referencia. Al cambiar de enfoque, el navegador se desplaza sólo hasta ahora que el elemento entra en el área visible; No sabe nada de los que están por encima. Por lo tanto, el lado debe asegurarse de que el área bajo una tira adhesiva se mantenga clara durante el desplazamiento.
Aplicación
La propiedad CSS rollo-padding en el contenedor de desplazamiento se reserva hasta y hacia abajo tanto espacio como las tiras adhesivas son altas; el navegador entonces desplaza elementos enfocados debajo de la barra. Windows acostado sobre el lado capturar el foco (foco permanece en la ventana) o cerrar cuando el foco entra en el lado. Un botón de chat en la esquina sigue siendo pequeño o se mueve a un lado cuando se centra en un elemento debajo.
Así es como nos ocupamos de ello
La medición pasa a través de la página con la tecla de pestaña, mide la porción visible para cada elemento concentrado y se compara con elementos adhesivos; Parcialmente visible para el nivel AA, completamente visible para AAA. La misma medición proporciona ambos valores. El criterio pertenece a la categoría AAA en conocimiento; el informe contiene la parte oculta por punto de referencia.
Ejemplos
Campo centrado medio bajo el botón chat
.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; }En el nivel AA, parte del elemento concentrado debe estar oscurecida, y ningún pixel en AAA.
- Establece la parte superior y inferior del pergamino a la altura de su ingle adhesivo.
- Permitir banners de cookies y ventanas de referencia para captar el foco hasta que estén cerrados.
- Vaya a través de cada plantilla con la tecla de pestaña y observe el marco de enfoque; No debe desaparecer en ninguna parte.
- Mantenga los botones flotantes (caja, arriba) pequeños y a una distancia del borde.
