Enfoque del teclado

Muchas personas utilizan un teclado o algún otro software o hardware que imite la de un teclado (por ejemplo, un dispositivo conmutador) como el medio principal para la navegación. Personas con limitaciones físicas temporales, como un esguince de muñeca o discapacidades motrices finas, como el túnel carpiano, además de algunas personas sin discapacidades, pueden optar por usar un teclado para navegar por una página debido a la preferencia, la eficiencia o un hardware defectuoso.

Los usuarios ciegos o con visión reducida pueden utilizar un teclado para la navegación combinado con el software de ampliación o de lector de pantalla. Sin embargo, es posible que utilicen diferentes comandos de combinación de teclas para navegar por una pantalla que un usuario vidente.

La compatibilidad del teclado para todas estas discapacidades y circunstancias es fundamental. R gran parte de la accesibilidad del teclado se centra enfoque. El enfoque se refiere a qué elemento de la pantalla recibe la entrada desde el teclado.

En este módulo, nos concentraremos en la estructura HTML y en el estilo de CSS para el teclado y los elementos enfocables. El El módulo de JavaScript incluye más información sobre la gestión de focos y las pulsaciones de teclas para elementos interactivos.

Enfocar orden

Los elementos a los que puede navegar el usuario del teclado se denominan enfocables. o de terceros. Orden de enfoque, también llamado orden de navegación o tabulación, es el orden en el que los elementos reciben no te enfocas en eso. El orden de enfoque predeterminado debe ser lógico, intuitivo y coincidir con el elemento visual el orden de una página.

En la mayoría de los idiomas, el orden de enfoque comienza en la parte superior de la página y finaliza en la parte inferior, de izquierda a derecha. Sin embargo, algunos idiomas se leen de derecha a izquierda, por lo que el idioma principal de la página puede requerir un orden de enfoque diferente.

De forma predeterminada, el orden de enfoque incluye elementos HTML que se pueden enfocar de forma natural, como vínculos, casillas de verificación y entradas de texto. Los elementos HTML que se pueden enfocar de forma natural incluyen compatibilidad integrada con el orden de tabulación y manejo básico de eventos del teclado.

Puedes actualizar el orden de enfoque para incluir los elementos que normalmente reciben foco, como elementos HTML no interactivos, componentes personalizados o con ARIA que anule el de enfoque natural.

Índice de tabulación

El orden de enfoque comienza con los elementos que tienen un índice de tabulación (si lo hay) y se mueve del número positivo más pequeño al más grande (por ejemplo, 1, 2, 3). Luego, pasa por los elementos con un tabindex de cero según su orden en el DOM. Cualquier elemento con un tabindex negativo se quitan del orden natural del enfoque.

Cuando un índice de tabulación de cero (tabindex="0") se aplica a elementos que normalmente no se pueden enfocar, se sumados al orden natural de enfoque de la página según la forma en que aparezcan en el DOM. Sin embargo, a diferencia de los elementos HTML que se pueden enfocar por naturaleza, debes ofrecer compatibilidad adicional con el teclado para que sean totalmente accesibles.

Del mismo modo, si tienes un elemento que normalmente es enfocable, pero que Inactivo, como un botón que no funciona hasta que se completa un campo de entrada debes agregar un tabindex negativo (tabindex="-1") a este elemento. Agregando un tabindex negativo indica a las tecnologías de asistencia y los teclados que este debe quitarse del orden de enfoque natural. Pero no te preocupes, puedes usar JavaScript para volver a agregar el enfoque al elemento cuando sea necesario.

En este ejemplo, se agregó un atributo tabindex a los elementos que no recibir la atención de forma natural. El orden de los elementos se manipuló tabindex para ilustrar la potencia que puede tener en el orden del enfoque Este es un de lo que no hay que hacer.

Omitir vínculos

Actualmente, la mayoría de los sitios web tienen una larga lista de vínculos de menú en el encabezado principal de la página coherentes de una página a otra. Esto es ideal para la navegación general, pero puede para los usuarios que solo usan el teclado pueden acceder fácilmente a la página principal contenido sin tener que presionar tabulación varias veces.

