Podcast de CSS - 018: Enfoque
En tu página web, Haces clic en un vínculo que dirige al usuario al contenido principal del sitio web. Estos suelen denominarse enlaces de navegación o de anclaje. Cuando un teclado activa ese vínculo, usa las teclas Tab y Intro, mientras que el contenedor de contenido principal tiene un anillo de enfoque. ¿A qué se debe?
Esto se debe a que <main> tiene un valor de atributo tabindex="-1".
lo que significa que puede enfocarse de manera programática.
Cuando se orienta a <main>, ya que #main-content
de la barra de URL del navegador coincide con la id, recibe el enfoque programático.
En estas situaciones, es tentador quitar
los estilos de enfoque
pero manejar el enfoque de forma adecuada
y con cuidado ayuda a crear un bien,
una experiencia del usuario más 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 accesible e inclusivo para todos. Crear 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 control de interruptor para navegar e interactuar con un sitio web. Si un elemento recibe foco y no hay indicación visual, un usuario puede perder de vista lo que se enfoca. Esto puede crear problemas de navegación y provocar comportamientos no deseados en los siguientes casos: por ejemplo, se siguió el vínculo equivocado.
Cómo se enfocan los elementos
Algunos elementos son enfocables automáticamente.
Son elementos que aceptan interacción y entrada, como <a>,
<button>, <input> y <select>.
En resumen, todos los elementos del formulario, botones y vínculos.
En general, puedes navegar por los elementos enfocables de un sitio web con la tecla Tab para avanzar por 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
el orden de enfoque de los elementos (cada vez que alguien presione la tecla Tab),
o el foco se cambia con un cambio de hash en la URL o con un evento de JavaScript.
Si tabindex en un elemento HTML se establece en 0,
puede recibir el foco con la tecla tab y respetará el índice de la pestaña global.
definido por el orden de la fuente del documento.
Si configuras tabindex como -1, solo puede recibir el enfoque de manera programática.
lo que significa que solo cuando ocurre un evento de JavaScript
o se produce un cambio de hash (que coincide con el id del elemento en la URL).
Si configuras tabindex para que sea mayor que 0,
se quitará del índice de la pestaña global
definido por el orden de la fuente del documento.
El orden de tabulación ahora estará definido por el valor de tabindex
Por lo tanto, un elemento con tabindex="1" recibirá el foco antes que un elemento con tabindex="2", por ejemplo.
Aplicar estilo al enfoque
El comportamiento predeterminado del navegador cuando un elemento recibe el foco es presentar un anillo de enfoque. Este anillo de enfoque varía entre el navegador y los sistemas operativos.
Este comportamiento se puede cambiar con CSS,
con :focus, :focus-within y :focus-visible
seudoclases que aprendiste en el
seudoclase.
Es importante establecer un estilo de enfoque que tenga contraste con el estilo predeterminado de un elemento.
Por ejemplo, un enfoque común es usar la propiedad outline.
a:focus {
outline: 2px solid slateblue;
}
Es posible que la propiedad outline aparezca 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.
un valor negativo empujará el contorno hacia adentro.
Actualmente, en algunos navegadores,
si tienes un border-radius configurado en tu elemento y usas outline,
pero no coincidirá:
el contorno tendrá esquinas pronunciadas.
Debido a esto,
Es tentador usar un box-shadow con un radio de desenfoque pequeño porque box-shadow se recorta a la forma,
en honor a 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,
y, en su mayoría, ignora las imágenes de fondo para favorecer la configuración preferida del usuario.
Resumen
Crear un estado de enfoque que contraste con el estado predeterminado de un elemento es increíblemente importante. Los estilos de navegador predeterminados ya lo hacen por ti, pero si quieres cambiar este comportamiento, recuerda lo siguiente:
- Evita usar
outline: noneen un elemento que pueda recibir el foco del teclado. - Evita reemplazar los estilos de
outlineporbox-shadow. ya que no aparecen en el Modo de contraste alto de Windows. - Solo establece un valor positivo para
tabindexen un elemento HTML si es absolutamente 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 el foco
¿Cuáles de los siguientes son elementos enfocables automáticamente?
<a><p><button><input><output><select>¿Cuál de los siguientes dispositivos de entrada puede enfocar?