wat tutorial
Tutorial de la barra de herramientas de accesibilidad web o WAT para pruebas de accesibilidad:
Herramientas de prueba de accesibilidad se explicaron en detalle en nuestro tutorial anterior en el Serie de pruebas de accesibilidad .
WAT (barra de herramientas de accesibilidad web) - es una barra de herramientas para Navegador Internet Explorer y otros navegadores - Puede ayudar a evaluar una página web para determinar el cumplimiento de las Pautas de accesibilidad al contenido web versión 2 (WCAG 2.0).
¿Cómo utilizar la herramienta WAT?
Por favor descárgalo e instálalo desde aquí .
Después de una instalación exitosa, verá una herramienta de accesibilidad web adicional justo debajo de la barra de direcciones.
Vamos a aprender esto con la ayuda del sitio web de EAsports: http://www.easports.com.
# 1) Título de la página - Podemos verificar la barra de título de la página en la barra de título de la ventana o en la barra de título de la pestaña de los navegadores. Al pasar el mouse sobre la pestaña, obtendrá la información del título de la página.
Ingrese la URL http://www.easports.com y verifique el título de la página en la barra de título de la pestaña colocando el mouse.
#2) Color - El color del sitio web debe pasar en Color Contrast Analyzer.
Hay 3 niveles de conformidad diferentes para determinar la proporción de color, es decir, nivel A, AA y AAA.
Debe obtener un pase AA o AAA .
“A” representa un nivel bajo de accesibilidad, “AA” representa un nivel medio de accesibilidad y “AAA” representa el nivel más alto de accesibilidad.
Ingrese la URL http://www.easports.com i En la barra de herramientas, haga clic en la pestaña Color y seleccione Contrast Analyzer y verifique.
# 3) Encabezados - Los títulos proporcionan una visión general eficaz del contenido de la página. Todas las páginas deben comenzar con títulos H1 o H2. El texto del encabezado debe ser más grande, en negrita y estar marcado en las páginas web. Y la página debe comenzar con 'h1' y en cada página debe haber al menos un encabezado.
Para verificar la estructura del encabezado, haga clic en http://www.easports.com y seleccione la pestaña Estructura y luego haga clic en la estructura del encabezado y verifique. Le dará todos los detalles del título del encabezado. También examinará si los encabezados están anidados correctamente o no.
# 4) Texto alternativo para imágenes - El atributo alt es compatible con los principales navegadores. Todas las imágenes deben tener un texto alternativo asociado. Muestra el valor del atributo alt como información sobre herramientas cuando pasamos el cursor sobre la imagen. Esto proporciona información alternativa de una imagen si la imagen no se puede mostrar.
Ingrese la url http://www.easports.com, haga clic en mostrar imágenes y verifique si el texto alternativo está disponible para las imágenes.
Obtendrá la siguiente ventana emergente:
Obtendrá los detalles como se mencionó anteriormente.
# 5) Orden de tabulación - El orden de secuencia de las pestañas debe mostrarse de forma lógica y adecuada. Puede navegar a los diferentes enlaces haciendo clic en la tecla de tabulación. Después de seleccionar el indicador de orden de tabulación, puede ver el recuento de números cerca de los enlaces que muestra cuántas veces debe hacer clic en la tecla de tabulación para llegar a ese enlace en particular.
Para verificar el orden de las pestañas, haga clic en la URL http://www.easports.com y haga clic en Estructura y seleccione el indicador de orden de pestañas.
# 6) Listas - La lista debe mostrarse con la estructura adecuada. Las listas siempre deben revisarse para asegurarse de que los elementos de la lista estén realmente contenidos dentro de una lista. La lista puede ser de dos formas: ordenado lista y desordenado lista . Las listas desordenadas utilizan la elemento y listas ordenadas utilizan el
elemento.
Ingrese la URL http://www.easports.com i En la barra de herramientas, haga clic en estructura y seleccione Elementos de lista y verifique el orden de la lista.
Ejemplo de lista desordenada:
Ejemplo de lista ordenada:
# 7) Contraste proporción - Debe tener un contraste mínimo por defecto. Los navegadores web deben permitir a las personas cambiar el color del texto y el fondo si es necesario.
Ingrese la URL de Google https://www.google.co.in/ y haga clic en las imágenes y seleccione Juicy Studio Luminosity Analyzer.
Se abrirá una nueva ventana titulada Analizador de contraste de color con la tabla de resultados. La última columna es la relación de contraste de luminosidad.
quién tiene el mejor servicio de correo electrónico
# 8) Etiquetas - Las etiquetas deben mostrarse correctamente.
Introducir URL https://www.google.co.in/ y en la barra de herramientas haga clic en Estructura y seleccione conjunto de campos / etiquetas como opción. Verá el conjunto de campos y los detalles de la etiqueta.
# 9) Básico Estructura Controlar - En este cheque verificamos páginas web sin imágenes, estilos y maquetación.
En la barra de herramientas, haga clic en Imágenes y luego en Eliminar imágenes.
Ahora seleccione CSS y luego haga clic en Desactivar CSS.
Finalmente haga clic en Tablas y luego seleccione Linearizar.
Tiempo para practicar:
Démosnos ahora una tarea de prueba de accesibilidad de muestra, por supuesto, se proporciona la solución. Pero le recomendamos que pruebe esto usted mismo antes de pasar a la respuesta.
Verifique los títulos, las imágenes con texto alternativo, el indicador de orden de tabulación y el contraste de color en http://www.cbssports.com
Solución: Haga clic en la URL http://www.cbssports.com en Internet Explorer.
Para verificar los encabezados, haga clic en Estructura y seleccione Estructura del encabezado para verificar el encabezado.
Los títulos no están en H1. Todos los titulares están en H2.
Para verificar el texto alternativo, haga clic en Imágenes y seleccione Mostrar imágenes para verificar si el texto alternativo está presente en las imágenes o no.
Encontrará que algunas de las imágenes tienen texto alternativo y pocas de ellas no tienen el atributo alt. Los detalles de la imagen sin texto alternativo aparecen en una ventana emergente y los detalles de las imágenes con texto alternativo se muestran cerca de las imágenes.
Por ejemploalt = texto 'Search CBS Sports.com' que se muestra cerca del icono de búsqueda y texto alt = 'CBSSports.com' que se muestra cerca del logotipo de Fantasy.
Para verificar el indicador de orden de tabulación, haga clic en Estructura y seleccione Indicador de orden de tabulación .
El recuento se mostrará cerca de los enlaces que muestra en qué intento podrá hacer clic en ese enlace en particular. Por ejemplo, para hacer clic en la parte superior del enlace de la NFL, deberá presionar el botón de tabulación del teclado 13 veces.
Ahora el último en verificar el contraste de color, haga clic en color y seleccione Analizador de contraste.
El texto pasa con doble A, es decir, AA.
Allí, esta es la forma de evaluar la accesibilidad del sitio web.
PREV Tutorial | SIGUIENTE Tutorial
Lectura recomendada
- Tutorial de la herramienta de prueba de accesibilidad WAVE
- Tutoriales detallados de Eclipse para principiantes
- Tutorial de pruebas de accesibilidad (una guía completa paso a paso)
- Las 20 mejores herramientas de prueba de accesibilidad para aplicaciones web
- Mejores herramientas de prueba de software 2021 (Herramientas de automatización de pruebas de control de calidad)
- Tutorial de pruebas destructivas y no destructivas
- Pruebas funcionales versus pruebas no funcionales
- Tutorial de pruebas SOA: metodología de prueba para un modelo de arquitectura SOA