Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung
Accesibilidad
¿Cómo es que un marco de enfoque se destaca realmente?
El marco de enfoque muestra a los usuarios del teclado donde están. Nivel AA (2.4.7) requiere sólo que sea visible; Un marco delgado y pálido cumple esto. El criterio de nivel AAA 2.4.13 especifica las medidas: El marco focal encierra el elemento con una línea de al menos 2 píxeles CSS, y el área que cambia en foco tiene un contraste de al menos 3:1 entre estados enfocados y no centrados.
Lo que el Criterio requiere
Dos medidas, medibles. Primero, el área: el marco focal es al menos tan grande como un esquema de 2 píxeles de espesor alrededor del elemento; Un subrayado solo o un marco de 1 píxeles no es suficiente. En segundo lugar, el contraste: los píxeles que cambian de enfoque difieren del estado sin foco por lo menos 3:1. Un marco azul oscuro en un botón azul oscuro cae a través, un marco blanco con timón oscuro en cada fondo existe.
Un marco que funciona en cualquier fondo
Debido a que los botones pueden ser ligeros y oscuros, un enfoque de dos colores es exitoso: un esquema de 2 píxeles en un color audaz con 2 píxeles distancia al elemento (outline-offset) y una sombra adicional en el contra-color. Así, el contraste se mantiene en superficies ligeras y oscuras. El foco predeterminado del navegador es a menudo demasiado delgado o se elimina de la hoja de estilo con esquema: ninguno; Esta prohibición es la razón más común para el enfoque invisible.
Así es como nos ocupamos de ello
La medición centra cada elemento de control, compara los píxeles antes y después del foco, y mide el espesor y el contraste del cambio. Esto hace que el criterio sea completamente testable automáticamente; el nivel de la prueba AA (focus visible) proporciona los mismos datos. El criterio pertenece a la categoría AAA en conocimiento; en el informe, el espesor y el contraste por referencia.
Ejemplos
Marco focal pálido
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Al menos 2 píxeles delinean, y los píxeles cambiados difieren del estado desenfocado por 3:1. La sombra blanca mantiene el contraste en las superficies oscuras.
- Quitar cada contorno: ninguno de la hoja de estilo, que no define inmediatamente su propio enfoque.
- Definir un enfoque global con:focus-visible: contorno de 3 píxeles, contorno de 2 píxeles, en un color de 3:1 al fondo.
- Agregue una sombra en el contra-color para que el marco permanezca visible en superficies claras y oscuras.
- Ir a través de la página con la tecla de pestaña y comprobar cada estado: menú, botones, campos, enlaces en el texto.
