Introducción a Focus

Descripción general del enfoque de la pantalla en accesibilidad

Dave Gash
Dave Gash
Meggin Karney
Meggin Kearney

En esta lección, hablaremos sobre el enfoque y cómo puedes administrarlo en tu aplicación. El enfoque se refiere a qué control en la pantalla (un elemento de entrada, como un campo, una casilla de verificación, un botón o un vínculo) recibe la entrada desde el teclado y desde el portapapeles cuando pegas contenido.

Este es un excelente punto de partida para aprender sobre la accesibilidad, porque todos sabemos cómo usar un teclado, es fácil relacionarse con él y probarlo, y beneficia a casi todos los usuarios.

Los usuarios con discapacidades motrices, que pueden ser una parálisis permanente o un esguince de muñeca, pueden utilizar un teclado o un dispositivo interruptor para navegar por la página. Por lo tanto, es fundamental tener una buena estrategia de enfoque para brindarles una buena experiencia.

Además, para los power users que conocen todas las combinaciones de teclas de sus máquinas, pueden ser más productivos cuando pueden navegar rápidamente por tu sitio solo con el teclado.

Por lo tanto, una estrategia de enfoque bien implementada garantiza que todos los usuarios de tu aplicación tengan una mejor experiencia. En las próximas lecciones, veremos que el esfuerzo que pones en el foco es una base importante para apoyar a los usuarios de tecnología de asistencia y, de hecho, a todos los usuarios.

¿Qué es el enfoque?

El enfoque determina en qué lugar de la página van los eventos del teclado en un momento determinado. Por ejemplo, si enfocas un campo de entrada de texto y comienzas a escribir, el campo de entrada recibe los eventos del teclado y muestra los caracteres que escribas. Mientras esté enfocada, también recibirá entradas pegadas del portapapeles.

Enfoque del teclado en un campo de texto

A menudo, el elemento enfocado actualmente se indica con un anillo de enfoque, cuyo estilo depende tanto del navegador como de cualquier estilo que el autor de la página haya aplicado. Chrome, por ejemplo, destaca los elementos enfocados con un borde azul, mientras que Firefox usa un borde discontinuo.

Botón Registrarse.

Algunos usuarios manejan su computadora casi por completo con el teclado o algún otro dispositivo de entrada. Para esos usuarios, el enfoque es fundamental, ya que es su medio principal para llegar a todo lo que se muestra en la pantalla. Por ese motivo, en la sección 2.1.1, la lista de tareas de la AIM web indica que todas las funciones de la página deberían estar disponibles con el teclado, a menos que sea algo que no puedas hacer con un teclado, como dibujar a mano alzada.

Como usuario, puedes controlar qué elemento se enfoca actualmente con Tab, Shift+Tab o las teclas de flecha. En Mac OSX, esto funciona de manera diferente: si bien Chrome siempre te permite navegar con Tab, debes presionar Option+Tab para cambiar el foco en otros navegadores, como Safari. (Puedes cambiar esta configuración en la sección Teclado de Preferencias del sistema).

Diálogo de preferencias del teclado

El orden en el que el foco avanza y retrocede en los elementos interactivos a través de Tab se llama, como era de esperar, al orden de tabulación. Asegurarte de diseñar tu página con un orden de tabulación lógico es un paso importante que abordaremos más adelante.

¿Qué es enfocable?

Los elementos HTML interactivos integrados, como los campos de texto, los botones y las listas seleccionadas, pueden centrarse de forma implícita, lo que significa que se insertan automáticamente en el orden de tabulación y tienen control de eventos de teclado integrado sin intervención del desarrollador.

Campos implícitos que se pueden enfocar.

Sin embargo, no todos los elementos son enfocables; los párrafos, los elementos div y otros elementos de la página no se enfocan cuando navegas con tabulación por la página, y es por diseño. Por lo general, no es necesario enfocar algo si el usuario no puede interactuar con él.

No todos los elementos son enfocables,

Experimenta la concentración

Probemos algunas de las técnicas de enfoque que acabamos de mencionar. En Chrome, ve a esta página de un sitio de una aerolínea y busca un boleto específico con la entrada del teclado. La página no acepta la entrada del mouse, por lo que no puedes hacer trampa (no es que no confiemos en ti ;-).

Maqueta del sitio de la aerolínea.

Los parámetros para el ticket que debes especificar son los siguientes:

  • ida solo
  • a Melbourne
  • con salida el 12 de octubre de 2017 (12/10/2017)
  • con regreso el 23 de octubre de 2017 (23/10/2017)
  • asiento de ventana
  • no quiero recibir ofertas promocionales

Cuando completes correctamente el formulario sin errores de entrada y actives el botón Buscar, el formulario solo se borrará y se restablecerá. Completa el formulario y regresa.

Examinemos cómo el formulario usa la entrada del teclado. Cuando presiones Tab por primera vez, el navegador destacará los elementos de navegación de Vuelos, Hoteles y Alquileres de automóviles. Mientras presionas Tab, accedes al grupo de botones de selección, en el que puedes elegir entre Round Trip, One Way, o Multi City, con las teclas de flecha.

Continúa por los campos de nombre y dirección, y completa la información requerida. Cuando llegas al elemento de selección de destino, puedes usar las teclas de flecha para elegir una ciudad o comenzar a escribir para autocompletar el campo. Del mismo modo, en los campos de fecha, puedes usar las teclas de flecha o simplemente escribir una fecha.

Para elegir un tipo de asiento, también necesitas las teclas de flecha, o puedes escribir "w", "a" o "n" para saltar a una opción de asiento. Luego, para inhabilitar la opción predeterminada de ofertas promocionales, presiona la barra espaciadora mientras la casilla de verificación está enfocada. Por último, enfoca el botón Buscar y presiona Enter para enviar el formulario.

Resulta muy práctico interactuar con un formulario usando solo el teclado y no tener que cambiar al mouse y atrás para completar una tarea. Debido a que todos los elementos que se usan en el formulario son etiquetas HTML nativas con enfoque implícito, el formulario funciona bien con el teclado y no tienes que escribir ningún código para agregar o administrar el comportamiento del enfoque.