Navegación por teclado
Un sitio web accesible debe ser navegable utilizando únicamente el teclado.
Uso del teclado
Los usuarios de lectores de pantalla, las personas con movilidad reducida y algunos usuarios avanzados navegan por la web mediante el teclado.
Para navegar con el teclado se usan principalmente las siguientes teclas:
- Tab y Mayús + Tab para moverse por todos los elementos interactivos.
- Las flechas de dirección para moverse dentro un elemento, como por ejemplo un menú desplegable.
- Intro o Espacio para seleccionar o activar un elemento.
Todos los elementos de interacción (enlaces, botones, controles de formulario, etc.) deben ser operables mediante el teclado.
El foco del teclado
El foco del teclado se refiere al elemento que está seleccionado en ese momento y sobre el cual se puede ejercer una acción.
Los navegadores incluyen una línea de contorno por defecto para indicar dónde está el foco. Podemos cambiar su estilo modificando los valores de la propiedad CSS outline
.
a:focus-visible {
outline: 2px solid;
}
Nota: La pseudo clase :focus-visible
sirve para dar estilo a los enlaces solo en caso de navegación por teclado.
El atributo tabindex
El atributo tabindex
permite cambiar el comportamiento del enfoque en cualquier elemento de HTML.
Valores de tabindex
:
tabindex="-1"
: El elemento desaparece del orden secuencial del teclado.tabindex="0"
: Un elemento que normalmente no se puede enfocar pasa a ser accesible a través del teclado.- Valor positivo: Cambia el orden de prioridad en la tabulación.
Recomendaciones
Al navegar por un sitio web utilizando el teclado asegúrate de que:
- Los elementos interactivos están ordenados de forma lógica siguiendo el flujo visual de la página.
- Si es posible mover el foco a un componente mediante el teclado, entonces también se debe poder quitar el foco sólo con el teclado.
- Situar el foco sobre un elemento de interfaz no produce ningún cambio de contexto, como abrir una nueva ventana o enviar un formulario.