Al navegar con teclado, la persona necesita reconocer qué elemento recibirá la siguiente acción. El indicador de foco cumple esa función. Si desaparece por una decisión estética, pulsar Enter puede convertirse en una apuesta sobre qué botón está seleccionado. En una página de inscripción a un curso, eso puede afectar desde la elección de modalidad hasta el envío final. El foco no es un detalle exclusivo de programadores: forma parte del diseño visual y debe revisarse sobre todos los fondos y estados en los que se utilizarán los controles.
Diferenciar foco, selección y estado activo
Un enlace puede estar enfocado sin representar la página actual. Una casilla puede estar seleccionada aunque el foco ya se haya movido. Esos estados necesitan señales distintas para no confundir navegación y elección. Pide una muestra de cada uno en los componentes del sitio. En el formulario de inscripción, la modalidad elegida debería seguir reconocible después de avanzar a otro campo, mientras el indicador de foco muestra dónde se encuentra la interacción presente. No reutilices una misma apariencia sin evaluar su significado. El objetivo es que el visitante entienda tanto lo que eligió como lo que puede activar a continuación.
Revisar el indicador en contextos reales
Una línea oscura puede verse sobre blanco y desaparecer sobre una fotografía o un botón del mismo color. Comprueba foco en cabecera, tarjetas, formularios y pie. WAI establece la necesidad de un indicador visible para la operación con teclado; diseñarlo requiere considerar los fondos reales, no solo una muestra aislada en el sistema visual. Evita eliminar el contorno predeterminado sin reemplazarlo por una alternativa perceptible. El indicador puede formar parte de la identidad, pero su función principal es orientar. Si apenas se nota en la pantalla de revisión, no lo des por suficiente porque técnicamente existe una regla de estilo.
Evitar que otros elementos lo cubran
El foco puede ser visible en teoría y quedar escondido debajo de una cabecera fija, una barra de contacto o un panel superpuesto. Recorre la página mientras se desplaza automáticamente hacia los controles. Observa especialmente campos cercanos a los bordes y botones dentro de contenedores con desplazamiento propio. Al ampliar el contenido, los elementos fijos ocupan una proporción mayor del espacio disponible. Registra cualquier situación donde no puedas ver el control completo o reconocer su indicador. La corrección puede requerir ajustar distribución y desplazamiento, no simplemente cambiar el color del borde que marca la interacción.
Incluirlo en las entregas visuales
Solicita que las propuestas de componentes muestren estado normal, foco y otras variantes necesarias. Así el indicador se diseña desde el principio y no se añade como una reparación al final. Durante la entrega, realiza una tarea completa con teclado y pregunta en cada paso qué acción ocurrirá al activar el control. Si necesitas adivinar, revisa señal y orden. Conserva ejemplos en la guía de mantenimiento para que nuevos botones no pierdan el comportamiento acordado. Una revisión automática puede ayudar a detectar ciertos problemas, pero la visibilidad y coherencia del foco necesitan observación en la interfaz que realmente utiliza el público.
DE LA LECTURA A LA ACCIÓN
Para aplicar hoy
- Foco y selección expresan cosas diferentes y deben distinguirse.
- Comprueba el indicador sobre todos los fondos utilizados.
- Revisa que barras y paneles no oculten el control enfocado.
Fuentes y referencias
Documentación para profundizar. Los ejemplos de esta guía son didácticos.