Anterior

Siguientes

Ejercicio: Búsqueda y corrección de contenido para la accesibilidad del lector de pantalla

Completado

Antes de intentar navegar por la página web de ejemplo mediante un lector de pantalla, encuentre y corrija los demás problemas de accesibilidad.

Corrección del texto alternativo de la imagen

1. Ejecute el sitio y FastPass. El último problema que queda es el texto alternativo de la imagen de la página.

   

2. Esta imagen es meramente decorativa, por lo que puede agregar simplemente una descripción alt vacía.

   <img alt="" width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">
   

3. Ejecute la aplicación y compruebe FastPass una última vez. Ahora debería ver todas las comprobaciones automatizadas superadas.

Comprobación de las tabulaciones

1. Ahora que hemos superado todas las comprobaciones automatizadas es el momento de comprobar las tabulaciones. Seleccione Tabulaciones en el panel izquierdo de FastPass.

   

2. Active el botón de alternancia Show tab stops (Mostrar tabulaciones) en FastPass.

3. Cambie a la aplicación web y comience a usar el tabulador para moverse por la página. Note que la navegación fluye desde la parte superior de la página, pasa por el formulario y los vínculos de página y llega hasta los vínculos del pie de página.

   

Pruebas con un lector de pantalla

Hay algunos problemas restantes que FastPass no detecta. Puede encontrarlos en la herramienta Evaluación, que realiza una evaluación de accesibilidad completa para la página. Sin embargo, este escenario va más allá del alcance de este tutorial. En su lugar, vamos a experimentarlos mediante el lector de pantalla para desplazarse por la página.

Habilitación del lector de pantalla de Windows

Narrador es un lector de pantalla integrado directamente en Windows que permite a los usuarios completar tareas comunes sin un mouse. Hay dos formas de habilitar Narrador:

• Seleccione la tecla del logotipo de Windows+Ctrl+ENTRAR para iniciar el Narrador. Vuelva a presionar estas teclas para detenerlo. (En versiones anteriores de Windows, el acceso directo era Tecla del logotipo de Windows+Entrar). En muchos teclados, la tecla del logotipo de Windows se encuentra en la fila inferior de teclas, hacia cualquier lado de la tecla Alt.

• Presione la tecla del logotipo de Windows+Ctrl+N para abrir la configuración de Narrador y, después, active el botón de alternancia en Usar Narrador.

Se recomienda que consulte el tutorial de Narrador, que puede encontrar en la pantalla de configuración del Narrador.

Navegación por la página mediante el Narrador

1. Si aún no se está ejecutando, abra Narrador presionando la tecla del logotipo de Windows+Ctrl+ENTRAR.
2. Con el Narrador en ejecución, cambie a la página web de pizzas. Puede seleccionar el explorador o usar Alt+Tab para hacerlo.
3. Presione la tecla 1 para enumerar el encabezado de nivel superior. Debería escuchar "Welcome" (Bienvenido) leído en voz alta.
4. Vuelva a seleccionar la tecla 1. Oirá "Join our mailing list" (Unirse a nuestra lista de distribución de correo). Esta narración no es correcta porque solo debe haber un elemento <h1> en una página.
5. Vuelva a seleccionar la tecla 1. El Narrador informa de que no hay más elementos <h1>.
6. Seleccione la tecla 2. El Narrador informa de que no hay elementos <h2>.
7. Seleccione la tecla 3. El Narrador informa de que no hay elementos <h3>. Está claro que algo sucede con el resto de encabezados de la página.
8. Presione la tecla del tabulador varias veces para navegar por el formulario y el botón Enviar. Funciona bien, tal y como cabría esperar por nuestra validación anterior de las tabulaciones.
9. Presione el tabulador una vez más. Oirá un vínculo leído en voz alta que dice "Link: click here" (Vínculo: haga clic aquí). Esta narración no está clara porque no podemos saber qué vínculo se nos pide seleccionar.
10. Para detener Narrador, seleccione la tecla del logotipo de Windows+Ctrl+ENTRAR.

Corrección de problemas encontrados durante la prueba del lector de pantalla

Tenemos que corregir un par de elementos que nos quedan de esta página: los encabezados y el misterioso vínculo "Click here" (Haga clic aquí).

Corrección de los encabezados

1. Vamos a bajar de nivel el encabezado "Join our mailing list" (Unirse a nuestra lista de distribución de correo) de <h1> a <h2>. Solo puede haber un <h1> y el texto "Welcome" (Bienvenido) arriba de la página ya estaba ahí antes.

   <h2>Join our mailing list</h2>
   

2. Al revisar el código HTML del encabezado "All about our wonderful pizza!" (Todo sobre nuestra magnífica pizza), se revela el problema que impedía que el Narrador lo encontrara, y es que no era en realidad un encabezado.

   <p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>
   

   El estilo de este texto debe usar un tipo de letra grande en negrita, pero no está utilizando un elemento de encabezado. Cambie esta etiqueta por <h2>.

   <h2>All about our wonderful pizza!</h2>
   

3. Ahora que sabe qué buscar, puede ver que este mismo problema se repitió en los otros encabezados más abajo de la página. Cambie el encabezado "We take your privacy seriously!" (Nos tomamos su privacidad muy en serio) para usar <h2>.

   <h2>We take your privacy seriously!</h2>
   

4. Cambie el encabezado "Delivery options" (Opciones de entrega) para que use <h2>.

   <h2>Delivery options</h2>
   

Cambio de "Click here" (Haga clic aquí)

Busque la línea que tiene el texto "Click here" (Haga clic aquí) poco útil:

Want to know more? <a href="/Privacy">Click here.</a>

Cámbielo por la siguiente redacción.

View our <a href="/Privacy">privacy policy</a> for more information.

Comprobación final con el lector de pantalla

1. Para abrir Narrador, seleccione la tecla del logotipo de Windows+Ctrl+ENTRAR.
2. Con el Narrador en ejecución, cambie a la página web de pizzas.
3. Presione el tabulador varias veces para desplazarse por los vínculos de la página. Esta vez, en lugar de escuchar "Link: Click here" (Vínculo: haga clic aquí), oirá "Link: privacy policy" (Vínculo: directiva de privacidad). ¡Lo has arreglado!
4. Presione la tecla 1 para enumerar el encabezado de nivel superior. Debería escuchar "Welcome" (Bienvenido) leído en voz alta.
5. Vuelva a seleccionar la tecla 1. Oirá que el Narrador informa de que no queda ningún encabezado de nivel 1. La operación se ha realizado correctamente.
6. Presione varias veces la tecla 2 para recorrer los encabezados de nivel 2. Narrador los lee en voz alta.
7. Para detener Narrador, seleccione la tecla del logotipo de Windows+Ctrl+ENTRAR.

Continuar