Compruebe si hay compatibilidad con el teclado mediante las teclas Tab y Enter.

Es importante que la interfaz de usuario de una página web funcione solo con un teclado, ya que no todos los usuarios tienen un puntero o un dispositivo táctil, y no todos los usuarios pueden ver páginas web. Asegúrese de que puede usar la tecla Tab para mover el foco a cada control de formulario de una página web y asegúrese de que puede usar la tecla Entrar para enviar formularios.

Formas de probar la compatibilidad con el teclado

Puede probar la facilidad de uso de una página web para los usuarios de teclado de varias maneras:

• Mediante el uso del teclado, especialmente las teclas Tab, Mayús+Tab y Entrar . Este enfoque se describe en este artículo.

• Compruebe si hay compatibilidad con el teclado para un elemento individual mediante la herramienta Inspeccionar . La superposición de información de la herramienta Inspect incluye una sección Accesibilidad que incluye una fila que se puede centrar en el teclado . Consulte Uso de la herramienta Inspeccionar para detectar problemas de accesibilidad si mantiene el puntero sobre la página web.

• Compruebe la sección Accesibilidad del informe de problemas para ver si hay problemas de compatibilidad con el teclado. Consulte Prueba automática de una página web para ver si hay problemas de accesibilidad.

Comprobación de problemas de accesibilidad de teclado en una página web

Para comprobar si hay problemas de accesibilidad en la página web de demostración de pruebas de accesibilidad mediante un teclado en lugar de un mouse:

1. Abra la página web de demostración de pruebas de accesibilidad en una nueva ventana o pestaña.

2. Use un teclado para navegar por el documento de demostración mediante las teclas Tab o Mayús+Tab para saltar de un elemento a otro. En la página web de demostración, la tecla Tab mueve primero el foco al formulario de búsqueda de la header sección.

3. Presione Tab para centrar el foco en un botón y, a continuación, presione Entrar para hacer clic en el botón centrado. Por ejemplo, en la página de demostración, presione Tab para centrar el foco en el campo Buscar y, a continuación, presione Entrar para enviar la búsqueda. Este enfoque genera el mismo resultado que al seleccionar el botón ir . La selección de Entrar para enviar el formulario de búsqueda funciona correctamente.

4. Presione tab de nuevo. El siguiente elemento en el que se centra es el primer vínculo Más en la content sección de la página web, como se indica en un esquema:

   

5. Presione Tab varias veces más hasta que pase el último vínculo Más . La página se desplaza hacia arriba y parece que está en un elemento de la página, pero no hay ninguna manera de indicar qué elemento es.

6. Observe la dirección URL en la parte inferior izquierda. Si miras a la parte inferior izquierda de la pantalla (o si usas un lector de pantalla), te das cuenta de que estás en el menú de navegación de la barra lateral con vínculos azules, porque el explorador muestra la dirección URL a la que apunta el vínculo Cats (#cats).

   

7. Presione Tab de nuevo para llegar al campo de entrada en el formulario de donación. Sin embargo, no puede acceder a los botones situados encima del cuadro de texto seleccionando Pestaña. No puede usar el teclado para centrar el foco en los botones 50, 100 o 200 y, a continuación, seleccionarlos. Además, al seleccionar Entrar no se envía el formulario de donación.

   

8. Al seleccionar Pestaña de nuevo, se centra en la barra de navegación superior de la página, con botones de menú para Inicio, Adoptar una mascota, Donar, Trabajos y Acerca de nosotros. Presione Tab o Mayús+Tab para colocar el foco en un botón de menú, como se indica en un esquema de foco. A continuación, presione Entrar para acceder a esa sección de la página web.

   

Problemas detectados que deben corregirse

En función del tutorial anterior, hemos encontrado los siguientes problemas que deben corregirse:

• Cuando se usa un teclado, los vínculos azules del menú de navegación de la barra lateral no indican visualmente qué vínculo tiene el foco. Consulte Analizar la falta de indicación del foco del teclado.

• En el formulario de donación, los botones de cantidad y el botón Donar no funcionan con un teclado. Consulte Analizar la falta de compatibilidad con el teclado en un formulario.

• El orden del acceso del teclado a través de las secciones de la página no es correcto. Navegue por todos los vínculos Más del documento antes de llegar al menú de navegación de la barra lateral. En el momento en que la tecla Tab pone el foco en el menú de navegación de la barra lateral, ya ha recorrido todo el contenido de la página. El menú de navegación de la barra lateral estaba diseñado para proporcionar un fácil acceso al contenido de la página.

  Para obtener más información sobre cómo resolver este problema, vea Probar compatibilidad con el teclado mediante el Visor de pedidos de origen.