Concentración

El podcast de CSS - 018: Focus

En tu página web, haces clic en un vínculo que lleva al usuario al contenido principal del sitio web. Con frecuencia, se los conoce como vínculos de navegación o vínculos de anclaje. Cuando ese vínculo se activa a través de un teclado, con las teclas Tab y, luego, Intro, el contenedor de contenido principal tiene un anillo de enfoque a su alrededor. ¿A qué se debe?

Esto se debe a que <main> tiene un valor de atributo tabindex="-1", lo que significa que se puede enfocar de manera programática. Cuando se segmenta la <main> (porque la #main-content en la barra de URL del navegador coincide con la id), recibe el enfoque programático. Resulta tentador quitar los estilos de enfoque en estas situaciones, pero manejar el enfoque de manera correcta y cuidadosa ayuda a crear una experiencia del usuario buena y accesible. También puede ser un excelente lugar para agregar algo de interés a las interacciones.

¿Por qué es importante el enfoque?

Como desarrollador web, tu trabajo es hacer que un sitio web sea inclusivo y accesible para todos. La creación de estados de enfoque accesibles con CSS es parte de esta responsabilidad.

Los estilos de enfoque ayudan a las personas que usan un dispositivo, como un teclado o un control de interruptor, a navegar e interactuar con un sitio web. Si un elemento recibe el enfoque y no hay una indicación visual, el usuario puede perder de vista lo que está en primer plano. Esto puede crear problemas de navegación y provocar comportamientos no deseados si, por ejemplo, se sigue un vínculo incorrecto.

Cómo se enfocan los elementos

Ciertos elementos se pueden enfocar automáticamente; son elementos que aceptan la interacción y las entradas, como <a>, <button>, <input> y <select>. En resumen, todos los elementos del formulario, los botones y los vínculos. Por lo general, puedes navegar por los elementos enfocables de un sitio web con la tecla Tab para avanzar en la página y Mayúsculas + Tab para retroceder.

También hay un atributo HTML llamado tabindex que te permite cambiar el índice de tabulación, que es el orden en el que se enfocan los elementos, cada vez que alguien presiona su tecla Tab, o se cambia el enfoque con un cambio de hash en la URL o por un evento de JavaScript. Si tabindex en un elemento HTML se configura como 0, puede recibir el foco mediante la tecla Tab y respetará el índice global de pestañas, que se define en el orden de origen del documento.

Si configuras tabindex como -1, solo puede recibir el foco de manera programática, lo que significa que solo cuando se produce un evento de JavaScript o un cambio de hash (que coincide con el id del elemento en la URL). Si configuras tabindex para que sea un valor mayor que 0, se quitará del índice de la pestaña global, definido por el orden de origen del documento. El orden de tabulación ahora se definirá según el valor de tabindex, de modo que un elemento con tabindex="1" recibirá el enfoque antes que un elemento con tabindex="2", por ejemplo

Enfoque de estilo

El comportamiento predeterminado del navegador cuando un elemento recibe el foco es presentar un anillo de enfoque. Este anillo de enfoque varía según el navegador y los sistemas operativos.

Este comportamiento se puede cambiar con CSS mediante las seudoclases :focus, :focus-within y :focus-visible que aprendiste en la lección sobre pseudoclases. Es importante establecer un estilo de enfoque que tenga contraste con el estilo predeterminado de un elemento. Por ejemplo, un enfoque común es utilizar la propiedad outline.

a:focus {
  outline: 2px solid slateblue;
}

La propiedad outline podría aparecer demasiado cerca del texto de un vínculo, pero la propiedad outline-offset puede ayudar con eso, ya que agrega padding visual adicional sin afectar el tamaño geométrico que rellena el elemento. Un valor numérico positivo para outline-offset desplazará el contorno hacia afuera, mientras que un valor negativo lo desplazará hacia adentro.

Actualmente, en algunos navegadores, si tienes un border-radius establecido en tu elemento y usas outline, no coincidirá, ya que el contorno tendrá esquinas pronunciadas. Por este motivo, es tentador usar un box-shadow con un radio de desenfoque pequeño, ya que box-shadow se recorta con la forma y respeta border-radius, pero este estilo no se mostrará en el modo de contraste alto de Windows. Esto se debe a que el modo de contraste alto de Windows no aplica sombras e ignora principalmente las imágenes de fondo para favorecer la configuración que prefiere el usuario.

Resumen

Crear un estado de enfoque que contraste con el estado predeterminado de un elemento es increíblemente importante. Los estilos predeterminados del navegador ya lo hacen por ti, pero si quieres cambiar este comportamiento, recuerda lo siguiente:

• Evita usar outline: none en un elemento que pueda recibir el enfoque del teclado.
• Evita reemplazar los diseños de outline por box-shadow. ya que no aparecen en el modo de contraste alto de Windows.
• Solo establece un valor positivo para tabindex en un elemento HTML si es necesario.
• Asegúrate de que el estado del enfoque sea muy claro en comparación con el estado predeterminado.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre enfoque