Resumen

  • El borrador de Selectors Level 4 de febrero de 2018 distinguió el elemento que tiene el foco, identificado por :focus, del que el navegador considera necesario señalar visualmente mediante :focus-visible.
  • Los textos posteriores desarrollaron indicios como la entrada por teclado, los campos de texto, las preferencias del usuario y el traslado del foco por un programa. La página diseña la señal; el navegador conoce el trayecto.

Un diseñador pulsa un botón con el ratón. Aparece un borde que no figuraba en la maqueta y lo elimina con una regla CSS. La prueba con ratón sale perfecta. Luego alguien pulsa Tab. El foco avanza hasta el botón, pero la página se guarda la noticia. El lector presiona la siguiente tecla a ciegas, como quien llama a un ascensor sin saber en qué planta está. El borde perdió su empleo por atreverse a indicar una ubicación.

El borrador del W3C del 2 de febrero de 2018 separó dos hechos que suelen confundirse. :focus señala qué elemento recibe los eventos de entrada. :focus-visible se aplica cuando, además, el navegador calcula que ese hecho debe hacerse evidente. El texto contrapone un campo de escritura, donde las teclas alterarán el contenido, y un botón al que se llega con Tab. En ambos casos resulta útil ver el destino. Un clic directo sobre un botón ya trae consigo el puntero que lo señaló. Mismo botón, otra historia de llegada.

Ahí está la decisión compartida. El navegador sabe cómo se movió el lector, y puede atender a los ajustes que ha elegido. El sitio sabe qué borde, color y contraste encajan con su diseño. Borrar outline de todos los elementos enfocados arroja la primera información al cubo de la basura. Dar a :focus-visible un estilo claro convierte esa información en una señal diseñada. El contorno no necesita pedir perdón por existir; necesita que alguien lo dibuje bien.

El texto del 21 de noviembre de 2018 fue bastante menos tímido que muchas hojas de estilo reales. Su ejemplo emplea un contorno amarillo grueso para cualquier elemento que coincida con :focus-visible, y añade un fondo amarillo a los enlaces. La señal no parece un accidente de fabricación. Es una elección deliberada: el lector debe distinguir el siguiente destino entre otros botones, campos y titulares que compiten por la vista.

Los indicios sugeridos en ese borrador tienen escenas propias. Si una persona pide que el foco siempre se vea, el navegador debe respetar esa preferencia. Un cuadro de texto merece un aviso porque recibirá la escritura. El recorrido por teclado o por otro dispositivo sin puntero hace útil una marca visible; un toque directo con puntero proporciona otra pista. El documento ofrece pautas para los navegadores, no una coreografía universal con cada paso fijado. A la página le llega la decisión a través del selector.

El caso que pone a prueba la idea ocurre cuando un programa mueve el foco. Una persona abre un cuadro con el teclado y el script coloca el foco en la primera acción. La propuesta de noviembre pide que la visibilidad acompañe al movimiento si el control anterior ya mostraba una marca. Dejarla atrás en la puerta del cuadro sería perder al lector justo cuando cambia de habitación. También describe la continuidad de un recorrido que comenzó con puntero. La memoria del trayecto importa tanto como el elemento de destino.

El borrador del 7 de mayo de 2022 dijo la relación con mayor precisión: :focus coincide con el elemento enfocado; :focus-visible coincide cuando el navegador decide señalarlo. Los autores pueden cambiar cómo se ve la marca sin cambiar cuándo aparece. El mismo texto recomienda que los agentes de usuario usen :focus-visible para el estilo predeterminado. Así, el estilo propio de la página y el del navegador pueden partir de una misma decisión sobre el momento.

El texto del 11 de noviembre de 2022 mantuvo ese mecanismo. El historial de publicaciones del W3C ordena sus revisiones desde 2018. La solución es pequeña en sintaxis y grande en experiencia: un botón puede verse tranquilo bajo el ratón y, segundos después, mostrar un faro cuando Tab lo convierte en el siguiente destino. La página tiene derecho a elegir el color del faro. El lector tiene derecho a encontrar el puerto.

El contorno regresó a la oficina con mejores condiciones: aparecer cuando hace falta y dejar de fingir que orientar al lector arruina el diseño.