herramientas de evaluación - web.ua.es · herramientas de evaluación web developer: 3 para...

Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]

Herramientas de evaluación

WAVE Chrome Extension at the Google Web Storehttps://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Web Developer Chrome Extension at the Google Web Storehttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

1

CHROME

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm



2

Lector de pantalla NVDAhttp://www.nvaccess.org/download/

Teclas de acceso rápido:

• Cursores arriba y abajo para seguir con la lectura secuencial.

• CONTROL+INICIO, nos posicionamos al inicio de la página.

• Tecla H, para movernos entre encabezados.

• MAYÚSCULA (SHIFT) + H encabezado anterior.

• Apretar del 1 al 6 para moverse por los diferentes niveles de encabezado.

• MAYÚSCULA (SHIFT) + (1 al 6) encabezado anterior de nivel N (1-6).

• Tecla L, para movernos entre listas.

• Tecla K, para movernos entre enlaces.

• MAYÚSCULA (SHIFT) + K enlace anterior.

• Tecla U, siguiente enlace no visitado.

• Tecla V, siguiente enlace visitado.

• BLOQ. MAYUS+F7, muestra la lista de enlaces y encabezados.

• Cuando queramos entrar en un enlace que nos anuncia el lector de pantalla, primero hemos de posicionarnos con el foco con la tecla

TABULADOR y después accedemos con la tecla INTRO.

• Principio párrafo: MAYÚSCULA (SHIFT) +N

• Salir: BLOQ. MAYUS + Q / Ejecutar: Ctrl + Alt + N

Ayuda, botón derecho sobre el icono de la aplicación

en ejecución -> Guía de usuario.

Manejo de NVDA, las techas de acceso

rápido para la navegación web a través

del PC se encuentran bajo el epígrafe

modo navegación.

http://www.compartolid.es/nvda/

Más teclas en

http://www.nvaccess.org/download/

http://www.compartolid.es/nvda/



Web Developer:

3

Para Chrome



WAVE:

4

Para Chrome



WAVE:a. Los iconos en rojo, con alternativa textual "Error", son los

errores detectados de forma automática que deberemos corregir.

b. Los iconos en amarillo, con alternativa textual "Alert", son las advertencias detectadas de forma automática, es decir, deberemos evaluar si existe o no un error y corregirlo.

c. Los iconos en verde, con alternativa textual "Feature", son los criterios satisfactorios detectados de forma automática, deberemos comprobar de forma manual si son correctos o no.

d. Iconos de estructura, son los iconos que muestran los “elementos estructurales” de nuestro sitio web (listas, encabezados, etc..) y veremos en detalle.

5

Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 6


Evaluación. Imágenes

Este icono indica que no existe el atributo de alternativa textual "alt". (Este caso en vuestros contenidos no se os va a dar).

El icono nos indica que hay una imagen enlazada sin alternativa textual.

El icono nos indica que hay una imagen enlazada con alternativa textual.

Cuando existe una alternativa textual vacía deberéis de comprobar si es correcto o no.

Este icono alerta que cerca de la imagen se repite el texto alternativo de ésta y hemos de revisar que no comentamos redundancia.

Este icono indica que existe una alternativa textual, en este caso hemos de comprobar que sea la correcta.

7

WAVE


1. Quitar las imágenes: Images Disable images Disable all. (Acordaros siempre de dejarlo como estaba ;-). )

2. Mostrar el texto alternativo: Images Display Alt attributes.

Evaluación. Imágenes

8

WEB DEVELOPER TOOLBAR


Evaluación. Enlaces

1. Título de los enlaces: Information Display Alt attributes

2. Url’s de los enlaces: Information Link details

9




10


1. Cambio de contexto: Outline Outline External Links



El icono nos indica que puede existir un enlace sin sentido fuera del contexto, detecta dos enlaces con el mismo texto y diferente destino, enlaces demasiado cortos, etc.

Iconos que indican un enlace a un archivo en otro formato:

Este icono que detecta enlaces redundantes, con el mismo destino y diferente texto en el enlace.

El icono nos alerta de que el enlace posee un título redundante.

11

WAVE


Evaluación. Encabezados

1. Mostar lista encabezados: Information -> View document outline

12



Evaluación. Encabezados

• Nos tenemos que fijar en los iconos (h1-h6).

• El icono nos indica que nos hemos saltado un nivel.

• El icono indica que hay un encabezado vacío.

Outline,

13

WAVE


Evaluación. Listas

• El icono representa una lista ordenada.

• El icono representa una lista no ordenada.

• Detectar errores:• Listas mal anidadas

14

MAL BIEN

WAVE

Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 15

Evaluación. Párrafos

• Information Display Topografic Information.

• Information -> Display Abbreviation o Display Title Attributes

Evaluación. Abreviaturas y acrónimos




Evaluación. Tablas

16

• Information Display Table Information


herramientas de evaluación - web.ua.es · herramientas de evaluación web developer: 3 para...

Documents