Muchas personas usan un teclado (o software o hardware que imita la funcionalidad de un teclado, como un dispositivo interruptor) como su medio principal de navegación. Esto puede deberse a preferencias personales, eficiencia o hardware dañado.
Las personas con limitaciones físicas temporales, como esguinces de muñeca o discapacidades motrices finas, como el síndrome del túnel carpiano, pueden optar por usar un teclado para navegar. Los usuarios con visión reducida o personas ciegas pueden usar un teclado para navegar en combinación con su software de ampliación o lector de pantalla. Sin embargo, es posible que usen diferentes comandos de combinaciones de teclas para navegar por una pantalla que un usuario vidente.
Algunas personas sin discapacidades también pueden optar por navegar con un teclado.
Es fundamental que el teclado sea compatible con todas estas discapacidades y circunstancias. Una gran parte de la accesibilidad del teclado se centra en el enfoque. El enfoque se refiere al elemento en la pantalla que recibe activamente la entrada del teclado.
En este módulo, nos concentraremos en la estructura HTML y el diseño CSS para los elementos enfocables y del teclado. El módulo de JavaScript incluye más información sobre la administración del enfoque y las pulsaciones de teclas para los elementos interactivos.
Orden de enfoque
Los elementos a los que puede navegar un usuario del teclado se denominan elementos enfocables. El orden de enfoque, también llamado orden de navegación o de tabulación, es el orden en el que los elementos reciben el enfoque. El orden de enfoque predeterminado debe ser lógico, intuitivo y coincidir con el orden visual 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 termina en la parte inferior, y se desplaza 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 justificar 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 enfocables de forma natural incluyen compatibilidad integrada con el orden de tabulación y el control básico de eventos de teclado.
Puedes actualizar el orden del enfoque para incluir cualquier elemento que normalmente no recibe el enfoque, como elementos HTML no interactivos, componentes personalizados o elementos con ARIA, y anular la semántica natural del enfoque.
Tabindex
El orden de enfoque comienza con los elementos que tienen un atributo tabindex positivo (si los hay) y se desplaza del número positivo más pequeño al más grande (como 1, 2, 3). Luego, continúa con los elementos que tienen un tabindex de cero según su orden en el DOM. Todos los elementos con un tabindex negativo se quitan del orden de enfoque natural.
Cuando se aplica un tabindex de cero (tabindex="0") a elementos que normalmente no se pueden enfocar, se agregan al orden de enfoque natural de la página según la forma en que aparecen en el DOM. Sin embargo, a diferencia de los elementos HTML enfocables de forma natural, debes proporcionar compatibilidad adicional con el teclado para que sean completamente accesibles.
Del mismo modo, si tienes un elemento que normalmente se puede enfocar, pero está 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. Agregar un tabindex negativo indica a las tecnologías de asistencia y a los teclados que este botón se debe quitar del orden de enfoque natural. Pero no te preocupes, puedes usar JavaScript para volver a enfocar el elemento cuando sea necesario.
En este ejemplo, se agregó un atributo tabindex a los elementos que no reciben el enfoque de forma natural. El orden de los elementos se manipuló con tabindex para ilustrar el poder que puede tener en el orden del enfoque. Este es un ejemplo de lo que no debes 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, que se mantiene constante de una página a otra. Esto es ideal para la navegación general, pero puede dificultar que los usuarios que solo usan el teclado accedan fácilmente al contenido principal del sitio web sin tener que presionar la tecla Tab varias veces.
Una forma de omitir grupos de vínculos redundantes o inútiles es agregar un vínculo de omisión. Los vínculos de acceso son vínculos de anclaje que dirigen a una sección diferente de la misma página, utilizando el ID de esa sección, en lugar de enviar al usuario a otra página del sitio web o a un recurso externo. Por lo general, los vínculos para omitir se agregan como el primer elemento enfocable que un usuario encontrará cuando llegue a un sitio web y pueden ser visibles o estar ocultos visualmente hasta que un usuario los seleccione con la tecla Tab, según lo que requiera el diseño.
Cuando un usuario presiona la tecla Tab y hay un vínculo para omitir activo, se envía el enfoque del teclado al vínculo para omitir. El usuario puede hacer clic en el vínculo de navegación y saltar la sección del encabezado y la navegación principal. Si eligen no hacer clic en el vínculo para omitir y siguen presionando la tecla Tab para desplazarse por el DOM, se los dirigirá al siguiente elemento enfocable.
Al igual que con todos los vínculos, es importante que el vínculo de omisión incluya contexto sobre su propósito. Agregar la frase "Ir al contenido principal" le permite al usuario saber a dónde lo lleva el vínculo. Hay muchas opciones de código para elegir cuando proporcionas contexto adicional a tus vínculos, como aria-labelledby, aria-label o agregarlo al contenido de texto del elemento <a>, como se muestra en el ejemplo.
Indicador de enfoque
Como acabas de aprender, el orden de enfoque es un aspecto importante de la accesibilidad con el teclado. También es importante decidir cómo se diseñará ese enfoque. Porque, incluso si el orden del enfoque es excelente, ¿cómo podría un usuario saber dónde se encuentra en la página sin el diseño adecuado?
Un indicador de enfoque visible es fundamental para informar a los usuarios dónde se encuentran en todo momento en la página. Esto es especialmente importante para los usuarios que usan solo el teclado y tienen visión. El enfoque no está obstruido (mínimo) garantiza que el indicador de enfoque no esté oculto debajo de otros componentes.
Diseño predeterminado del navegador
Actualmente, todos los navegadores web modernos tienen un diseño visual predeterminado diferente que se aplica a los elementos enfocables de tu sitio web o aplicación, algunos más visibles que otros. A medida que el usuario presiona la tecla Tab para desplazarse por la página, este diseño se aplica cuando el elemento recibe el enfoque del teclado.
Si permites que el navegador controle el diseño del enfoque, es importante que revises tu código para confirmar que tu tema no anulará el diseño predeterminado del navegador. 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 diseño predeterminado del indicador de enfoque del navegador, lo que dificulta mucho la navegación de los usuarios por tu sitio web o aplicación.
No se recomienda: Sin esquema
a:focus { outline: none; /* don't do this! */ }
Recomendado: Esquema con estilo
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 predeterminado del navegador y crear un indicador de enfoque personalizado que complemente tu tema. Cuando creas un indicador de enfoque personalizado, tienes mucha libertad para ser creativo.
La forma de un indicador de enfoque puede adoptar muchas formas, ya sea un contorno, un borde, un subrayado, una caja, un 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 ese elemento.
Puedes cambiar el estilo de un indicador de enfoque para asegurarte de que se vea. Por ejemplo, cuando una página tiene un fondo blanco, puedes configurar el indicador de enfoque del botón en un fondo azul. Cuando la página tiene un fondo azul, puedes establecer el mismo estilo de enfoque del botón en un fondo blanco.
Podrías cambiar el estilo del elemento de enfoque según el tipo de elemento. Por ejemplo, puedes usar un subrayado de puntos para los vínculos del cuerpo, pero elegir un borde redondeado para un elemento de botón.
No hay una regla sobre cuántos estilos de indicadores de enfoque puedes tener en una página, pero asegúrate de mantener una cantidad razonable para evitar confusiones innecesarias.