Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿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.
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.
- 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.