Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung
Accesibilidad
¿Por qué debe ser navegable por teclado un sitio web sin usar el ratón?
Un sitio web debe funcionar sin ratón porque muchas personas usan solo el teclado: personas ciegas con lector de pantalla, personas con temblores o parálisis y usuarios de teclados especiales. Si Tab no llega a un elemento de menú o un botón, esta función simplemente no existe para todas estas personas — como si nunca la hubiera construido. El criterio WCAG 2.1.1 exige por lo tanto funcionalidad completa por teclado.
Funcionamiento por teclado en la práctica: Tab, Intro y teclas de flecha
El funcionamiento sin ratón sigue un patrón fijo. La tecla Tab mueve una marca visible de elemento en elemento: del logo al menú, del menú al campo de búsqueda, a continuación a enlaces y botones. La tecla Intro abre el elemento marcado, las teclas de flecha controlan menús y listas de selección. Un ejemplo: quien completa su formulario de contacto salta con Tab de campo en campo y envía al final con Intro. Este patrón solo funciona si cada elemento de control está codificado técnicamente como enlace, botón o campo de formulario. Un párrafo de texto con clic que un script convierte en botón se ve igual con el ratón — para el teclado no existe.
Así verifica el servicio de comprobación el funcionamiento por teclado
El servicio de comprobación presiona realmente la tecla Tab en su página, parada a parada, hasta el final del documento. Además busca en el código fuente elementos de control que solo responden al clic del ratón: elementos con instrucción de clic inaccesibles para el teclado. Si encuentra tales elementos, el criterio se considera incumplido y el informe nombra el primer elemento afectado junto con una foto de evidencia. Si Tab no llega a ninguna parada a pesar de elementos de control existentes, también es incumplimiento. Si la medición queda sin decidir, el informe lo señala claramente como punto manual — una medición vacía cuenta como error para nosotros, nunca como vía libre.
Ejemplos
Haga clic en Handler en un div
<div class="knopf" onclick="warenkorb()">In den Warenkorb</div><button type="button" onclick="warenkorb()">In den Warenkorb</button>Un div no alcanza la tecla de la pestaña y no responde a la tecla Entrar o espacio. Un botón puede hacer ambos por su cuenta.
Menú se abre sólo cuando se cruza
.menue li:hover > ul { display: block; }.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }focus-within también abre el submenú si el foco está en una entrada por teclado.
- Ponga el ratón a un lado y maneje su página de inicio durante cinco minutos usando solo la tecla tabulación, la tecla Intro y las teclas de flecha.
- Compruebe especialmente menús, campo de búsqueda y carrito de compras; ahí es donde se esconden la mayoría de los lugares que solo responden al clic del ratón.
- Pida a su agencia que use elementos de control reales para cada elemento en el que se pueda hacer clic: enlace, botón o campo de formulario en lugar de texto en el que se pueda hacer clic.
- Repita la prueba del teclado después de cada cambio importante; un nuevo script de menú puede eliminar la navegación por teclado sin ser notado.
