8.5: Revisión de plantillas de auditoría y auditoría

Una Auditoría de Plantilla es quizás la más impactante de los diferentes tipos de auditorías que se discutirán aquí.

Finalidad de la Auditoría

Estas auditorías se centran en los elementos comunes a lo largo de un sitio web, como la navegación, encabezado, pie de página, menús y el diseño en general. A menudo son rápidos de completar, tardando solo unas pocas horas, y a menudo implican mirar solo una página. Hay ocasiones en las que se pueden revisar múltiples plantillas, como la página de inicio, que a menudo difiere de otras páginas, así como uno o dos diseños únicos de otras páginas de un sitio web.

Proceso de Auditoría

En la captura de pantalla a continuación puedes ver las áreas de una página delineadas. Para una Auditoría de Plantilla, la Navegación Principal, la Cabecera (es decir,. Banner), el menú lateral y el área Pie de página son revisados. El Área de Contenido Principal sería ignorada por ahora, para ser revisada como parte de una Auditoría General.

Figura: Los elementos típicos de la plantilla incluyen el encabezado, el menú lateral, el banner, el área de contenido principal, el contenido complementario y el pie de página

Punto Clave: Antes de seguir leyendo, descargue la Plantilla de Revisión WCAG2 [doc], si aún no lo ha hecho, y ábrala en Microsoft Word, u otro procesador de textos que admita archivos.doc.

Procedimiento de Auditoría

Usando la plantilla de sitio de muestra que se muestra en la figura anterior, examina todas las características excepto el área de contenido principal. Se pueden seguir las siguientes series de pruebas para auditar los elementos comunes de la plantilla. Esta misma serie de pruebas también se utilizaría para Auditorías Generales y Detalladas, pero en lugar de centrarse en elementos de una sola página en el caso de una Auditoría de Plantilla, estos pasos se seguirían para cada página que se esté revisando como parte de una auditoría.

Visite el escaparate de accesibilidad web para seguirlo mientras recorrimos una auditoría de página. Abra la plantilla de auditoría para que pueda agregarle notas a medida que lo siga. Cada una de las siguientes estrategias de prueba incluye una alternativa multimedia al texto del recorrido.

Nota respecto a los siguientes videos: Los videos que aparecen en la siguiente sección se consideran “alternativas mediáticas para el texto” y como tales no requieren de leyendas. El texto mismo proporciona los equivalentes de texto para los videos (Ver Directriz 1.2.2). No obstante, los hemos subtitulado aquí. Si encuentras videos usados de esta manera, sin leyendas, no es necesario que se identifiquen en un informe de auditoría como una barrera potencial, siempre y cuando estén listados como alternativas de medios.

Prueba de navegación con la tecla Tab

Video: Pruebas de Accesibilidad con Tecla de

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1438

