Un usuario navega por tu menú de navegación usando la tecla Tab. Presiona Tab. El navegador mueve el enfoque al siguiente enlace. Pero no puede ver dónde está. El indicador de enfoque es un contorno gris de 1 píxel sobre un fondo blanco—invisible a menos que entrecierres los ojos. Presiona Tab de nuevo. Aún nada visible. Se rinde y se va.
Acabas de perder a un cliente que estaba tratando activamente de usar tu sitio.
Los indicadores de enfoque son la parte más subestimada de la navegación por teclado. La mayoría de los diseñadores los tratan como algo secundario o activamente los suprimen porque “se ven feos”. Pero para los usuarios de teclado—ya sea que sean ciegos, tengan discapacidades motoras o simplemente sean usuarios eficientes—los indicadores de enfoque son el cursor. Sin ellos, la navegación es imposible.
La buena noticia: diseñar indicadores de enfoque efectivos no es difícil. La mala noticia: la mayoría de los sitios de comercio electrónico lo hacen mal, y WCAG 2.2 ha elevado el estándar aún más.
- WCAG 2.2 Criterio de Éxito 2.4.11 requiere indicadores de enfoque con al menos 2px de perímetro o área equivalente
- Los indicadores de enfoque deben tener una relación de contraste de 3:1 tanto contra el componente como contra los colores adyacentes
- Los estilos de enfoque predeterminados del navegador fallan los requisitos de contraste en el 78% de las combinaciones de colores
- Los indicadores de enfoque personalizados que coinciden con los colores de la marca mejoran la UX sin sacrificar la accesibilidad
- La pseudoclase focus-visible te permite mostrar el enfoque para usuarios de teclado mientras lo ocultas para usuarios de ratón
Lo que WCAG 2.2 realmente requiere
WCAG 2.2, publicado en octubre de 2023, introdujo un nuevo criterio de nivel AA específicamente para indicadores de enfoque: Criterio de Éxito 2.4.11 Apariencia del Enfoque.
Las directrices anteriores (WCAG 2.1 2.4.7 Focus Visible) solo requerían que el enfoque fuera visible—cualquier indicador visible pasaba. Pero “visible” es subjetivo. Un contorno gris claro de 1 píxel sobre blanco técnicamente cuenta como visible, aunque sea funcionalmente inútil.
WCAG 2.2 establece requisitos específicos:
Requisito de tamaño
El indicador de enfoque debe tener al menos 2 píxeles CSS de grosor para todo el perímetro del componente enfocado, o tener un área equivalente.
Lo que significa en la práctica:
- Un contorno sólido de 2px alrededor de un botón: aprueba
- Un contorno de 1px: falla (a menos que cubra un área mayor)
- Un contorno de 4px en un solo lado: falla (no cubre el perímetro)
- Un subrayado grueso debajo de un enlace que mide 2px de alto y al menos tan ancho como el texto del enlace: aprueba
Requisito de contraste
El indicador de enfoque debe tener una relación de contraste de al menos 3:1 contra:
- El estado sin enfoque del componente
- Colores adyacentes (fondo detrás del componente)
Esto es más difícil de lo que parece. Si tu enlace de navegación es texto azul oscuro sobre un fondo blanco, e tu indicador de enfoque es un contorno azul claro, necesitas:
- Contraste de 3:1 entre el contorno azul claro y el fondo blanco (color adyacente)
- Contraste de 3:1 entre el contorno azul claro y el texto azul oscuro (color del componente)
Muchos diseñadores eligen un color de marca para el enfoque que se ve genial pero falla uno de estos controles de contraste.
El problema del contorno predeterminado del navegador
La mayoría de los navegadores proporcionan un contorno de enfoque predeterminado—generalmente una línea punteada o sólida delgada. Chrome usa un contorno azul de 2px. Firefox usa un contorno punteado. Safari usa un brillo azul.
Estos valores predeterminados fallan WCAG 2.2 en muchos contextos:
| Navegador | Contorno predeterminado | Falla común |
|---|---|---|
| Chrome | 2px azul sólido (#4A90E2) | Falla contraste en fondos azul claro |
| Firefox | 1px punteado | Demasiado delgado (falla requisito de tamaño) |
| Safari | Brillo azul + contorno | El brillo no cuenta para el tamaño; pasa solo en escritorio |
| Edge | 2px azul sólido | Igual que Chrome |
La investigación de WebAIM encontró que los estilos de enfoque predeterminados fallan los requisitos de contraste en aproximadamente el 78% de las combinaciones de colores utilizadas en sitios web reales.
Por eso los indicadores de enfoque personalizados importan. No puedes confiar en los valores predeterminados del navegador.
Cómo se ven los buenos indicadores de enfoque
Los mejores indicadores de enfoque equilibran visibilidad, consistencia de marca y accesibilidad. Aquí hay patrones probados de los principales sitios de comercio electrónico.
Patrón 1: Contorno de alto contraste
El patrón más común es un contorno sólido con contraste fuerte:
a:focus,
button:focus {
outline: 3px solid #0066CC; /* Azul con alto contraste */
outline-offset: 2px; /* Espacio entre elemento y contorno */
}
Esto funciona bien para enlaces de navegación, botones y entradas de formulario. El desplazamiento de 2px evita que el contorno se superponga con los bordes del texto o icono, mejorando la legibilidad.
Ejemplo real: Amazon usa un contorno naranja de 3px (#FF9900) con desplazamiento de 2px en todos los elementos interactivos. El naranja pasa contraste sobre fondos blancos (6.8:1) y contra sus botones azul oscuro (4.2:1).
Patrón 2: Combinación de fondo + contorno
Para una integración visual más ajustada, combina un cambio de color de fondo con un contorno delgado:
a:focus,
button:focus {
background-color: #E6F2FF; /* Fondo azul claro */
outline: 2px solid #0066CC; /* Contorno azul más oscuro */
outline-offset: 0;
}
Esto es especialmente efectivo para menús de navegación donde quieres que el enlace enfocado se destaque del resto del menú.
Ejemplo real: La navegación superior de Google usa un fondo gris claro (#F1F3F4) con un contorno negro de 2px en elementos enfocados. El fondo crea un estado “seleccionado” claro, mientras que el contorno proporciona el contraste requerido.
Patrón 3: Subrayado para enlaces de texto
Para enlaces de texto en línea dentro del contenido, un subrayado grueso es a menudo más claro que un contorno:
a:focus {
outline: none; /* Elimina contorno predeterminado */
text-decoration: underline;
text-decoration-thickness: 3px;
text-decoration-color: #0066CC;
text-underline-offset: 4px;
}
Esto mantiene el indicador de enfoque cerca del texto y evita el aspecto “caja alrededor de una palabra” que crean los contornos.
Ejemplo real: La documentación de Shopify usa un subrayado azul de 3px en enlaces enfocados, posicionado 4px debajo de la línea de base del texto.
Patrón 4: Sombra para tarjetas interactivas
Para diseños basados en tarjetas (tarjetas de productos, cuadros de características), una sombra de caja crea profundidad:
.product-card:focus {
outline: none;
box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}
La primera capa de sombra (desenfoque 0px, expansión 3px) actúa como el indicador de enfoque. La segunda agrega profundidad visual.
Ejemplo real: Etsy usa una sombra azul de 3px alrededor de tarjetas de productos cuando están enfocadas, combinada con una sombra de caída sutil para profundidad.
El truco :focus-visible
Una queja común de los diseñadores sobre los indicadores de enfoque es que aparecen cuando los usuarios hacen clic con el ratón, creando un contorno “atascado” después del clic. Esto sucede porque :focus se activa en cualquier evento de enfoque—ratón, teclado o programático.
La solución es la pseudoclase :focus-visible, compatible en todos los navegadores modernos desde 2022:
/* Muestra indicador de enfoque solo para usuarios de teclado */
a:focus-visible,
button:focus-visible {
outline: 3px solid #0066CC;
outline-offset: 2px;
}
/* Oculta contorno predeterminado para usuarios de ratón */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
Esto muestra el indicador de enfoque cuando los usuarios navegan con Tab, pero lo oculta cuando hacen clic con el ratón. Lo mejor de ambos mundos.
Advertencia importante: Algunos usuarios con discapacidades motoras usan tanto teclado como ratón—pueden hacer clic para enfocar un elemento, luego usar el teclado para interactuar. No asumas que :focus-visible significa “solo usuario de lector de pantalla”. Significa “navegación por teclado en progreso”.
Prueba de tus indicadores de enfoque
Aquí te muestro cómo verificar si tus indicadores de enfoque cumplen WCAG 2.2:
Paso 1: Prueba manual de teclado
Abre tu sitio y presiona Tab repetidamente. Hazte estas preguntas:
- ¿Siempre puedo ver dónde está el enfoque?
- ¿El indicador de enfoque tiene al menos 2px de grosor?
- ¿Se ve diferente del estado sin enfoque?
- ¿Puedo verlo en fondos claros? ¿Fondos oscuros?
- ¿Desaparece o se vuelve difícil de ver en hover?
Si respondes “no” a cualquiera de estas, tienes un problema de indicador de enfoque.
Paso 2: Verificación de relación de contraste
Usa una herramienta como WebAIM’s Contrast Checker para verificar:
-
Indicador de enfoque vs. fondo: Mide el contraste entre el color de tu contorno de enfoque y el fondo detrás del elemento. Debe ser al menos 3:1.
-
Indicador de enfoque vs. componente: Mide el contraste entre el color de tu contorno de enfoque y el color principal del componente (color de texto para enlaces, color de fondo para botones). Debe ser al menos 3:1.
Si tu indicador de enfoque es #0066CC (un azul común), verifica contra:
- Fondo blanco: 8.1:1 (aprueba)
- Fondo gris claro (
#F5F5F5): 7.2:1 (aprueba) - Fondo azul claro (
#CCE5FF): 2.2:1 (falla)
Cuando falla, necesitas un color de enfoque más oscuro o más claro según el contexto.
Paso 3: Auditoría automatizada
Ejecuta estas herramientas para detectar problemas comunes de indicadores de enfoque:
- axe DevTools (extensión del navegador): Marca indicadores de enfoque faltantes y contornos de bajo contraste
- Lighthouse Accessibility (en Chrome DevTools): Verifica elementos enfocables sin estilos de enfoque visibles
- WAVE (herramienta de evaluación de accesibilidad web): Destaca problemas de orden de enfoque y visibilidad de enfoque
Ninguna de estas herramientas cumple perfectamente con los requisitos de tamaño y contraste de WCAG 2.2 (el estándar es nuevo), pero detectan problemas obvios.
Errores comunes de indicadores de enfoque
Estos son los fallos que veo más a menudo en tiendas Shopify:
Error 1: Suprimir enfoque completamente
Muchos temas incluyen este CSS:
*:focus {
outline: none;
}
Esto elimina todos los indicadores de enfoque en todo el sitio. Es el peor error de accesibilidad que puedes cometer.
Por qué ocurre: Los diseñadores no les gusta el contorno predeterminado del navegador y lo eliminan sin reemplazarlo.
Solución: Elimina esa regla y agrega estilos de enfoque personalizados usando :focus-visible.
Error 2: Contornos invisibles en fondos oscuros
Un contorno de enfoque azul claro se ve genial en fondos blancos pero desaparece en barras de navegación oscuras o secciones de pie de página.
Ejemplo de falla:
a:focus {
outline: 2px solid #66A3E0; /* Azul claro */
}
En un fondo azul oscuro (#1A2332), este contorno tiene solo 1.8:1 de contraste—falla WCAG.
Solución: Usa diferentes colores de enfoque para contextos claros y oscuros:
/* Fondo claro */
.light-section a:focus {
outline: 3px solid #0066CC; /* Azul oscuro */
}
/* Fondo oscuro */
.dark-section a:focus {
outline: 3px solid #FFFFFF; /* Blanco */
}
O usa un color de alto contraste que funcione en todas partes, como negro en fondos claros y blanco en fondos oscuros.
Error 3: Indicadores de enfoque más pequeños que 2px
Los contornos delgados fallan el requisito de tamaño de WCAG 2.2:
button:focus {
outline: 1px solid #0066CC; /* Demasiado delgado */
}
Solución: Aumenta a al menos 2px, o usa un contorno más grueso en un lado:
button:focus {
outline: none;
border-bottom: 4px solid #0066CC; /* Subrayado grueso */
}
Error 4: Confiar solo en cambio de color
Cambiar solo el color del texto o color de fondo en el enfoque falla si el cambio no crea un indicador visual claro:
a:focus {
color: #0066CC; /* El texto se vuelve azul */
}
Esto podría ser visible para usuarios con vista, pero los usuarios de lectores de pantalla no reciben indicación de que el enfoque se ha movido. Y si el color de texto original ya era similar al azul, el cambio podría ser demasiado sutil.
Solución: Siempre agrega un indicador de perímetro (contorno, subrayado o borde).
Indicadores de enfoque para mega menús
Los mega menús presentan un desafío único porque contienen múltiples niveles de navegación. Cuando un usuario entra en un mega menú, ¿dónde debería ir el enfoque? Cuando avanzan por los submenús, ¿cómo muestras qué elemento tiene enfoque?
Aquí hay un patrón robusto:
/* Elemento de navegación de nivel superior */
.nav-item > a:focus {
outline: 3px solid #0066CC;
outline-offset: -3px; /* Dentro del elemento */
background-color: #F0F7FF;
}
/* Elementos del submenú */
.mega-menu a:focus {
background-color: #E6F2FF;
outline: 2px solid #0066CC;
}
Detalles clave:
- Los elementos de nivel superior usan
outline-offset: -3pxpara dibujar el contorno dentro del límite del elemento, evitando superposición con elementos adyacentes - Los elementos del submenú obtienen tanto un color de fondo (para destacarse de la cuadrícula) como un contorno (para cumplir con el requisito de tamaño WCAG)
Ejemplo real: Navi+ Menu Builder genera mega menús con este patrón incorporado—los elementos de nivel superior se resaltan con un color de fondo y contorno, y los submenús usan navegación con teclas de flecha con indicadores de enfoque claros en cada elemento.
El caso de negocio para mejores indicadores de enfoque
La mayoría de los propietarios de tiendas no priorizan los indicadores de enfoque porque parecen un detalle visual menor. Pero el impacto es medible.
La encuesta de 2024 de WebAIM sobre usuarios de lectores de pantalla encontró que el 87% de los encuestados citó “navegación por teclado” como la función de accesibilidad más importante, por delante del texto alternativo, HTML semántico y etiquetas ARIA. Dentro de la navegación por teclado, los indicadores de enfoque visibles se clasificaron como la principal frustración.
Cuando los usuarios no pueden ver dónde están en la página, no pueden completar tareas. Eso se traduce directamente en ingresos perdidos.
La investigación del Baymard Institute sobre usabilidad de checkout muestra que “checkout demasiado largo/complicado” causa el 17% del abandono de carrito. Para usuarios de teclado en un sitio con indicadores de enfoque pobres, cada checkout es demasiado complicado—gastan tiempo extra reorientándose en cada campo, o abandonan completamente.
Por el contrario, los sitios con indicadores de enfoque fuertes ven mejores tasas de finalización de tareas. Un estudio de Nomensa sobre ROI de accesibilidad encontró que los sitios accesibles (incluida la buena gestión del enfoque) tenían tasas de finalización de tareas 23% más altas que competidores inaccesibles.
Mejores indicadores de enfoque no solo te ayudarán a pasar auditorías. Ayudarán a los usuarios a terminar de comprar.
Lista de verificación de implementación rápida
Aquí hay un plan de acción de 20 minutos para mejorar tus indicadores de enfoque:
Inmediato (5 minutos):
- Agrega este CSS base a tu tema:
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #0066CC; outline-offset: 2px; } - Prueba en tu página de inicio, menú de navegación y checkout. ¿Ves el indicador de enfoque en todas partes?
Esta semana (1 hora):
-
Elige un color de enfoque apropiado para la marca que cumpla con los requisitos de contraste. Usa el Contrast Checker de WebAIM para verificar 3:1 contra tus colores de fondo principales.
-
Personaliza los estilos de enfoque para diferentes secciones (fondos claros vs. fondos oscuros).
-
Prueba tu mega menú (si tienes uno). Asegúrate de que los elementos del submenú enfocados sean claramente visibles.
Este mes (2-3 horas):
- Agrega estilos de enfoque específicos para componentes interactivos:
- Tarjetas de productos
- Botones agregar al carrito
- Casillas de filtro
- Sugerencias de autocompletado de búsqueda
- Botones para cerrar modales
-
Ejecuta una auditoría automatizada con axe DevTools y soluciona cualquier problema de enfoque marcado.
- Ten a un miembro del equipo (o cliente) navegue tu sitio solo con teclado e informe dónde el enfoque es difícil de ver.
Los indicadores de enfoque son uno de los beneficios de accesibilidad más fáciles. El trabajo técnico es mínimo—algunos docenas de líneas de CSS—pero el impacto es enorme. Cada usuario de teclado que aterriza en tu sitio se beneficiará.
This article is part of the larger guide on Keyboard navigation: why it matters beyond accessibility.