Foco visible: nunca oculte el contorno
Evite que los usuarios se pierdan en la página.
Foco visible: nunca oculte el contorno es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Dónde estoy ahora?
Una persona usuaria del teclado solo puede ver una cosa a la vez: qué control tiene el foco. Ese marcador visible se llama indicador de foco. 👀
El navegador le ofrece uno gratis
De forma predeterminada, el navegador dibuja un contorno de foco alrededor del elemento activo cuando utiliza Tab. Es el marcador integrado de «usted está aquí».
El pecado de accesibilidad más común
A menudo, los diseñadores detestan el contorno y lo eliminan. Esa única regla, outline none, deja inmediatamente a oscuras a quienes utilizan el teclado. No la publique nunca sin una alternativa.
:focus { outline: none; } /* harmful on its own */Elimínelo solo si lo sustituye
Puede quitar el contorno predeterminado, pero solo si añade un reemplazo claro. Nunca deje un control con foco exactamente igual que uno inactivo.
button:focus { outline: 3px solid #1565C0; }Hágalo evidente
Un buen indicador debe detectarse fácilmente: un contorno grueso, un anillo o un cambio de color marcado. Lo sutil es el enemigo en este caso, no su aliado.
focus-visible es más inteligente
El selector focus-visible muestra el anillo a quienes utilizan el teclado, pero lo oculta al hacer clic con el ratón. Obtiene seguridad sin ruido visual.
button:focus-visible { outline: 3px solid #1565C0; }El contraste también cuenta aquí
Un contorno que se funde con el fondo no ayuda a nadie. El estilo de foco necesita suficiente contraste para destacar sobre la página.
No recorte el anillo
Tenga cuidado con overflow hidden en un elemento principal. Puede recortar el contorno de foco y hacer que el borde inferior desaparezca silenciosamente.
offset añade espacio
Utilice outline-offset para alejar el anillo del elemento. Un pequeño espacio hace que el indicador sea mucho más fácil de detectar.
a:focus-visible { outline: 2px solid #1565C0; outline-offset: 2px; }Es un requisito de WCAG
No se trata solo de un detalle estético. WCAG exige un indicador de foco visible en cada elemento interactivo, por lo que ocultarlo puede impedir la conformidad.
Recorra su propio sitio con Tab
La prueba más rápida no cuesta nada: recorra la página con Tab. Si alguna vez pierde de vista el foco, debe mejorar el indicador.
Comprobación rápida
Elija la forma más segura de gestionar los estilos de foco.
Repaso: mantenga visible el foco
Nunca elimine el anillo de foco sin reemplazarlo. Prefiera focus-visible, proporciónele un contraste y un desplazamiento marcados, y pruébelo usted mismo con Tab. ✅
Preguntas frecuentes
¿La lección «Foco visible: nunca oculte el contorno» es gratis?
Sí — el texto completo de «Foco visible: nunca oculte el contorno» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Foco visible: nunca oculte el contorno»?
Evite que los usuarios se pierdan en la página. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Foco visible: nunca oculte el contorno»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Tab, Shift+Tab, Enter y Space: las teclas fundamentales
- Foco visible: nunca oculte el contorno
- El orden lógico de tabulación sigue el contenido
- Detecte las trampas de teclado