--- url: 'https://metadrop.net/es/articulos/accesibilidad-de-la-navegacion-por-teclado-que-exige-wcag-y-como-comprobar-tu-sitio-web' title: 'Accesibilidad de la navegación por teclado: qué exige WCAG y cómo comprobar tu sitio web' author: 'Alberto Antoranz' date: '2026-09-29T09:32:31+00:00' updated: '2026-09-30T08:42:05+00:00' type: article summary: 'Para muchos sitios, la Ley Europea de Accesibilidad convierte WCAG AA en un requisito legal, y la navegación por teclado es una parte fundamental de ello. El artículo describe de quién depende de la navegación por teclado, los criterios WCAG que la cubren, los errores comunes que bloquean a los usuarios de teclado (submenús de cabecera en el orden de tabulación, contornos de enfoque eliminados, modales rotos, enlaces de salto ausentes y botones falsos), la solución técnica para cada uno y una comprobación manual para encontrar estos problemas en cualquier sitio.' tags: - Accessibility - Audit image: 'https://metadrop.net/sites/default/files/styles/full/public/2026-09/keyboard-navigation-wireframe.webp?itok=GSAkMTRz' files: - 'https://metadrop.net/sites/default/files/2026-09/2026-accessibility-keyboard-navigation.pdf' published: true og: determiner: Automatic site_name: Metadrop 'image:url': 'https://metadrop.net/sites/default/files/styles/full/public/2026-09/keyboard-navigation-wireframe.webp?itok=GSAkMTRz' 'image:type': image/webp 'image:width': '1028' 'image:height': '740' 'image:alt': 'Accesibilidad de la navegación por teclado: qué exige WCAG y cómo comprobar tu sitio web' street_address: 'Calle Manuel Luna, 12, 3 Dcha' locality: Madrid region: Madrid postal_code: '28020' country_name: España email: hola@metadrop.net phone_number: '910053180' schema: '@context': 'https://schema.org' '@graph': - '@type': Article '@id': 'https://metadrop.net/es/articulos/accesibilidad-de-la-navegacion-por-teclado-que-exige-wcag-y-como-comprobar-tu-sitio-web#article' name: 'Accesibilidad de la navegación por teclado: qué exige WCAG y cómo comprobar tu sitio web' headline: 'Accesibilidad de la navegación por teclado: qué exige WCAG y cómo comprobar tu sitio web' description: 'Para muchos sitios, la Ley Europea de Accesibilidad convierte WCAG AA en un requisito legal, y la navegación por teclado es una parte fundamental de ello. El artículo describe de quién depende de la navegación por teclado, los criterios WCAG que la cubren, los errores comunes que bloquean a los usuarios de teclado (submenús de cabecera en el orden de tabulación, contornos de enfoque eliminados, modales rotos, enlaces de salto ausentes y botones falsos), la solución técnica para cada uno y una comprobación manual para encontrar estos problemas en cualquier sitio.' about: - Accesibilidad - Auditoría image: '@type': ImageObject url: 'https://metadrop.net/sites/default/files/styles/full/public/2026-09/keyboard-navigation-wireframe.webp?itok=GSAkMTRz' width: '1028' height: '740' datePublished: '2026-09-30T10:32:31+0200' dateModified: '2026-09-30T10:42:05+0200' author: '@type': Person name: 'Alberto Antoranz' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/articulos/accesibilidad-de-la-navegacion-por-teclado-que-exige-wcag-y-como-comprobar-tu-sitio-web' - '@type': Organization '@id': 'https://metadrop.net/#organization' url: 'https://metadrop.net/' name: Metadrop sameAs: - 'https://www.drupal.org/metadrop' - 'https://twitter.com/metadrop' - 'https://asociaciondrupal.es/partner/metadrop' - 'https://www.linkedin.com/company/metadrop' logo: '@type': ImageObject url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg' width: '500' height: '500' - '@type': ItemPage '@id': 'https://metadrop.net/es/articulos/accesibilidad-de-la-navegacion-por-teclado-que-exige-wcag-y-como-comprobar-tu-sitio-web' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://metadrop.net/es' - '@type': ListItem position: 2 name: 'Artículos expertos sobre Drupal y tecnología' item: 'https://metadrop.net/es/articulos' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' --- 1. [Artículos](https://metadrop.net/es/articulos) # Accesibilidad de la navegación por teclado: qué exige WCAG y cómo comprobar tu sitio web Miércoles 30 de Septiembre de 2026 Para muchos sitios, la Ley Europea de Accesibilidad convierte WCAG AA en un requisito legal, y la navegación por teclado es una parte fundamental de ello. El artículo describe de quién depende de la navegación por teclado, los criterios WCAG que la cubren, los errores comunes que bloquean a los usuarios de teclado (submenús de cabecera en el orden de tabulación, contornos de enfoque eliminados, modales rotos, enlaces de salto ausentes y botones falsos), la solución técnica para cada uno y una comprobación manual para encontrar estos problemas en cualquier sitio. Desde junio de 2025, la Ley Europea de Accesibilidad ha convertido WCAG AA en un requisito legal para muchos sitios web de la UE. **La navegación por teclado es una de las áreas que cubre, y también es una de las pocas que cualquiera puede comprobar en unos pocos pasos**, sin software especial. Eso la convierte en un lugar práctico por donde empezar: el requisito es claro, los errores son reconocibles y las soluciones están bien definidas. ## Navegación sin ratón La navegación por teclado es **usar un sitio web sin ratón**: moverse entre enlaces, botones y campos de formulario, y activarlos, sólo con el teclado. Muchas personas dependen de ella: usuarios con discapacidad motriz, visitantes con una lesión temporal, usuarios de lectores de pantalla o quienes simplemente prefieren el teclado. El navegador mantiene el foco únicamente en un elemento, normalmente marcado con un contorno que lo destaca. El **teclado mueve ese foco de un elemento interactivo al siguiente**, siguiendo el orden del HTML (el código que estructura la página), y actúa sobre el elemento enfocado. Unas pocas teclas sirven para navegar: - **Tabulador / Shift+tabulador:** siguiente / anterior elemento interactivo - **Enter:** seguir un enlace o pulsar un botón - **Espacio:** pulsar un botón, marcar una casilla de verificación - **Flechas:** moverse dentro de menús, selectores, grupos de radio y pestañas - **Escape:** cerrar menús, desplegables y modales El siguiente vídeo muestra un ejemplo de un **sitio web usado solo con el teclado**. Para las personas que dependen del teclado, un sitio que falla aquí es difícil o imposible de usar. Para muchos sitios, **también es una cuestión legal**. ## El requisito legal detrás del acceso por teclado Desde que la Ley Europea de Accesibilidad entró en vigor en junio de 2025, cumplir WCAG AA ha sido un requisito legal para muchos sitios. La EAA **se aplica a servicios específicos, como comercio electrónico, banca, transporte y libros electrónicos, y exime a las microempresas**. Hace referencia a la norma europea EN 301 549, que se corresponde con WCAG 2.1 AA. WCAG cubre el uso del teclado en varios criterios, los principales son: - **2.1.1 Teclado (A):** todo funciona con el teclado. - **2.1.2 Sin trampa de teclado (A):** el foco siempre puede salir de cualquier elemento. - **2.4.1 Evitar bloques (A):** existe una forma de saltar bloques repetidos como la cabecera. - **2.4.3 Orden del foco (A):** el foco se mueve en un orden lógico. - **2.4.7 Foco visible (AA):** el elemento enfocado siempre es visible. - **2.4.11 Foco no oscurecido (AA):** las cabeceras fijas, los banners de cookies o los widgets de chat nunca ocultan por completo el elemento enfocado. Este criterio se añadió en WCAG 2.2. Otros criterios también tocan el uso del teclado, como descartar contenido mostrado al recibir el foco o exponer el estado de controles personalizados. La lista completa está en la referencia rápida de WCAG enlazada abajo. En la práctica, estos criterios fallan por un conjunto de errores recurrentes. ## Errores comunes que bloquean a los usuarios de teclado Una fuente común de problemas de teclado es algo que **funciona bien con ratón pero que no se prueba con el teclado**. El resultado son pulsaciones extra del tabulador, el foco que se pierde o un elemento que no al que no hay forma de llegar. - **Menú de cabecera:** los submenús se abren en cuanto el elemento padre recibe el foco, o permanecen ocultos solo visualmente pero siguen en el orden de tabulación. Cada tabulador recorre cada enlace hijo, en cada página, antes de llegar al contenido principal. - **Contorno de foco eliminado:** una regla de estilo como `outline: none` sin un reemplazo no deja forma de saber dónde está el foco. - **Modales:** el foco no se mueve al modal cuando se abre, o no puede salir de él. - **Sin enlace de salto:** sin un enlace "Saltar al contenido principal", la cabecera se repite en cada página. - **Botones falsos:** un `
` o `` con un clic no es enfocable y no responde a Enter o Espacio. Cada uno de estos errores es solucionable. ## La solución técnica detrás de cada error Cada solución es un cambio en el HTML, CSS o JavaScript del sitio. El menú de cabecera necesita cuatro cambios: 1. Los submenús **permanecen cerrados hasta que se abren** con Enter, Espacio o la flecha hacia abajo. 2. Un **submenú cerrado queda fuera del orden de tabulación** (`hidden` o `display: none`), así que el tabulador salta al siguiente elemento de nivel superior. 3. El conmutador contiene `aria-expanded="true|false"`, un **atributo que permite a los lectores de pantalla anunciar** si el submenú está abierto. 4. **Escape cierra el submenú abierto** y devuelve el foco a su conmutador. Para el contorno de foco, el selector CSS `:focus-visible` **da estilo al contorno** en lugar de eliminarlo. Para los modales, el foco va dentro al abrirse, permanece dentro mientras está abierto y vuelve al disparador al cerrarse. Escape lo cierra. El enlace de salto es un enlace **"Saltar al contenido principal"** colocado como el primer elemento enfocable de la página. Los botones falsos se sustituyen por los **elementos nativos** `