HTML
Tutorial HTML: Navegación por teclado
HTML navegación teclado: accesibilidad. Aprende a mejorar la accesibilidad en HTML mediante la navegación por teclado con ejemplos prácticos.
Aprende HTML GRATIS y certifícateLa navegación por teclado es una parte esencial de la accesibilidad web. Permite que los usuarios que no pueden o no quieren usar un ratón, puedan interactuar con una página web usando solo el teclado. Esto incluye a personas con discapacidades físicas, pero también a personas que simplemente prefieren usar el teclado por eficiencia o comodidad.
Elementos enfocables
La mayoría de los elementos que el usuario puede interactuar en una página web son enfocables por defecto. Esto incluye:
- Enlaces (
<a href="...">
) - Botones (
<button>
) - Campos de entrada (
<input>
,<textarea>
,<select>
) - Elementos con el atributo
contenteditable
establecido entrue
Por ejemplo:
<a href="https://www.ejemplo.com">Un enlace</a>
<button>Un botón</button>
<input type="text" placeholder="Un campo de entrada">
<textarea>Un campo de texto</textarea>
<select>
<option>Opción 1</option>
<option>Opción 2</option>
</select>
<div contenteditable="true">Un elemento editable</div>
Todos estos elementos son enfocables mediante la tecla Tab
del teclado y se puede interactuar con ellos mediante otras teclas como Enter
o Space
.
Atributo tabindex
El atributo tabindex
puede usarse para modificar el orden de tabulación por defecto o para hacer que elementos que normalmente no son enfocables, se puedan enfocar.
- Un
tabindex="0"
hará que el elemento sea enfocable y participe en la navegación secuencial del teclado. - Un
tabindex
positivo (por ejemplo,tabindex="1"
) hará que el elemento sea enfocable y que se coloque en la posición especificada en el orden de tabulación. Sin embargo, es recomendable no usartabindex
positivo ya que puede hacer que la navegación sea confusa para el usuario. - Un
tabindex="-1"
hará que el elemento sea enfocable pero no participe en la navegación secuencial del teclado. Solo se puede enfocar programáticamente con JavaScript.
Por ejemplo:
<div tabindex="0">Este div es enfocable</div>
Navegación por teclado con JavaScript
También es posible gestionar la navegación por teclado de forma programática utilizando JavaScript. Por ejemplo, es posible enfocar un elemento utilizando el método focus()
:
document.querySelector('button').focus();
También se puede escuchar el evento keydown
para gestionar el comportamiento al presionar una tecla:
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowDown') {
// Gestiona la tecla de flecha hacia abajo
}
});
Consideraciones finales
Es importante tener en cuenta que la navegación por teclado es solo una parte de la accesibilidad web. También hay que considerar otras cosas como los lectores de pantalla, los colores y contrastes adecuados, entre otros.
Además, una buena navegación por teclado debe ser intuitiva y seguir un flujo lógico. Los usuarios de teclado deben poder acceder a todos los elementos interactivos de la página y saber en todo momento en qué parte de la página están. Esto a menudo se indica visualmente con un estilo de foco.
Finalmente, aunque HTML proporciona muchos de los comportamientos de teclado por defecto, a veces puede ser necesario personalizar este comportamiento con JavaScript, especialmente para los widgets complejos. En estos casos, es aconsejable seguir las prácticas recomendadas como las definidas en las pautas de accesibilidad del WAI-ARIA.
Ejercicios de esta lección Navegación por teclado
Evalúa tus conocimientos de esta lección Navegación por teclado con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender la importancia de la navegación por teclado en la accesibilidad web y su impacto en la experiencia del usuario.
- Identificar los elementos enfocables por defecto y cómo utilizar el atributo
tabindex
para modificar el orden de tabulación. - Conocer cómo gestionar la navegación por teclado de forma programática mediante JavaScript utilizando métodos como
focus()
y eventos comokeydown
. - Reconocer la importancia de una navegación por teclado intuitiva, el estilo de foco visual y la necesidad de seguir las pautas de accesibilidad como WAI-ARIA.