1. Coloque el cursor en la esquina superior izquierda de la página. Comience presionando la tecla Tab repetidamente y siguiendo la ruta del cursor a través de los elementos de la plantilla. Busque enlaces de omisión en la parte superior de la página y, si no son visibles, mire la barra de estado del navegador en la parte inferior de la ventana del navegador para ver si hay enlaces de omisión ocultos. La URL que allí se muestra debe tener “#content” al final de la misma, o algo similar prefijado con el signo numérico, o hash (#) como a menudo se le conoce. Siga los enlaces de derivación presionando la tecla enter cuando reciban el enfoque, para asegurarse de que conducen al área de contenido principal o, en algunos casos, al menú lateral. Si estos enlaces de derivación no están presentes, busque otros medios para navegar por el contenido, como los puntos de referencia, como se describe en la prueba del lector de pantalla a continuación o examinando el marcado HTML para encontrarlos, o busque un buen uso de los encabezados. (Directriz 2.4.1, Nivel A)
2. Asegúrese de que la ruta que toma el cursor sea visible. (Directriz 2.4.7, Nivel AA)
3. Busque acceso a una declaración de accesibilidad en algún lugar cerca de la parte superior de la plantilla, y que aparezca al principio de la secuencia Tab. (Directriz 3.3.5, Nivel AAA)
4. Asegúrese de que los menús de abajo a la izquierda de la página estén abiertos y se pueda acceder a los elementos de los submenús mediante el teclado. Esto puede requerir el uso de las teclas de flecha, o pueden abrirse con la tecla Tab o la barra espaciadora. (Directriz 2.1.1, Nivel A)
5. Asegúrese de que haya una manera de saltarse los menús, especialmente si contienen muchos elementos en los submenús. Por lo general, la tecla Tab pone el foco al menú, las teclas de flecha se utilizan para navegar por ella, y la tecla Tab se presiona para salir del menú, y en este caso pasar al área del banner a la derecha. (Directriz 2.4.1, Nivel A)
6. Después del área del banner, el cursor debe moverse al área de contenido principal. De nuevo asegurar que el foco sea visible a través de elementos en el contenido principal. Observe los tabpanels en el área de contenido principal. Asegúrese de que es posible moverse entre las pestañas en el panel de pestañas, normalmente usando las teclas de flecha, y moverse directamente de una pestaña a su panel asociado, normalmente usando la tecla Tab. La funcionalidad del teclado para tabpanels puede variar un poco de un sitio a otro. (Lineamientos 2.4.7, Nivel AA, Directriz 2.1.1, Nivel A, Directriz 2.4.1, Nivel A)
7. Después de llegar al final del menú lateral, el cursor debe moverse hacia el área de contenido principal. Por ahora ignoraremos probar los elementos dentro del área de contenido principal, y volveremos a ellos cuando discutamos Auditorías Generales. (Directriz 1.3.2, Nivel A)
8. Después de tablar a través del área de contenido principal, el cursor debe moverse hacia el contenido complementario del lado derecho. De nuevo, asegúrese de que el foco sea visible mientras navega por sus elementos, y que los alternadores utilizados para abrir y cerrar el menú del acordeón operen con una pulsación de teclas, y que lo hagan sin recargar la página, o sin perder el foco en los alternadores cuando su estado cambie (por ejemplo, abierto a cerrado). Asegúrese de que los elementos de los submenús abiertos sean operables por teclado. (Directriz 1.3.2, Nivel A, Directriz 2.4.7, Nivel AA, Directriz 3.2.2, Nivel A, Directriz 2.1.1, Nivel A)
9. Después de pasar por el área de contenido complementario con la tecla Tab, el cursor debe moverse al área del pie de página. De nuevo asegurar que el foco sea visible, y que los elementos funcionales, en este caso los enlaces, reciban todos el enfoque del teclado y operen con una pulsación de teclas. (Directriz 1.3.2, Nivel A, Directriz 2.4.7, Nivel AA, Directriz 2.1.1, Nivel A)
10. Habiendo llegado al final de la página, anote si la ruta que tomó el cursor a través de la página era una ruta lógica, cruzando de izquierda a derecha, moviéndose de arriba a abajo. (Directriz 1.3.2, Nivel A)
11. También tenga en cuenta si todos los elementos por los que pasó el foco son significativos por sí mismos, y/o dentro del contexto de otros elementos funcionales de la página. (Directriz 2.4.9, Nivel AAA, Directriz 2.4.4, Nivel A

Uso de un verificador de accesibilidad automatizado

Video: Verificación de Accesibilidad Automatizada

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1438

1. Usaremos aChecker aquí para fines de demostración, aunque puede optar por usar otra herramienta de prueba de accesibilidad automatizada.
2. Pruebe la página a través de su URL, o si el sitio no está disponible públicamente, vea el origen de la página, que normalmente se encuentra en el menú Ver del navegador, seleccione todas las marcas que se muestran en la ventana de ver fuente (por ejemplo, presione Ctrl-A), copie el marcado (por ejemplo, presione Ctrl-C) en el portapapeles del sistema, luego pegue el desde el portapapeles (Ctrl-V) en el área Pegar marcado HTML del verificador de accesibilidad.
3. Abra el menú de opciones en AChecker y seleccione Mostrar fuente, WCAG 2.0 (Nivel AA) y Ver por guía. O bien, ajuste estas opciones según sea necesario. Puede elegir WCAG 2.0 (Nivel AAA), aunque los problemas identificados en este nivel suelen ser opcionales.
4. Después de seleccionar las opciones, presione el botón “Check It” para ejecutar el verificador, y espere unos momentos mientras se genera el informe.
5. Anote el número de problemas conocidos, probables y potenciales que identifica el verificador, centrándose en los problemas conocidos para comenzar. Examine los Problemas Conocidos para asegurarse de que no son falsos positivos. Es posible que deba seguir el enlace del número de línea junto a un problema para examinar el marcado circundante. Si los problemas son reales, anotarlos con la directriz apropiada en su informe de auditoría de desarrollo. También puedes examinar otra información sobre temas siguiendo el enlace junto a cada cheque que aparece en el reporte del verificador.
6. Después de documentar los problemas conocidos en su informe de auditoría en desarrollo, cambie a la pestaña Problemas probables en el verificador, si hay alguno, y escanee estos problemas para confirmar si los problemas son reales o no. Estos problemas pueden ser reales, aunque a menudo no lo son, cuando se proporcionan alternativas accesibles. Escanee el contenido de la página para asegurarse de que los elementos marcados como probables tengan una alternativa accesible. Si estos resultan ser temas reales, anotarlos con la directriz apropiada en su informe de auditoría en desarrollo.
7. Finalmente, escanee los temas presentados en la pestaña Problemas Potenciales. Estos con bastante frecuencia no son problemas en absoluto, pero debido a que el verificador es incapaz de identificar estos problemas con certeza, un humano tiene que tomar una decisión. Si estos resultan ser problemas reales, identifíquelos en su informe de auditoría en desarrollo.

Validación de marcas

Video: Validación HTML

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1438

1. Al igual que con AChecker, envíe la URL o pegue una copia de la fuente HTML de la página en el Validador HTML del W3C para evaluar la validez del HTML y asegurarse de que los errores de marcado no están causando barreras potenciales. Al igual que AChecker también puedes seleccionar Opciones, aunque la configuración predeterminada suele ser suficiente.
2. Preste atención a los errores identificados en el informe que genera el validador, y no se preocupe por las advertencias. Preste especial atención a los ID duplicados, los elementos que no están cerrados y los elementos que están anidados incorrectamente. Estos problemas corren el riesgo de confundir a los lectores de pantalla.
3. Si la página no valida (la mayoría no lo hará) proporcione una declaración general junto con la directriz 4.1.1 (Nivel A) en su informe de auditoría, esa validación debe realizarse para eliminar las barreras potenciales que pueden surgir cuando las tecnologías de asistencia encuentran marcas rotas, y proporcionar un enlace al validador. No es necesario documentar todos los errores de marcado, aparte de los mencionados anteriormente.

Escaneo del lector de pantalla

Video: Probando Accesibilidad con ChromeVox

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1438

1. Para las pruebas del lector de pantalla usaremos ChromeVox, enciéndalo luego continuar.
2. Repita la prueba de navegación con la tecla Tab con el lector de pantalla funcionando y escuche atentamente lo que anuncia el lector de pantalla. ¿Es significativo lo que escuchas? Documente en su informe de auditoría donde se pueda proporcionar una descripción adicional. Son todos los elementos funcionales capaces de recibir enfoque, y operar con una pulsación de teclas. (Directriz 3.3.2, Nivel A, Directriz 2.1.1, Nivel A)
3. Enumere los encabezados de la página usando el comando Screen Reader list headings (Cvox-L-H) y use la tecla de flecha hacia abajo para recorrer la lista. ¿Están presentes los encabezados y estructurados de manera significativa? ¿Hay texto que parece ser un encabezado pero no reconocido por el lector de pantalla (por ejemplo, fuentes grandes en negrita en lugar de encabezados adecuados)? Documente estos temas en su reporte si son relevantes (Directriz 1.3.1, Nivel A, Directriz 2.4.6, Nivel AA, Directriz 2.4.10, Nivel AAA). Si no hay enlaces de derivación, se proporcionan encabezados para permitir la navegación a través del contenido (Directriz 2.4.1, Nivel A)
4. Enumere los puntos de referencia en la página usando el comando list landmarks del lector de pantalla (Cvox-L-;) y use la tecla de flecha hacia abajo para recorrer las regiones marcadas. ¿Todas las áreas de la página están contenidas dentro de una región marcada? ¿Están presentes los hitos si los enlaces de derivación o los encabezados no lo están? Documente estos temas en su informe si es relevante. Sugerir incluirlos independientemente de otras formas de navegar por la página que esté presente. (Directriz 2.4.1, Nivel A)
5. Enumere los enlaces de la página usando el comando list link del lector de pantalla (Cvox-L-L). ¿Todos los vínculos son significativos en contexto, o no en contexto? (Directriz 2.4.4, Nivel A, Directriz 2.4.9, Nivel AAA)

Otras Pruebas

Video: Comprobar contraste de color

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1438

Escanee la página en busca de posibles problemas de contraste de color. Aunque la página no debería tener ninguna, el texto gris sobre el fondo gris en el área del pie de página parece sospechoso. Determine los códigos de color utilizando la función Inspeccionar elemento de su navegador y ejecute esos colores a través de un comprobador de contraste de color para confirmar que proporcionan suficiente contraste. (Directriz 1.4.3, Nivel AA, Directriz 1.4.6, Nivel AAA)