Esta será la segunda publicación de una pequeña serie que estamos haciendo sobre accesibilidad de formularios. Si te perdiste la primera publicación, mira Formularios accesibles con pseudoclases. En esta publicación veremos :focus-visible y cómo usarlo en sus sitios web.

Punto de contacto de enfoque

Antes de seguir adelante con :focus-visible, revisemos cómo :focus Funciona en tu CSS. El enfoque es el indicador visual de que se está interactuando con un elemento mediante el teclado, el mouse, el trackpad o la tecnología de asistencia. Ciertos elementos son naturalmente interactivos, como enlaces, botones y elementos de formulario. Queremos asegurarnos de que nuestros usuarios sepan dónde están y las interacciones que están realizando.

Recuerda no hacer esto en tu CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Cuando quitas el foco, lo quitas por ¡TODOS! Queremos asegurarnos de preservar el enfoque.

Si por algún motivo necesita eliminar el enfoque, asegúrese de que también haya un respaldo :focus estilos para sus usuarios. Ese respaldo puede coincidir con los colores de su marca, pero asegúrese de que esos colores también sean accesibles. Si al marketing, el diseño o la marca no les gustan los estilos de anillo de enfoque predeterminados, entonces es hora de comenzar a conversar y colaborar con ellos sobre la mejor manera de volver a agregarlos.

Que es focus-visible?

La pseudoclase, :focus-visible, es como nuestro valor predeterminado :focus pseudoclase. Le da al usuario un indicador de que algo se está enfocando en la página. la forma en que escribes :focus-visible está cortado y seco:

:focus-visible {
  /* ... */
}

Cuando usas :focus-visible con un elemento específico, la sintaxis se parece a esta:

.your-element:focus-visible {
  /*...*/
}

Lo bueno de usar :focus-visible ¿Puedes hacer que tu elemento se destaque? brillante y audaz! No hay necesidad de preocuparse de que se muestre si se hace clic o se toca el elemento. Si elige no implementar la clase, el valor predeterminado será el anillo de enfoque del agente de usuario, lo cual para algunos no es deseable.

Historia de fondo de focus-visible

Antes de que tuviéramos el :focus-visible, se aplicaría el estilo del agente de usuario :focus a la mayoría de los elementos de la página; botones, enlaces, etc. Aplicaría un contorno o “anillo de enfoque” al elemento enfocable. Esto se consideró feo, a la mayoría no le gustó el anillo de enfoque predeterminado que proporcionaba el navegador. Como resultado de que el anillo de enfoque era desfavorable a la vista, la mayoría de los autores lo eliminaron... sin alternativa. Recuerde, cuando retire :focus, disminuye la usabilidad y hace que la experiencia sea inaccesible para los usuarios de teclados.

En el estado actual de la web, el navegador ya no indica visiblemente el foco alrededor de varios elementos cuando están enfocados. En cambio, el navegador utiliza diferentes heurísticas para determinar cuándo ayudaría al usuario, proporcionando a cambio un anillo de enfoque. De acuerdo a Khan Academy, una heurística es, "una técnica que guía un algoritmo para encontrar buenas opciones".

Lo que esto significa es que el navegador puede detectar si el usuario está interactuando o no con la experiencia desde un teclado, mouse o trackpad y, según ese tipo de entrada, agrega o elimina el anillo de enfoque. El ejemplo de esta publicación destaca la interacción de entrada.

En los primeros días de :focus-visible estábamos usando un polyfill Para manejar el anillo de enfoque creado por Alice Boxhall y Brian Kardell, Mozilla también presentó su propia pseudoclase. :moz-focusring, antes de la especificación oficial. Si desea obtener más información sobre los primeros días del anillo de enfoque, consulte A11y moldes con Rob Dodson.

Importancia del enfoque

Hay muchas razones por las que la concentración es importante en su aplicación. Por un lado, como dije anteriormente, nosotros, como embajadores de la web, debemos asegurarnos de brindar la mejor experiencia accesible posible. No queremos que ninguno de nuestros usuarios adivine dónde se encuentra mientras navega por la experiencia.

Un ejemplo que siempre me viene a la mente es el Sitio web de Dos hermanos ciegos. Si va al sitio web y hace clic/toca (esto funciona en dispositivos móviles), el ojo cerrado en la esquina inferior izquierda, verá el ojo abierto y comienza una simulación. A los hermanos, Bradford y Bryan Manning, les diagnosticaron la enfermedad de Stargardt a una edad temprana. La enfermedad de Stargardt es una forma de degeneración macular del ojo. Con el tiempo ambos hermanos quedarán completamente ciegos. Visite el sitio y haga clic en el ojo para ver cómo ven.

Si estuviera en su lugar y tuviera que navegar por una página, querrá asegurarse de saber exactamente dónde se encuentra durante toda la experiencia. Un anillo de enfoque te da ese poder.

De demostración

La siguiente demostración muestra cómo :focus-visible funciona cuando se agrega a su CSS. La primera parte del video muestra la experiencia al navegar con un mouse y la segunda muestra la navegación solo con mi teclado. También me grabé para mostrar que pasé de usar el mouse al teclado.

El navegador predice qué hacer con el anillo de enfoque en función de mi entrada (teclado/ratón) y luego agrega un anillo de enfoque a esos elementos. En este caso, cuando navego por este ejemplo con el teclado, todo recibe foco. Cuando se usa el mouse, solo la entrada recibe el foco y los botones no. si quitas :focus-visible, el navegador aplicará el anillo de enfoque predeterminado.

El siguiente código se aplica :focus-visible a los elementos enfocables.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Si desea especificar el label o el botón para recibir :focus-visible simplemente anteponga la clase con input or button respectivamente.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Soporte

Si el navegador no es compatible :focus-visible puede tener un respaldo para manejar la interacción. El siguiente código es del Zona de juegos MDN. Puede utilizar el @apoya en regla o “consulta de características” para comprobar el soporte. Una cosa a tener en cuenta es que la regla debe colocarse en la parte superior del código o anidarse dentro de otro grupo de reglas.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Más preocupaciones de accesibilidad

Preocupaciones de accesibilidad a tener en cuenta al desarrollar su experiencia:

• Asegúrese de que los colores que elija para su indicador de enfoque, si los hay, aún sean accesibles de acuerdo con la información documentada en el WCAG 2.2 Contraste sin texto (Nivel AA)
• La sobrecarga cognitiva puede causar angustia al usuario. Asegúrese de mantener coherentes los estilos de los distintos elementos interactivos.

Soporte del navegador

Enlaces

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
• PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
• PlatoESG. Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
• PlatoSalud. Inteligencia en Biotecnología y Ensayos Clínicos. Accede Aquí.
• Fuente: https://css-tricks.com/managing-user-focus-with-focus-visible/