Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Herramientas de evaluación
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Herramientas de evaluación
Web Developer:
3
Para Chrome
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Herramientas de evaluación
WAVE:
4
Para Chrome
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Herramientas de evaluación
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Enlaces
1. Título de los enlaces: Information Display Alt attributes
2. Url’s de los enlaces: Information Link details
9
WEB DEVELOPER TOOLBAR
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Enlaces
10
WEB DEVELOPER TOOLBAR
1. Cambio de contexto: Outline Outline External Links
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Enlaces
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Encabezados
1. Mostar lista encabezados: Information -> View document outline
12
WEB DEVELOPER TOOLBAR
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
WEB DEVELOPER TOOLBAR
WEB DEVELOPER TOOLBAR
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Tablas
16
• Information Display Table Information
WEB DEVELOPER TOOLBAR