Una forma de saltar sobre grupos de vínculos redundantes o inútiles es agregar un omitir vínculo Los vínculos de navegación son fijos vínculos que dirigen a una sección diferente de la misma página, con el nombre en lugar de enviar al usuario a otra página del sitio web o a una dirección recurso. Los vínculos de navegación suelen agregarse como el primer elemento enfocable de un usuario los usuarios que encontrarán al llegar a un sitio web y pueden ser visibles o ocultos. hasta que un usuario lo accede, según lo que requiera el diseño.

Cuando un usuario presiona la tecla Tab y hay un vínculo de omisión activo, el enfoque del teclado al vínculo de navegación. El usuario puede hacer clic en el vínculo de navegación y saltar más allá de la sección del encabezado y el menú de navegación principal. Si deciden no hacer clic omitir el vínculo y seguir hacia abajo con la tecla Tab en el DOM, se dirigirán a la siguiente elemento enfocable.

Como todos los vínculos, es importante que el vínculo de navegación incluya contexto sobre el propósito del vínculo. Al agregar la frase "Ir al contenido principal", informa al usuario a dónde los dirige el vínculo. Hay muchas opciones de código para elegir cuando proporcionar contexto adicional a los vínculos, como aria-labelledby: aria-label o agregarla al contenido de texto del elemento <a>, como se demuestra en el ejemplo.

Indicador de enfoque

Como acabas de aprender, el orden del enfoque es un aspecto importante accesibilidad. También es importante decidir cómo se diseña ese enfoque. Porque incluso si el orden de enfoque es excelente, ¿cómo podría un usuario saber dónde se encuentra la página sin el estilo adecuado?

Un indicador de enfoque visible es una herramienta fundamental para informar a un usuario dónde se encuentra en todo momento en la . Es especialmente importante para los usuarios que solo usan el teclado vidente.

Estilo predeterminado del navegador

Hoy en día, cada navegador web moderno tiene un estilo visual predeterminado diferente que se aplica a elementos enfocables en tu sitio web o aplicación, algunos más fáciles de ver que otros. Cuando el usuario navega por la página mediante la tecla de tabulación, este estilo se aplica como recibe el foco del teclado.

Si permites que el navegador controle el estilo de enfoque, es importante revisar tu código para confirmar que tu tema no anulará la configuración predeterminada estilo. Una anulación a menudo se escribe como "outline: 0" o "outline: none" en tu hoja de estilo. Este pequeño fragmento de código puede quitar el enfoque predeterminado del navegador estilo de indicador, lo que hace que sea muy difícil para los usuarios navegar por sitio web o aplicación.

a:focus {
  outline: none; /* don't do this! */
}

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Estilos personalizados

Por supuesto, puedes ir más allá del estilo de navegador predeterminado y crear una un indicador de enfoque que complemente el tema. Cuando creas un foco personalizado indicador, tienes mucha libertad para ser creativo.

La forma del indicador de enfoque puede adoptar muchas formas, ya sea un contorno, un borde, un subrayado, cuadro, cambio de fondo o algún otro cambio estilístico obvio que no dependa solo del color para indicar que el enfoque del teclado está activo en a ese elemento.

Puedes cambiar el estilo del indicador de enfoque para asegurarte de que no se pierda en la en segundo plano. Por ejemplo, si una página tiene un fondo blanco, podrías establecer la el indicador de enfoque del botón con un fondo azul. Cuando la página tiene color azul fondo, puedes establecer el mismo estilo de enfoque de botón en un fondo blanco.

Puedes cambiar el estilo del elemento de enfoque según el tipo de elemento. Por ejemplo: podrías usar un subrayado punteado para los vínculos del cuerpo, pero elige un borde redondeado para un elemento de botón.

No hay una regla sobre cuántos estilos de indicadores de enfoque tienes en una sola pero asegúrate de mantenerla en un número razonable para evitar confusión.

Conclusión

Para que un sitio web o una aplicación se consideren accesibles, todo lo que se puede al que se accede con un mouse también se debe acceder con un teclado. En este módulo, Se enfoca en el aspecto visual de la accesibilidad del teclado, en particular, en el enfoque y los indicadores de enfoque.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre ARIA y HTML