Hermosa accesibilidad con enfoque flotante

Imagínese si sus :focusestilos se animaran de un elemento a otro mientras navega por un sitio. Como si el anillo de enfoque se elevara y volara a través de la página hasta el siguiente elemento. Su espíritu es similar al desplazamiento suave: es más fácil entender lo que sucede cuando el movimiento acompaña al cambio¹ . En lugar de que el desplazamiento (o el cambio de enfoque) sea un salto instantáneo, el movimiento te guía a la nueva ubicación.

Guido Bouman pensó que esto sería bueno para la accesibilidad y analizó algunas opciones (por ejemplo, Flying Focus ), pero finalmente creó el suyo propio, Floating Focus :

Después de esta exploración tuvimos una buena idea de lo que se necesitaba para un buen estado de enfoque. Debe tener un alto contraste pero no perjudicar la legibilidad de los componentes subyacentes. Tiene que guiar al usuario al siguiente objetivo de enfoque con una forma de transición. Y solo debe mostrarse a los usuarios que se benefician del esquema de enfoque.

Ya cubrimos algo similar en 2019, cuando Maurice Mahan FocusOverlay .

Esto es lo que escribí al respecto en aquel entonces:

• Es un efecto genial.
• Me imagino que será una ganancia en accesibilidad ya que, si bien la página se desplazará para asegurarse de que el siguiente elemento enfocado esté visible, de otra manera no le ayudará a ver dónde se ha ido ese enfoque. El movimiento que dirige la atención hacia el siguiente elemento enfocado puede ayudar a hacerlo más claro.
• Me imagino que será perjudicial para la accesibilidad, ya que es un movimiento que normalmente no existe y que podría resultar sorprendente y posiblemente desagradable.
• Si “simplemente funciona” en todos mis elementos enfocables, está bien, pero veo que hay atributos de datos para controlar el comportamiento. Si necesito distribuir control de comportamiento en todas mis plantillas para acomodar esta biblioteca específica, probablemente no me interesaría tanto.

En ese artículo, cubrí una idea de carga condicional para no cargar esto si prefers-reduced-motionestaba configurado en reduce. Hoy en día, es posible realizar una importación condicional de módulos ES .

No tomes nada de esto como un consejo de que este enfoque basado en el movimiento es 100% bueno para la accesibilidad. No me siento calificado para tomar esa determinación. Aunque es interesante.

1. Esto también me recuerda a las “interfaces de transición” . El movimiento realmente puede ayudar a aclarar lo que sucede en una interfaz de usuario.