Accesibilidad en la Web: de WCAG 1.0 a WCAG...
Transcript of Accesibilidad en la Web: de WCAG 1.0 a WCAG...
![Page 1: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/1.jpg)
DLSI – Universidad de Alicante 1
Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0
Universidad de ColimaMéxico
Departamento de Lenguajes y Sistemas Informáticos
HerramientasHerramientas
Sergio Luján MoraDepartamento de Lenguajes y Sistemas Informáticos
Universidad de Alicante
![Page 2: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/2.jpg)
DLSI – Universidad de Alicante 2
Contenido• Diseño• Conversores• Navegadores• Extensiones de los navegadores• Revisores• Otras• Tecnología asistiva
Diseño• Macromedia Dreamweaver MX
Di i• Diversas opciones:– Preferencia de accesibilidad: solicita información
de accesibilidad en algunos elementos HTML– Validación: permite verificar la accesibilidad de un
sitio web– Documentación: incluye documentación sobre
accesibilidadaccesibilidad– Plantillas: posee plantillas para crear sitios web
accesibles– Entorno accesible: proporciona facilidades para
ser usado por gente con discapacidades
![Page 3: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/3.jpg)
DLSI – Universidad de Alicante 3
![Page 4: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/4.jpg)
DLSI – Universidad de Alicante 4
![Page 5: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/5.jpg)
DLSI – Universidad de Alicante 5
![Page 6: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/6.jpg)
DLSI – Universidad de Alicante 6
Diseño• Extensión de Macromedia
Dreamweaver: Accessibility Suite for W3C/WCAG– Extensión gratuita que ayuda a cumplir las
pautas de prioridad 1 y 2.
Ejercicio:- Crear un sitio web sencillo- Verificar su accesibilidad
![Page 7: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/7.jpg)
DLSI – Universidad de Alicante 7
Conversores• Permiten convertir distintos recursos a
páginas web accesibles
Conversores• Illinois Accessible Web Publishing
Wizard • http://cita.rehab.uiuc.edu/software/office/• Convierte documentos de Microsoft Office
a páginas web accesibles
![Page 8: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/8.jpg)
DLSI – Universidad de Alicante 8
Ejercicio:- Transformar el documento Word disponible en la sección de ejemplos a página HTML- Comparar con la versión del conversor
V ifi ibilid d- Verificar su accesibilidad
![Page 9: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/9.jpg)
DLSI – Universidad de Alicante 9
Conversores• SWAP - The Semantic Web
Accessibility Platform• http://www.ubaccess.com/swap.html• Convierte un sitio web a accesible
![Page 10: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/10.jpg)
DLSI – Universidad de Alicante 10
Conversores• ART simulator• Permite experimentar de primera mano
las barreras de accesibilidad que sufren algunas personas
![Page 11: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/11.jpg)
DLSI – Universidad de Alicante 11
![Page 12: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/12.jpg)
DLSI – Universidad de Alicante 12
Ejercicio:- Probar a navegar mediante el simulador por diversas web
Conversores• ART Guide• Verifica la accesibilidad de acuerdo a
distintas normas
![Page 13: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/13.jpg)
DLSI – Universidad de Alicante 13
Navegadores• Los navegadores actuales proporcionan
poco soporte de cara a la accesibilidad• La mayoría:
– Navegación por teclado– Zoom de texto
Pantalla completa (F11)– Pantalla completa (F11)
![Page 14: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/14.jpg)
DLSI – Universidad de Alicante 14
Navegadores• Internet Explorer• Pocas opciones:
– Accesos rápidos de teclado– Un par de opciones de configuración
Navegadores
![Page 15: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/15.jpg)
DLSI – Universidad de Alicante 15
Navegadores• Cómo expandir siempre el texto ALT para las imágenes
– Para asegurarse que el texto ALT no se corta si la cantidad es g qmás amplia que el área de la imagen, las personas que lo utilizan deberían seleccionar la opción Expandir siempre el texto ALT para las imágenes. Actívela, y el espacio de la imagen se ampliará para que se adapte al texto.
• Cómo mover el cursor del sistema con cambios de foco y selección– Cuando activa esta opción de accesibilidad el cursor oCuando activa esta opción de accesibilidad el cursor o
dispositivo señalador cuando hay cambios de foco y selección. Gracias a esta opción se mejora la legibilidad de la pantalla y se dispone de amplificador que usa el cursor para determinar que área de la pantalla se puede leer o ampliar.
![Page 16: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/16.jpg)
DLSI – Universidad de Alicante 16
Navegadores• Cómo incrementar la accesibilidad gracias a
l i dlas opciones avanzadas:– Internet Explorer 6 ofrece una serie de opciones
avanzadas que le pueden ayudar a tener una experiencia más accesible y conveniente para sus necesidades y gustos personales
– Con tan solo activar o desactivar algunas de estas configuraciones avanzadas podrá sacar un mayor partido a la tecnología de asistencia y las opciones de accesibilidad que ha seleccionado
Para usuarios que: Activar: Desactivar:
Dependen de los textos ALT (textos alternativos que describen imágenes)
• Expandir siempre el texto ALT para las imágenes
• Mostrar las imágenes
Utilizan lectores de pantalla o ampliadores de pantalla
• Cómo mover el cursor del sistema con cambios de foco y selección
• Utilizar el desplazamiento suave
• Habilitar las transiciones de ypáginas
• Reproducir sonidos
Utilizan programas de reconocimiento de voz
• Utilizar el desplazamiento suave
• Habilitar las transiciones de páginas
Padecen de visión baja • Mostrar las imágenes• Reproducir las animaciones• Reproducir videos• Reproducir videos• Imprimir las imágenes y los
colores de fondo
Sufren trastornos cognitivos • Reproducir sonidos
Son sensitivos a las lucen demasiado fuertes
• Mostrar las imágenes• Reproducir las animaciones• Reproducir videos
![Page 17: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/17.jpg)
DLSI – Universidad de Alicante 17
Navegadores• Internet Explorer 7• Incorpora nuevas opciones:
– Todas las características son accesibles a través del teclado
– Zoom completo de página: Ctrl+ y Ctrl-múltiples niveles de zoom, Ctrl0 (100%)múltiples niveles de zoom, Ctrl0 (100%)
– Algunas opciones de configuración nuevas
Navegadores• Si presiona TAB o MAYÚS+TAB, puede
desplazarse por las siguientes partes de la pantalla:– Vínculos que son texto o imágenes – Zonas activas en mapas de imágenes – La barra de direccionesLa barra de direcciones – La barra de pestañas – Marcos
![Page 18: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/18.jpg)
DLSI – Universidad de Alicante 18
![Page 19: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/19.jpg)
DLSI – Universidad de Alicante 19
Navegadores• Mozilla• http://www.mozilla.org• Zoom de texto: Ctrl+ y Ctrl- múltiples
niveles de zoom, Ctrl0 (100%)• Colabora con:
– JAWS– Dragon Naturally Speaking– …
![Page 20: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/20.jpg)
DLSI – Universidad de Alicante 20
![Page 21: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/21.jpg)
DLSI – Universidad de Alicante 21
Navegadores• Firefox• http://www mozilla com/firefox/• http://www.mozilla.com/firefox/• Basado en Mozilla:
– Zoom de texto: Ctrl+ y Ctrl- múltiples niveles de zoom– Colabora con: JAWS, Dragon Naturally Speaking, …
• Permite desactivar las hojas de estilo en cascada (CSS)
• Primer navegador que soporta “DHTML accessibility”Primer navegador que soporta DHTML accessibility• Primer navegador que cumple requisitos del gobierno
federal de los EE.UU. sobre software accesible:– http://www.mozilla.com/firefox/vpat.html
Navegadores
![Page 22: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/22.jpg)
DLSI – Universidad de Alicante 22
![Page 23: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/23.jpg)
DLSI – Universidad de Alicante 23
Navegadores• Opera
htt //• http://www.opera.com• Incorpora una serie de opciones:
– Zoom completo de página– Diferentes estilos: navegador de texto, diseño de
accesibilidad, etc.– Lista de enlaces– Sintetizador/reconocedor de voz– Acceso rápido por teclado– Opciones avanzadas de navegación por teclado
![Page 24: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/24.jpg)
DLSI – Universidad de Alicante 24
![Page 25: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/25.jpg)
DLSI – Universidad de Alicante 25
![Page 26: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/26.jpg)
DLSI – Universidad de Alicante 26
Navegadores• Opciones avanzadas de navegación la
página por teclado:página por teclado:– Siguiente/anterior enlace: A y Q– Siguiente/anterior Título/Cabecera (H1, H2, H3...):
S y W– Siguiente/anterior marco: 3 y Mays+3– Siguiente/anterior elemento: gráfico, párrafo,
celda de tabla etc : D y Ecelda de tabla, etc...: D y E • Activación/desactivación de gráficos: Mays+I• Activación/desactivación de CSS: Mays+G
![Page 27: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/27.jpg)
DLSI – Universidad de Alicante 27
Navegadores• Lynx• http://lynx.browser.org/• Famoso navegador en modo texto
disponible para varias plataformas
![Page 28: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/28.jpg)
DLSI – Universidad de Alicante 28
Navegadores• Lynx Viewer• http://www.delorie.com/web/lynxview.ht
ml• Simulador del navegador Lynx a través
de página webN it i t l fi h• Necesita que exista el fichero delorie.htm en el sitio web a visitar
![Page 29: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/29.jpg)
DLSI – Universidad de Alicante 29
Navegadores• Otros:
– BrailleSurf:• http://www.snv.jussieu.fr/inova/bs4/uk/
– MozBraille:• http://mozbraille.mozdev.org/
![Page 30: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/30.jpg)
DLSI – Universidad de Alicante 30
Extensiones de los navegadores• Internet Explorer:
– Accessibility Extension for Internet Explorer
– CheckIE– Internet Explorer Developer Toolbar– Web Accessibility ToolbarWeb Accessibility Toolbar
Extensiones de los navegadores• Accessibility Extensions for Internet
Explorer• http://cita.rehab.uiuc.edu/software/ieacc
essible/overview.html• Enfocada a usuarios discapacitados,
añade funcionalidades nuevas alañade funcionalidades nuevas al navegador para facilitar la navegación
![Page 31: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/31.jpg)
DLSI – Universidad de Alicante 31
Extensiones de los navegadores• Características:
– Lista de enlaces (ALT-F12) ( )– Lista de encabezados (ALT-F11, destaca los encabezados y
desplaza el foco al enlace más cercano) – Lista de los elementos <map> (ALT-F10, lista los enlaces de
tipo <area> o <a> contenidos en un elemento <map>) – Lista de atajos (ALT-F9) – Propiedades (ALT-F8) – Hoja de estilo del usuario, opciones avanzadas (escoger
entre la hoja de estilo del autor o del usuario) (ALT-F7) – Lista de eventos, lista de elementos con eventos y el tipo del
manejador del evento (ALT-F6) – Lista de marcos, basada en title (ALT-F5) – Lista de los controles de los formularios agrupados por la
etiqueta <label> (ALT-F3)
![Page 32: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/32.jpg)
DLSI – Universidad de Alicante 32
Extensiones de los navegadores• CheckIE
htt // h ki ft /i d ht• http://checkie.orange-soft.com/index.htm• De OrangeSoft, uno de los referentes en
accesibilidad en España• Desarrollo de la versión para Internet
Explorer de la extensión Checky (Mozilla)• Reune diversos servicios de evaluación y• Reune diversos servicios de evaluación y
reparación disponibles en línea, a los que permite acceder a través del menú contextual del navegador
Extensiones de los navegadores• La versión actual de CheckIE incluye acceso a los siguientes
servicios:– Revisores automáticos de accesibilidad:
• Access Valet• Bobby• Cynthia Says• TAW• WAVE
– Validadores de especificaciones:p• Page Valet• W3C CSS Validator• W3C Markup Validator• WDG CSSCheck• WDG HTML Validator
![Page 33: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/33.jpg)
DLSI – Universidad de Alicante 33
Extensiones de los navegadores– Herramientas de reparación:
• W3C Tidyy• Delorie WebPage Purifier
– Visualizadores:• Delorie HTTP Header Viewer• Delorie Lynx Viewer• Vischeck
– Verificadores de enlaces:• W3C Link CheckerW3C Link Checker• WDG Link Valet
![Page 34: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/34.jpg)
DLSI – Universidad de Alicante 34
Extensiones de los navegadores• Internet Explorer Developer Toolbar• http://www.microsoft.com/downloads/de
tails.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038
![Page 35: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/35.jpg)
DLSI – Universidad de Alicante 35
Extensiones de los navegadores• Web Accessibility Toolbar• http://www.visionaustralia.org.au/ais/tool
bar/• Conjunto de diversas herramientas:
– Revisores (XHTML, CSS, accesibilidad)Si l d– Simuladores
– …
![Page 36: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/36.jpg)
DLSI – Universidad de Alicante 36
Extensiones de los navegadores• Mozilla:
– Accessibility Extensions for Mozilla/Firefox – Checky– Fangs– Longdesc– View formatted source (format source
t i )extension)– View Source Chart– Web Developer Extension
Extensiones de los navegadores• Accessibility Extensions for
Mozilla/Firefox• http://firefox.cita.uiuc.edu/index.php
![Page 37: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/37.jpg)
DLSI – Universidad de Alicante 37
![Page 38: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/38.jpg)
DLSI – Universidad de Alicante 38
Extensiones de los navegadores• Checky:
– http://checky.mozdev.org/• Valida HTML, CSS, WCAG 1.0, 508...
Pero también te muestra tu web en Lynx, simula deficiencias visuales... De todotodo.
![Page 39: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/39.jpg)
DLSI – Universidad de Alicante 39
Extensiones de los navegadores• Fangs:
– http://www.standards-schmandards.com/projects/fangs/
• Emulador de lector de pantalla
![Page 40: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/40.jpg)
DLSI – Universidad de Alicante 40
Extensiones de los navegadores• Longdesc:
– https://addons.mozilla.org/es-ES/firefox/addon/273
• Añade al menú contextual la opción “View image longdesc”
Extensiones de los navegadores• View formatted source (format
source extension):– https://addons.mozilla.org/es-
ES/firefox/addon/697• Muestra el código formateado y
coloreadocoloreado• Muestra la información CSS de cada
elemento
![Page 41: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/41.jpg)
DLSI – Universidad de Alicante 41
![Page 42: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/42.jpg)
DLSI – Universidad de Alicante 42
Extensiones de los navegadores• View Source Chart:
– https://addons.mozilla.org/es-ES/firefox/addon/655• Muestra de forma coloreada el código• Muestra el anidamiento de las etiquetas
![Page 43: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/43.jpg)
DLSI – Universidad de Alicante 43
Extensiones de los navegadores• Web Developer Extension:
– http://chrispederick com/work/webdeveloper/http://chrispederick.com/work/webdeveloper/• Una barra de herramientas completísima inspirada
en la antigua PNH Developer Toolbar• Permite deshabilitar javascript, hojas de estilo,
imágenes...• También cuenta con un servicio de validación de
CSS, (X)HTML, accesibilidad... De todas formas, ( )será mejor que su autor, Chris Pederik os cuente todas las funcionalidades de su Web Developer Extension
![Page 44: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/44.jpg)
DLSI – Universidad de Alicante 44
Extensiones de los navegadores• Opera:
– Web Accessibility Toolbar
Extensiones de los navegadores• Web Accessibility Toolbar• http://www.paciellogroup.com/resources
/wat-about.html• Conjunto de diversas herramientas:
– Revisores (XHTML, CSS, accesibilidad)Si l d– Simuladores
– …
![Page 45: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/45.jpg)
DLSI – Universidad de Alicante 45
Revisores• Permiten comprobar el nivel de
accesibilidad• Recordar:
– Revisión automática + Revisión manual
![Page 46: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/46.jpg)
DLSI – Universidad de Alicante 46
Revisores• HERA y HERA XP
– Perfecta para la revisión manual de la accesibilidad de sitios web
– Dos versiones disponibles:• HERA, pensada para revisar la aplicación de todos y
cada uno de los puntos de control en una página• HERA XP, para la revisión de sólo algunos de esos
puntospuntos
– Además, permite generar informes de la evaluación en formato HTML o RDF
![Page 47: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/47.jpg)
DLSI – Universidad de Alicante 47
![Page 48: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/48.jpg)
DLSI – Universidad de Alicante 48
Revisores• TAW: Test de Accesibilidad Web con W3C• Estudia los niveles de prioridad 1, 2 y 3 y sus
niveles de adecuación• Se encuentra como versión instalable, plugin
para Firefox y a través de su web• Analiza el sitio web, no solo la página de
inicio y muestra errores manuales y automáticos de nivel 1, 2 y 3
Revisores• Los errores automáticos incumplen las
t d b idpautas y deben ser corregidos• Los errores manuales deben ser revisados,
no se puede asegurar que sean errores• Logotipos de TAW dependiendo de la
categoría y tipo de los errores:
![Page 49: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/49.jpg)
DLSI – Universidad de Alicante 49
Revisores• WAI-A: Sin problemas automáticos ni
l d i l 1manuales de nivel 1• WAI-AA: sin problemas automáticos ni
manuales de nivel 1 y 2• WAI-AAA: sin problemas manuales ni
automáticos de ningún tipo
![Page 50: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/50.jpg)
DLSI – Universidad de Alicante 50
![Page 51: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/51.jpg)
DLSI – Universidad de Alicante 51
Revisores• TAW en un click: Plugin para Firefox:
– http://www.tawdis.net/taw3/cms/es/herramientas/extension.html
“Una vez hemos instalado con éxito TAW3 en un clic, aparecerá su icono en la barra de estado del navegador y podremos hacer un análisis de accesibilidad de la página web que estemos visualizando en ese momento simplemente haciendo clic en ese icono.
Podremos también cambiar la configuración mediante el menú contextual que aparece al hacer clic con el botón derecho sobre el icono deque aparece al hacer clic con el botón derecho sobre el icono de TAW3 en un clic.
En este menú podremos elegir el nivel de análisis que deseamos, ver información sobre TAW3 en un clic, o configurarlo mediante las opciones disponibles, que nos permitirán decidir dónde se va a ejecutar el análisis (en la pestaña actual del navegador, en una nueva pestaña que se abrirá en primer plano o en segundo plano, o en una ventana nueva del navegador).”
Ejercicio:- Verificar la accesibilidad con TAW de:
Universidad de AlicanteTerraOOnce
![Page 52: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/52.jpg)
DLSI – Universidad de Alicante 52
![Page 53: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/53.jpg)
DLSI – Universidad de Alicante 53
![Page 54: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/54.jpg)
DLSI – Universidad de Alicante 54
![Page 55: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/55.jpg)
DLSI – Universidad de Alicante 55
![Page 56: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/56.jpg)
DLSI – Universidad de Alicante 56
Otras• Otras herramientas:
– Edipo– Vischeck– Color constrant verification tool– Colour Contrast Analyser
Colour Contrast Check– Colour Contrast Check
Otras• Edipo• Editor de hojas de estilo (CSS) con base en• Editor de hojas de estilo (CSS) con base en
la Web• Diseñado para ayudar a los usuarios a crear
su propia hoja de estilos, cuando no tienen conocimientos técnicos pero requieren o desean modificar la manera en que se presentan los contenidos Web para mejorar p p jsu legibilidad
• Objetivo: sustituir los estilos de la página web por los propios
![Page 57: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/57.jpg)
DLSI – Universidad de Alicante 57
![Page 58: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/58.jpg)
DLSI – Universidad de Alicante 58
Otras• Vischeck• http://www.vischeck.com/vischeck/• Simulador de ceguera a algunos
colores (daltonismo)
![Page 59: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/59.jpg)
DLSI – Universidad de Alicante 59
Otras• Color constrant verification tool:
– http://h10014.www1.hp.com/accessibility/color_tool.html
![Page 60: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/60.jpg)
DLSI – Universidad de Alicante 60
Otras• Colour Contrast Analyser:
– http://juicystudio.com/services/colourcontrast-es.php
• También como extensión para Firefox:– http://juicystudio.com/article/colour-
contrast-analyser-firefox-extension.phpcontrast analyser firefox extension.php
![Page 61: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/61.jpg)
DLSI – Universidad de Alicante 61
Otras• Colour Contrast Check:
– http://snook.ca/technical/colour_contrast/colour.html
![Page 62: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/62.jpg)
DLSI – Universidad de Alicante 62
Otras• Web Accesibility Tools Consortium• http://www.wat-c.org/tools/index.html
![Page 63: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/63.jpg)
DLSI – Universidad de Alicante 63
Tecnología asistiva• También llamado ayudas técnicas• Productos específicos para ayudar a la
gente con discapacidades:– Sintetizadores de voz
• Lectores de pantalla (screen readers)• Comparativa:
http://en wikipedia org/wiki/List of screen readers– http://en.wikipedia.org/wiki/List_of_screen_readers
– Reconocedores de voz– Magnificadores de imagen
![Page 64: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/64.jpg)
DLSI – Universidad de Alicante 64
Tecnología asistiva• Dolphin Group• http://www.dolphinuk.co.uk/• Varios productos:
– Supernova Reader Magnifier: lector, magnificador y Braille
– Hal Screen Reader: lector inteligente y BrailleL Pl E h d S M ifi– LunarPlus Enhanced Screen Magnifier: magnificador y sintetizador
– Lunar Screen Magnifier: aumenta el tamaño de la pantalla
![Page 65: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/65.jpg)
DLSI – Universidad de Alicante 65
¡Desinstalar el software!
![Page 66: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/66.jpg)
DLSI – Universidad de Alicante 66
Tecnología asistiva• JAWS• http://www.freedomscientific.com/fs_pro
ducts/JAWS_HQ.asp• Lector de pantalla
![Page 67: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/67.jpg)
DLSI – Universidad de Alicante 67
![Page 68: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/68.jpg)
DLSI – Universidad de Alicante 68
![Page 69: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/69.jpg)
DLSI – Universidad de Alicante 69
Ejercicio:1.Crear página nueva2. Insertar un enlace (con el title)3. Insertar una imagen (alt y longdesc)4. Insertar una lista numerada de elementos
Validar la página XHTML
![Page 70: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/70.jpg)
DLSI – Universidad de Alicante 70
¡Desinstalar el software!
Tecnología asistiva• Window-Eyes• http://www.gwmicro.com/Window-Eyes/• Lector de pantalla
![Page 71: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/71.jpg)
DLSI – Universidad de Alicante 71
Tecnología asistiva• IBM Home Page Reader• http://www-
3.ibm.com/able/solution_offerings/hpr.html• Lee páginas web, escritorio de Windows y
algunas aplicaciones• Incorpora magnificador• Permite navegar por: ibm.com, adobe.com,
macromedia.com y www.w3c.org
![Page 72: Accesibilidad en la Web: de WCAG 1.0 a WCAG 2rua.ua.es/dspace/bitstream/10045/6134/7/06-herramientas.pdf · 2016-04-25 · DLSI – Universidad de Alicante 15 Navegadores • Cómo](https://reader035.fdocuments.ec/reader035/viewer/2022070704/5e8564bea5adef66266eef77/html5/thumbnails/72.jpg)
DLSI – Universidad de Alicante 72
¡Desinstalar el software!