SlideShare una empresa de Scribd logo
1 de 40
Descargar para leer sin conexión
Evaluación 
CC www.diseñoaccesible.es 
Accesibilidad Web
2 
Agenda 
1. Introducción 
2. Evaluación automática 
3. Evaluación manual 
Break CC https://www.flickr.com/photos/otacke/ 
4. Evaluación manual 
5. Conclusiones
3 
Introducción
4 
Evaluación de Accesibilidad 
• Objetiva, rápida y económica. 
• Validar de estándares, pautas y aspectos específicos de la 
accesibilidad. 
• Utilizar simuladores de discapacidades y de otras tecnologías. 
• Evaluación manual utilizando herramientas y un checklist de apoyo. 
• Limitar o modificar alguna habilidad física o sensorial: 
• guantes gruesos para limitar la destreza manual 
• lentes o venda para limitar la visión 
• tecnologías de apoyo como lectores de pantalla o punteros 
bucales. 
• No evalúan la conformidad con las pautas, detectan barreras. 
Evaluación 
automática 
Evaluación 
manual 
Técnicas de 
filtrado 
Pruebas con 
usuarios
5 
Evaluación automática
6 
Estándares: (X) HTML 
• Garantiza portabilidad 
• Facilita mantenibilidad del código 
Fuente: http://validator.w3.org/ 
Objetiva - Rápida - Económica 
Ejercicio 
Recomendado 
en Pauta 4 de 
WCAG 2.0
7 
Estándares: CSS 
• Garantiza portabilidad 
• Facilita mantenibilidad del código 
Fuente: http://jigsaw.w3.org/css-validator/ Recomendado 
en Pauta 4 de 
WCAG 2.0 
Objetiva - Rápida - Económica 
Ejercicio
8 
Pautas de Accesibilidad 
• Herramientas evalúan ciertos 
aspectos de la accesibilidad 
• Algunos aspectos no son automatizables 
• No es una evaluación completa 
• Tener en cuenta: falsos positivos y negativos 
• Utilizar al menos dos herramientas 
Objetiva - Rápida - Económica
9 
Pautas de Accesibilidad 
http://www.tawdis.net/ http://examinator.ws/ 
http://www.totalvalidator.com/
10 
Evaluación manual
11 
Herramientas de apoyo 
• Pendule (Chrome) 
• WebDeveloper (Chrome, Firefox) 
Ejercicio 
Instala una 
herramienta
12 
Texto alternativo de imágenes 
• Verificar que los textos alternativos sean adecuados 
alt = “Mafalda leyendo” 
alt = “Imagen 344” 
alt = “Ingrese el texto alternativo aquí” 
alt = “Mafalda” 
alt = “Niña leyendo” 
• Pendule / Web Developer (Images → Display Alt Attributes) 
Ejemplo 
CC https://www.flickr.com/photos/vladimix/
13 
Imágenes decorativas 
• Imágenes decorativas: no aportan información 
– Incluirlas mediante la hoja de estilos 
– Si no es posible, usar texto alternativo vacío (alt=””) y no usar title 
– Ejemplo: imágenes empleadas como viñetas 
Ejemplo 
CC https://www.flickr.com/photos/vladimix/ 
• Pendule / Web Developer (Images → Display Alt Attributes)
14 
Imágenes de texto 
• Las imágenes que transmiten información textual tienen un texto alternativo que 
proporciona la misma información textual. 
alt = “igualdad” alt = “Stay alive and avoid zombies” 
• Pendule / Web Developer (Images → Display Alt Attributes) 
Ejemplo 
CC https://www.flickr.com/photos/daquellamanera/ CC http://en.wikipedia.org/
15 
Imágenes de texto: Ejemplo 
Ejemplo 
Fuente: https://www.bcu.gub.uy/
16 
Imágenes en enlaces 
• Las imágenes que funcionan como enlaces tienen un texto 
alternativo que describe el destino del enlace (de forma conjunta 
con el texto del enlace) y no la imagen. 
alt=“Icono de una casa", 
alt=“Sobre", 
alt=“Impresora" 
alt=“Signo de interrogación"; 
Ejemplo 
alt="Página principal del sitio", 
alt="Contacto“ 
alt="Versión imprimible" 
alt="Ayuda". 
• Pendule / Web Developer (Images → Display Alt Attributes)
17 
Imágenes: resumen 
• Verifica todas las imágenes: 
– Texto alternativo adecuado 
– Imágenes decorativas: desde CSS o con alt 
vacío 
– Imágenes de texto: alt con texto de la imagen 
– Imágenes que son enlaces: destino del enlace 
Ejercicio 
Evalúa imágenes 
de un sitio que 
hayas desarrollado 
Prueba: 
www.bcu.gub.uy
18 
Objetos 
• Los elementos <object> (Flash) tienen una alternativa textual que 
proporcione la misma información y/o funcionalidad (contenido del 
elemento <object>). 
<object classid="java:Press.class" width="500" height="500"> 
<object data="Pressure.mpeg" type="video/mpeg"> 
<object data="Pressure.gif" type="image/gif"> 
As temperature increases, the molecules in the balloon... 
</object> 
</object> 
</object> 
• Colocar siempre una alternativa (puede ser en otra pagina independiente, en la misma o dentro del 
elemento). 
• No todo los objetos Flash transmiten contenido. 
• Usar FlashBlock 
• Habilitar / deshabilitar el plugin flash.
19 
Subtítulos 
• El contenido multimedia que transmite información en la pista de 
audio tiene subtítulos. 
• Evaluación manual
20 
Uso del color 
• El color no se emplea como único medio para transmitir 
información. 
– Observar el uso del color en la página para verificar que se puede 
interpretar toda la información sin depender del color. 
– Verificar la página sin estilos 
• Evaluación manual 
Ejercicio 
Corrija los campos marcados en rojo Bienvenido! 
Para ingresar presione el botón violeta 
CC https://www.flickr.com/photos/rowan__ashlar/
21 
Contrastes de colores 
• El contraste entre el color del texto y el color de fondo (en texto e 
imágenes de texto) es el suficiente según las características del texto 
(normal o grande). 
http://www.paciellogoup.com/resources/contrast-analyser.html 
• Colour Contrast Analyzer, WCAG Contrast Checker, Contrast Analyser Firebug 
Ejercicio 
Ejemplo
22 
Control con el teclado 
• Accesible por teclado 
• Todos los elementos de interacción son accesibles y operables mediante 
teclado. 
• Recorrer toda la página utilizando el tabulador y verificar que todos los 
elementos son accesibles y operables. 
• Sin trampas 
• Sin trampas para el foco del teclado 
• Recorrer la página mediante el tabulador y verificar que no se bloquea la 
tabulación por la página 
• Recorrer la página usando el tabulador 
Ejercicio
23 
Control con el teclado 
• Orden del foco 
• Los elementos de interacción reciben el foco en el orden correcto. 
• Recorrer la página mediante el tabulador y verificar que el orden por los 
elementos de interacción es el adecuado 
• Foco Visible 
• Es visible el indicador del foco del teclado sobre todo elemento de 
interacción. 
• Recorrer toda la página mediante el tabulador y verificar que todos los 
elementos de interacción son visibles y el indicador del foco es visible. 
Ejercicio 
• Recorrer la página usando el tabulador
24 
Sliders 
Permitir parar, pausar y reiniciar
25 
Ampliar 
• Permitir aumentar hasta un 200% el texto 
• sin desarmar la estructura 
• sin scroll horizontal para leer una línea de texto. 
• Probar que no desborde al ampliar utilizando “control” “+”. 
Ejemplo 
Ejercicio
26 
Encabezados 
• Los títulos (y sólo los títulos) de cada sección de contenido se 
identifican como encabezados (<h1> - <h6>) 
• Si existen encabezados, 
– Deben corresponderse con secciones reales. 
– Deben tener un orden lógico 
Ejemplo 
• Web Developer (Outline → Outline Headings) 
• HeadingsMap 
Ejercicio
27 
Listas 
• Los listados de elementos se marcan con los elementos de lista 
correspondientes (<ol>, <ul>, <dl>). 
• Si existen grupos de 3 o más elementos, verificar que se marcan como 
listas. 
• Web Developer (Outline → Outline Custom Elements → Ol, UL, DL, LI, DT) 
Ejercicio
28 
Título de la página 
• La página posee un título (<title>) que identifica su contenido 
Los títulos deben: 
• Identificar el tema 
• Entenderse fuera de contexto 
• Ser cortos 
• Únicos dentro del sitio 
Ejemplo 
Ejercicio
29 
Múltiples vías 
• Existe un mapa web o bien una función de búsqueda en el sitio. 
• Si existe un mapa web, todas las secciones deben estar enlazadas. 
Ejercicio
30 
Epilepsia fotosensitiva 
• Photosensitive Epilepsy Analysis Tool 
– Enlace a la herramienta: http://trace.wisc.edu/peat/
31 
Validación de contraste de sonido 
• Es necesario asegurar que ruidos o música de fondo 
sean lo suficientemente bajos como para comprender 
el sonido de primer plano. 
• Enlace a la herramienta: 
http://www.eramp.com/WCAG_2_audio_contrast_tool_help.htm
32 
Legibilidad 
• Stilus. Es una herramienta en línea gratuita que ayuda a detectar errores 
ortográficos en una página web. 
– Enlace a la herramienta: http://stilus.daedalus.es/stilus-es.php 
• Readability index calculator. Es una herramienta en línea que calcula el 
“nivel de lectura” de un texto 
– Enlace a la herramienta: http://www.standards-schmandards. 
com/exhibits/rix/index.php 
Principalmente: sentido 
común!
33 
Evaluación manual (resumen) 
1. Imágenes 
a. Texto alternativo 
b. Imágenes decorativas 
c. Imágenes de texto 
d. Imágenes que son enlaces 
2. Objetos 
3. Subtítulos 
4. Uso del color 
5. Contraste mínimo 
6. Control con teclado 
1. Accesibles por teclado 
2. Sin trampas para el foco del teclado 
3. Orden del foco. 
4. Foco visible 
7. Sliders 
8. Ampliar 
9. Encabezados 
10.Listas 
11.Título de página 
12.Múltiples vías 
13.Epilepsia fotosensitiva 
14.Validación de contraste de sonido 
15.Legibilidad
34 
Conclusiones
35 
Probar, probar, probar… 
• Navegar con las imágenes deshabilitadas 
– comprobando que tienen texto alternativo y que es posible navegar normalmente. 
• Navegar con el sonido desconectado 
– comprobando que el contenido de audio tiene disponible contenido textual. 
• Modificar el tamaño de las fuentes utilizando las funciones del navegador 
– para comprobar que la página es usable en tamaños de fuente más grandes. 
• Visualizar en escala de grises (o imprimir en blanco y negro la página) 
– para comprobar que es posible comprender el contenido. 
• Navegar sin CSS, 
– comprobando que se mantiene todo el contenido y en un orden que permite 
comprenderlo. 
• Utilizar distintos navegadores, sistemas operativos y pantallas. 
• Con conexiones lentas. 
• Utilizar otros dispositivos como celulares.
36 
Sin monitor 
• Navegar con el monitor apagado utilizando un lector de pantalla 
– NVDA 
– Jaws 
– Orca 
• Simuladores de lectores de pantalla: 
Fangs - the screen reader emulator
37 
Cualquier parecido es mera 
coincidencia… 
• Estas técnicas no son simulaciones de 
discapacidad 
• No se puede recrear la situación exacta
38 
Cumplir las pautas no es lo mismo 
que ser accesible 
Un contenido web... 
• Puede cumplir con todas las pautas 
• Puede pasar todos los test automáticos 
• Puede parecer accesible 
• Sin embargo ... 
• Puede seguir teniendo barreras de acceso 
• Entonces... 
• El objetivo no es cumplir pautas, sino ser accesible 
• Las pautas son herramientas para llegar a la accesibilidad 
• Es necesario realizar pruebas manuales y test de usuarios 
• Información de contacto para que el usuario reporte barreas de 
acceso.
39 
Hagamos nuestra parte por 
una Web para todas y todos
CC http://www.flickr.com/photos/wwworks 40

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Vue, vue router, vuex
Vue, vue router, vuexVue, vue router, vuex
Vue, vue router, vuex
 
Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5
 
Phpy odbc
Phpy odbcPhpy odbc
Phpy odbc
 
PRACTICA 6 ALICE
PRACTICA 6 ALICEPRACTICA 6 ALICE
PRACTICA 6 ALICE
 
Hibernate tutorial
Hibernate tutorialHibernate tutorial
Hibernate tutorial
 
introducción a Docker
introducción a Dockerintroducción a Docker
introducción a Docker
 
.NET and C# Introduction
.NET and C# Introduction.NET and C# Introduction
.NET and C# Introduction
 
APP Inventor - Bloques de control
APP Inventor - Bloques de controlAPP Inventor - Bloques de control
APP Inventor - Bloques de control
 
programacion orientada a objetos
programacion orientada a objetosprogramacion orientada a objetos
programacion orientada a objetos
 
PRACTICA 2 ALICE
PRACTICA 2 ALICEPRACTICA 2 ALICE
PRACTICA 2 ALICE
 
Javascript
JavascriptJavascript
Javascript
 
Lets make a better react form
Lets make a better react formLets make a better react form
Lets make a better react form
 
Xna game studio presentación 01
Xna game studio   presentación 01Xna game studio   presentación 01
Xna game studio presentación 01
 
JavaScript JQUERY AJAX
JavaScript JQUERY AJAXJavaScript JQUERY AJAX
JavaScript JQUERY AJAX
 
Mapa conceptual norey
Mapa  conceptual norey Mapa  conceptual norey
Mapa conceptual norey
 
BD para Dispositivos Moviles - Unidad 3 SMBD Moviles
BD para Dispositivos Moviles - Unidad 3 SMBD MovilesBD para Dispositivos Moviles - Unidad 3 SMBD Moviles
BD para Dispositivos Moviles - Unidad 3 SMBD Moviles
 
Core java
Core javaCore java
Core java
 
Capas de la ingenieria de software
Capas de la ingenieria de softwareCapas de la ingenieria de software
Capas de la ingenieria de software
 
cuestionario de Programación
cuestionario de Programación cuestionario de Programación
cuestionario de Programación
 
Taller: Prueba Unitaria con JUnit en NetBeans
Taller: Prueba Unitaria con JUnit en NetBeansTaller: Prueba Unitaria con JUnit en NetBeans
Taller: Prueba Unitaria con JUnit en NetBeans
 

Destacado

Fichas de producto para dominar el mundo (Online) Quondos World Record
Fichas de producto para dominar el mundo (Online) Quondos World RecordFichas de producto para dominar el mundo (Online) Quondos World Record
Fichas de producto para dominar el mundo (Online) Quondos World Record📊 Isidro Pérez Ramón
 
9 Madurar La Idea
9 Madurar La Idea9 Madurar La Idea
9 Madurar La IdeaOscarTM
 
Taller de marketing online para coaches
Taller de marketing online para coachesTaller de marketing online para coaches
Taller de marketing online para coachesRoberto Pineda
 
Aguilar y guerrero 11
Aguilar y guerrero 11Aguilar y guerrero 11
Aguilar y guerrero 11maleja2008
 
Proyecto De Las Tic Abril 2010
Proyecto De Las Tic Abril 2010Proyecto De Las Tic Abril 2010
Proyecto De Las Tic Abril 2010luzmaroldan
 
Pahuatlan Semana Santa 2010
Pahuatlan Semana Santa 2010Pahuatlan Semana Santa 2010
Pahuatlan Semana Santa 2010guest7ad788
 
12 Madurar Para Reformular
12 Madurar Para Reformular12 Madurar Para Reformular
12 Madurar Para ReformularOscarTM
 

Destacado (20)

Fichas de producto para dominar el mundo (Online) Quondos World Record
Fichas de producto para dominar el mundo (Online) Quondos World RecordFichas de producto para dominar el mundo (Online) Quondos World Record
Fichas de producto para dominar el mundo (Online) Quondos World Record
 
Evomng
EvomngEvomng
Evomng
 
9 Madurar La Idea
9 Madurar La Idea9 Madurar La Idea
9 Madurar La Idea
 
Portafolio4 guadalpe roblescalderón
Portafolio4 guadalpe roblescalderónPortafolio4 guadalpe roblescalderón
Portafolio4 guadalpe roblescalderón
 
Intercambio de experiencias entre profesionales de la salud en entornos virtu...
Intercambio de experiencias entre profesionales de la salud en entornos virtu...Intercambio de experiencias entre profesionales de la salud en entornos virtu...
Intercambio de experiencias entre profesionales de la salud en entornos virtu...
 
Taller de marketing online para coaches
Taller de marketing online para coachesTaller de marketing online para coaches
Taller de marketing online para coaches
 
Oracle
OracleOracle
Oracle
 
Aguilar y guerrero 11
Aguilar y guerrero 11Aguilar y guerrero 11
Aguilar y guerrero 11
 
Clase 9
Clase 9Clase 9
Clase 9
 
Informe1
Informe1Informe1
Informe1
 
Proyecto De Las Tic Abril 2010
Proyecto De Las Tic Abril 2010Proyecto De Las Tic Abril 2010
Proyecto De Las Tic Abril 2010
 
Indicaciones para responsables de formación para la delegación de tareas
Indicaciones para responsables de formación para la delegación de tareasIndicaciones para responsables de formación para la delegación de tareas
Indicaciones para responsables de formación para la delegación de tareas
 
El impacto de la formación continuada: claves y problemáticas
El impacto de la formación continuada: claves y problemáticasEl impacto de la formación continuada: claves y problemáticas
El impacto de la formación continuada: claves y problemáticas
 
Secuencia 11
Secuencia 11Secuencia 11
Secuencia 11
 
Mapa de Procesos de la Comisión de Formación Continuada
Mapa de Procesos de la Comisión de Formación Continuada Mapa de Procesos de la Comisión de Formación Continuada
Mapa de Procesos de la Comisión de Formación Continuada
 
Secuencia 10
Secuencia  10Secuencia  10
Secuencia 10
 
Cc AdolfoPerdomoÁfrica
Cc AdolfoPerdomoÁfricaCc AdolfoPerdomoÁfrica
Cc AdolfoPerdomoÁfrica
 
Pahuatlan Semana Santa 2010
Pahuatlan Semana Santa 2010Pahuatlan Semana Santa 2010
Pahuatlan Semana Santa 2010
 
E learning
E  learningE  learning
E learning
 
12 Madurar Para Reformular
12 Madurar Para Reformular12 Madurar Para Reformular
12 Madurar Para Reformular
 

Similar a Evaluación de accesibilidad web

Curso mayo 2013
Curso mayo 2013Curso mayo 2013
Curso mayo 2013dorenism
 
Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)tayzee
 
Tarea3 Curso recursos audiovisuales
Tarea3 Curso recursos audiovisualesTarea3 Curso recursos audiovisuales
Tarea3 Curso recursos audiovisualesKarolina González
 
Configuración de Recursos en Aulas Virtuales
Configuración de Recursos en Aulas VirtualesConfiguración de Recursos en Aulas Virtuales
Configuración de Recursos en Aulas VirtualesMiguel Angel Soto
 
Blog activ 5
Blog activ 5Blog activ 5
Blog activ 5roalnelo
 
Easiteach ESPAÑOL
Easiteach ESPAÑOLEasiteach ESPAÑOL
Easiteach ESPAÑOLSofiaVR
 
Action script 3_basic
Action script 3_basicAction script 3_basic
Action script 3_basicEdna Rheiner
 
Curs PPT PA
Curs PPT PACurs PPT PA
Curs PPT PAfhcg
 
La accesibilidad de los productos digitales en unidades de información
La accesibilidad de los productos digitales en unidades de informaciónLa accesibilidad de los productos digitales en unidades de información
La accesibilidad de los productos digitales en unidades de informaciónSocialBiblio
 
Para que te encuentren
Para que te encuentrenPara que te encuentren
Para que te encuentrentayzee
 
Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2
Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2
Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2Maria Fabiola Alvarado Pinedo
 

Similar a Evaluación de accesibilidad web (20)

Practica07
Practica07Practica07
Practica07
 
Curso mayo 2013
Curso mayo 2013Curso mayo 2013
Curso mayo 2013
 
Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)
 
Tarea3 Curso recursos audiovisuales
Tarea3 Curso recursos audiovisualesTarea3 Curso recursos audiovisuales
Tarea3 Curso recursos audiovisuales
 
Tarea3 Recursos Audiovisuales
Tarea3 Recursos AudiovisualesTarea3 Recursos Audiovisuales
Tarea3 Recursos Audiovisuales
 
Fichaev3
Fichaev3Fichaev3
Fichaev3
 
Web1
Web1Web1
Web1
 
Cuadernia
CuaderniaCuadernia
Cuadernia
 
Configuración de Recursos en Aulas Virtuales
Configuración de Recursos en Aulas VirtualesConfiguración de Recursos en Aulas Virtuales
Configuración de Recursos en Aulas Virtuales
 
Blog activ 5
Blog activ 5Blog activ 5
Blog activ 5
 
Easiteach ESPAÑOL
Easiteach ESPAÑOLEasiteach ESPAÑOL
Easiteach ESPAÑOL
 
Manual de Dreamweaver
Manual de DreamweaverManual de Dreamweaver
Manual de Dreamweaver
 
Action script 3_basic
Action script 3_basicAction script 3_basic
Action script 3_basic
 
Tema 7 power
Tema 7 powerTema 7 power
Tema 7 power
 
Curs PPT PA
Curs PPT PACurs PPT PA
Curs PPT PA
 
La accesibilidad de los productos digitales en unidades de información
La accesibilidad de los productos digitales en unidades de informaciónLa accesibilidad de los productos digitales en unidades de información
La accesibilidad de los productos digitales en unidades de información
 
Para que te encuentren
Para que te encuentrenPara que te encuentren
Para que te encuentren
 
Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2
Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2
Clase 5 Nuevas Tecnologías en el Contexto Educativo, nivel 2
 
Ejercicio power point
Ejercicio power pointEjercicio power point
Ejercicio power point
 
Cindy
CindyCindy
Cindy
 

Más de tayzee

Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0tayzee
 
1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad webtayzee
 
1.1 Introducción a la accesibilidad web
1.1 Introducción a la accesibilidad web1.1 Introducción a la accesibilidad web
1.1 Introducción a la accesibilidad webtayzee
 
Accesibilidad web por principios - Principio 1: Perceptible
Accesibilidad web por principios - Principio 1: PerceptibleAccesibilidad web por principios - Principio 1: Perceptible
Accesibilidad web por principios - Principio 1: Perceptibletayzee
 
Accesibilidad web por principios - Principio 2: Operable
Accesibilidad web por principios - Principio 2: OperableAccesibilidad web por principios - Principio 2: Operable
Accesibilidad web por principios - Principio 2: Operabletayzee
 
Accesibilidad web por principios - Principio 3: Comprensible
Accesibilidad web por principios - Principio 3: ComprensibleAccesibilidad web por principios - Principio 3: Comprensible
Accesibilidad web por principios - Principio 3: Comprensibletayzee
 
Accesibilidad web por principios - Principio 4: robusto
Accesibilidad web por principios - Principio 4:  robustoAccesibilidad web por principios - Principio 4:  robusto
Accesibilidad web por principios - Principio 4: robustotayzee
 
Imagenes accesibles
Imagenes accesiblesImagenes accesibles
Imagenes accesiblestayzee
 
Documentos accesibles (word, ppt, pdf)
Documentos accesibles  (word, ppt, pdf)Documentos accesibles  (word, ppt, pdf)
Documentos accesibles (word, ppt, pdf)tayzee
 
Creación de contenido accesible
Creación de contenido accesibleCreación de contenido accesible
Creación de contenido accesibletayzee
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad webtayzee
 
Congreso latinoamericano de ciegos tic y diseño universal
Congreso latinoamericano de ciegos  tic y diseño universalCongreso latinoamericano de ciegos  tic y diseño universal
Congreso latinoamericano de ciegos tic y diseño universaltayzee
 
Una introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadoresUna introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadorestayzee
 
7 wcag2.0 para comunicadores - Accesibilidad parte 3
7   wcag2.0 para comunicadores - Accesibilidad parte 37   wcag2.0 para comunicadores - Accesibilidad parte 3
7 wcag2.0 para comunicadores - Accesibilidad parte 3tayzee
 
6 wcag2.0 para comunicadores - semantica
6   wcag2.0 para comunicadores - semantica6   wcag2.0 para comunicadores - semantica
6 wcag2.0 para comunicadores - semanticatayzee
 
4 introducción a wcag2.0
4   introducción a wcag2.04   introducción a wcag2.0
4 introducción a wcag2.0tayzee
 
Beneficios accesibilidad
Beneficios accesibilidadBeneficios accesibilidad
Beneficios accesibilidadtayzee
 
2 diseño universal
2   diseño universal2   diseño universal
2 diseño universaltayzee
 

Más de tayzee (20)

Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0
 
1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web
 
1.1 Introducción a la accesibilidad web
1.1 Introducción a la accesibilidad web1.1 Introducción a la accesibilidad web
1.1 Introducción a la accesibilidad web
 
Accesibilidad web por principios - Principio 1: Perceptible
Accesibilidad web por principios - Principio 1: PerceptibleAccesibilidad web por principios - Principio 1: Perceptible
Accesibilidad web por principios - Principio 1: Perceptible
 
Accesibilidad web por principios - Principio 2: Operable
Accesibilidad web por principios - Principio 2: OperableAccesibilidad web por principios - Principio 2: Operable
Accesibilidad web por principios - Principio 2: Operable
 
Accesibilidad web por principios - Principio 3: Comprensible
Accesibilidad web por principios - Principio 3: ComprensibleAccesibilidad web por principios - Principio 3: Comprensible
Accesibilidad web por principios - Principio 3: Comprensible
 
Accesibilidad web por principios - Principio 4: robusto
Accesibilidad web por principios - Principio 4:  robustoAccesibilidad web por principios - Principio 4:  robusto
Accesibilidad web por principios - Principio 4: robusto
 
Imagenes accesibles
Imagenes accesiblesImagenes accesibles
Imagenes accesibles
 
Documentos accesibles (word, ppt, pdf)
Documentos accesibles  (word, ppt, pdf)Documentos accesibles  (word, ppt, pdf)
Documentos accesibles (word, ppt, pdf)
 
Creación de contenido accesible
Creación de contenido accesibleCreación de contenido accesible
Creación de contenido accesible
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad web
 
HCI
HCIHCI
HCI
 
UX
UXUX
UX
 
Congreso latinoamericano de ciegos tic y diseño universal
Congreso latinoamericano de ciegos  tic y diseño universalCongreso latinoamericano de ciegos  tic y diseño universal
Congreso latinoamericano de ciegos tic y diseño universal
 
Una introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadoresUna introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadores
 
7 wcag2.0 para comunicadores - Accesibilidad parte 3
7   wcag2.0 para comunicadores - Accesibilidad parte 37   wcag2.0 para comunicadores - Accesibilidad parte 3
7 wcag2.0 para comunicadores - Accesibilidad parte 3
 
6 wcag2.0 para comunicadores - semantica
6   wcag2.0 para comunicadores - semantica6   wcag2.0 para comunicadores - semantica
6 wcag2.0 para comunicadores - semantica
 
4 introducción a wcag2.0
4   introducción a wcag2.04   introducción a wcag2.0
4 introducción a wcag2.0
 
Beneficios accesibilidad
Beneficios accesibilidadBeneficios accesibilidad
Beneficios accesibilidad
 
2 diseño universal
2   diseño universal2   diseño universal
2 diseño universal
 

Último

21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdfceeabarcia
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionCarolVigo1
 
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptxTECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptxFranciscoCruz296518
 
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didácticaLa poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didácticaIGNACIO BALLESTER PARDO
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarCa Ut
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxJulioSantin2
 
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdfSIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdfNELLYKATTY
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativaricardoruizaleman
 
Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024yaco173
 
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdfGUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdfNELLYKATTY
 
Los escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialesLos escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialeshanda210618
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre terceroCEIP TIERRA DE PINARES
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCarolVigo1
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa
 
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfAnna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfSaraGabrielaPrezPonc
 
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdfDemetrio Ccesa Rayme
 

Último (20)

21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
 
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptxTECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
 
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didácticaLa poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
La poesía del encarcelamiento de Raúl Zurita en el aula: una propuesta didáctica
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolar
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptx
 
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdfSIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativa
 
Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdfGUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
 
Los escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialesLos escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comerciales
 
Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercero
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacion
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
 
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdf
 
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfAnna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
 
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
 

Evaluación de accesibilidad web

  • 2. 2 Agenda 1. Introducción 2. Evaluación automática 3. Evaluación manual Break CC https://www.flickr.com/photos/otacke/ 4. Evaluación manual 5. Conclusiones
  • 4. 4 Evaluación de Accesibilidad • Objetiva, rápida y económica. • Validar de estándares, pautas y aspectos específicos de la accesibilidad. • Utilizar simuladores de discapacidades y de otras tecnologías. • Evaluación manual utilizando herramientas y un checklist de apoyo. • Limitar o modificar alguna habilidad física o sensorial: • guantes gruesos para limitar la destreza manual • lentes o venda para limitar la visión • tecnologías de apoyo como lectores de pantalla o punteros bucales. • No evalúan la conformidad con las pautas, detectan barreras. Evaluación automática Evaluación manual Técnicas de filtrado Pruebas con usuarios
  • 6. 6 Estándares: (X) HTML • Garantiza portabilidad • Facilita mantenibilidad del código Fuente: http://validator.w3.org/ Objetiva - Rápida - Económica Ejercicio Recomendado en Pauta 4 de WCAG 2.0
  • 7. 7 Estándares: CSS • Garantiza portabilidad • Facilita mantenibilidad del código Fuente: http://jigsaw.w3.org/css-validator/ Recomendado en Pauta 4 de WCAG 2.0 Objetiva - Rápida - Económica Ejercicio
  • 8. 8 Pautas de Accesibilidad • Herramientas evalúan ciertos aspectos de la accesibilidad • Algunos aspectos no son automatizables • No es una evaluación completa • Tener en cuenta: falsos positivos y negativos • Utilizar al menos dos herramientas Objetiva - Rápida - Económica
  • 9. 9 Pautas de Accesibilidad http://www.tawdis.net/ http://examinator.ws/ http://www.totalvalidator.com/
  • 11. 11 Herramientas de apoyo • Pendule (Chrome) • WebDeveloper (Chrome, Firefox) Ejercicio Instala una herramienta
  • 12. 12 Texto alternativo de imágenes • Verificar que los textos alternativos sean adecuados alt = “Mafalda leyendo” alt = “Imagen 344” alt = “Ingrese el texto alternativo aquí” alt = “Mafalda” alt = “Niña leyendo” • Pendule / Web Developer (Images → Display Alt Attributes) Ejemplo CC https://www.flickr.com/photos/vladimix/
  • 13. 13 Imágenes decorativas • Imágenes decorativas: no aportan información – Incluirlas mediante la hoja de estilos – Si no es posible, usar texto alternativo vacío (alt=””) y no usar title – Ejemplo: imágenes empleadas como viñetas Ejemplo CC https://www.flickr.com/photos/vladimix/ • Pendule / Web Developer (Images → Display Alt Attributes)
  • 14. 14 Imágenes de texto • Las imágenes que transmiten información textual tienen un texto alternativo que proporciona la misma información textual. alt = “igualdad” alt = “Stay alive and avoid zombies” • Pendule / Web Developer (Images → Display Alt Attributes) Ejemplo CC https://www.flickr.com/photos/daquellamanera/ CC http://en.wikipedia.org/
  • 15. 15 Imágenes de texto: Ejemplo Ejemplo Fuente: https://www.bcu.gub.uy/
  • 16. 16 Imágenes en enlaces • Las imágenes que funcionan como enlaces tienen un texto alternativo que describe el destino del enlace (de forma conjunta con el texto del enlace) y no la imagen. alt=“Icono de una casa", alt=“Sobre", alt=“Impresora" alt=“Signo de interrogación"; Ejemplo alt="Página principal del sitio", alt="Contacto“ alt="Versión imprimible" alt="Ayuda". • Pendule / Web Developer (Images → Display Alt Attributes)
  • 17. 17 Imágenes: resumen • Verifica todas las imágenes: – Texto alternativo adecuado – Imágenes decorativas: desde CSS o con alt vacío – Imágenes de texto: alt con texto de la imagen – Imágenes que son enlaces: destino del enlace Ejercicio Evalúa imágenes de un sitio que hayas desarrollado Prueba: www.bcu.gub.uy
  • 18. 18 Objetos • Los elementos <object> (Flash) tienen una alternativa textual que proporcione la misma información y/o funcionalidad (contenido del elemento <object>). <object classid="java:Press.class" width="500" height="500"> <object data="Pressure.mpeg" type="video/mpeg"> <object data="Pressure.gif" type="image/gif"> As temperature increases, the molecules in the balloon... </object> </object> </object> • Colocar siempre una alternativa (puede ser en otra pagina independiente, en la misma o dentro del elemento). • No todo los objetos Flash transmiten contenido. • Usar FlashBlock • Habilitar / deshabilitar el plugin flash.
  • 19. 19 Subtítulos • El contenido multimedia que transmite información en la pista de audio tiene subtítulos. • Evaluación manual
  • 20. 20 Uso del color • El color no se emplea como único medio para transmitir información. – Observar el uso del color en la página para verificar que se puede interpretar toda la información sin depender del color. – Verificar la página sin estilos • Evaluación manual Ejercicio Corrija los campos marcados en rojo Bienvenido! Para ingresar presione el botón violeta CC https://www.flickr.com/photos/rowan__ashlar/
  • 21. 21 Contrastes de colores • El contraste entre el color del texto y el color de fondo (en texto e imágenes de texto) es el suficiente según las características del texto (normal o grande). http://www.paciellogoup.com/resources/contrast-analyser.html • Colour Contrast Analyzer, WCAG Contrast Checker, Contrast Analyser Firebug Ejercicio Ejemplo
  • 22. 22 Control con el teclado • Accesible por teclado • Todos los elementos de interacción son accesibles y operables mediante teclado. • Recorrer toda la página utilizando el tabulador y verificar que todos los elementos son accesibles y operables. • Sin trampas • Sin trampas para el foco del teclado • Recorrer la página mediante el tabulador y verificar que no se bloquea la tabulación por la página • Recorrer la página usando el tabulador Ejercicio
  • 23. 23 Control con el teclado • Orden del foco • Los elementos de interacción reciben el foco en el orden correcto. • Recorrer la página mediante el tabulador y verificar que el orden por los elementos de interacción es el adecuado • Foco Visible • Es visible el indicador del foco del teclado sobre todo elemento de interacción. • Recorrer toda la página mediante el tabulador y verificar que todos los elementos de interacción son visibles y el indicador del foco es visible. Ejercicio • Recorrer la página usando el tabulador
  • 24. 24 Sliders Permitir parar, pausar y reiniciar
  • 25. 25 Ampliar • Permitir aumentar hasta un 200% el texto • sin desarmar la estructura • sin scroll horizontal para leer una línea de texto. • Probar que no desborde al ampliar utilizando “control” “+”. Ejemplo Ejercicio
  • 26. 26 Encabezados • Los títulos (y sólo los títulos) de cada sección de contenido se identifican como encabezados (<h1> - <h6>) • Si existen encabezados, – Deben corresponderse con secciones reales. – Deben tener un orden lógico Ejemplo • Web Developer (Outline → Outline Headings) • HeadingsMap Ejercicio
  • 27. 27 Listas • Los listados de elementos se marcan con los elementos de lista correspondientes (<ol>, <ul>, <dl>). • Si existen grupos de 3 o más elementos, verificar que se marcan como listas. • Web Developer (Outline → Outline Custom Elements → Ol, UL, DL, LI, DT) Ejercicio
  • 28. 28 Título de la página • La página posee un título (<title>) que identifica su contenido Los títulos deben: • Identificar el tema • Entenderse fuera de contexto • Ser cortos • Únicos dentro del sitio Ejemplo Ejercicio
  • 29. 29 Múltiples vías • Existe un mapa web o bien una función de búsqueda en el sitio. • Si existe un mapa web, todas las secciones deben estar enlazadas. Ejercicio
  • 30. 30 Epilepsia fotosensitiva • Photosensitive Epilepsy Analysis Tool – Enlace a la herramienta: http://trace.wisc.edu/peat/
  • 31. 31 Validación de contraste de sonido • Es necesario asegurar que ruidos o música de fondo sean lo suficientemente bajos como para comprender el sonido de primer plano. • Enlace a la herramienta: http://www.eramp.com/WCAG_2_audio_contrast_tool_help.htm
  • 32. 32 Legibilidad • Stilus. Es una herramienta en línea gratuita que ayuda a detectar errores ortográficos en una página web. – Enlace a la herramienta: http://stilus.daedalus.es/stilus-es.php • Readability index calculator. Es una herramienta en línea que calcula el “nivel de lectura” de un texto – Enlace a la herramienta: http://www.standards-schmandards. com/exhibits/rix/index.php Principalmente: sentido común!
  • 33. 33 Evaluación manual (resumen) 1. Imágenes a. Texto alternativo b. Imágenes decorativas c. Imágenes de texto d. Imágenes que son enlaces 2. Objetos 3. Subtítulos 4. Uso del color 5. Contraste mínimo 6. Control con teclado 1. Accesibles por teclado 2. Sin trampas para el foco del teclado 3. Orden del foco. 4. Foco visible 7. Sliders 8. Ampliar 9. Encabezados 10.Listas 11.Título de página 12.Múltiples vías 13.Epilepsia fotosensitiva 14.Validación de contraste de sonido 15.Legibilidad
  • 35. 35 Probar, probar, probar… • Navegar con las imágenes deshabilitadas – comprobando que tienen texto alternativo y que es posible navegar normalmente. • Navegar con el sonido desconectado – comprobando que el contenido de audio tiene disponible contenido textual. • Modificar el tamaño de las fuentes utilizando las funciones del navegador – para comprobar que la página es usable en tamaños de fuente más grandes. • Visualizar en escala de grises (o imprimir en blanco y negro la página) – para comprobar que es posible comprender el contenido. • Navegar sin CSS, – comprobando que se mantiene todo el contenido y en un orden que permite comprenderlo. • Utilizar distintos navegadores, sistemas operativos y pantallas. • Con conexiones lentas. • Utilizar otros dispositivos como celulares.
  • 36. 36 Sin monitor • Navegar con el monitor apagado utilizando un lector de pantalla – NVDA – Jaws – Orca • Simuladores de lectores de pantalla: Fangs - the screen reader emulator
  • 37. 37 Cualquier parecido es mera coincidencia… • Estas técnicas no son simulaciones de discapacidad • No se puede recrear la situación exacta
  • 38. 38 Cumplir las pautas no es lo mismo que ser accesible Un contenido web... • Puede cumplir con todas las pautas • Puede pasar todos los test automáticos • Puede parecer accesible • Sin embargo ... • Puede seguir teniendo barreras de acceso • Entonces... • El objetivo no es cumplir pautas, sino ser accesible • Las pautas son herramientas para llegar a la accesibilidad • Es necesario realizar pruebas manuales y test de usuarios • Información de contacto para que el usuario reporte barreas de acceso.
  • 39. 39 Hagamos nuestra parte por una Web para todas y todos

Notas del editor

  1. La validación de estándares (X)HTML es recomendada en la Pauta 4.1 de accesibilidad de la WCAG2.0. Es más fácil realizar correcciones y modificaciones a un código bien formado y prolijo, por lo que se recomienda comenzar con la validación de HTML. Además, validar el código de las páginas garantiza la portabilidad a distintos dispositivos y mejora la indexación en buscadores. W3C dispone del servicio en línea gratuito de validación
  2. La validación de estándares (X)HTML es recomendada en la Pauta 4.1 de accesibilidad de la WCAG2.0. Es más fácil realizar correcciones y modificaciones a un código bien formado y prolijo, por lo que se recomienda comenzar con la validación de HTML. Además, validar el código de las páginas garantiza la portabilidad a distintos dispositivos y mejora la indexación en buscadores. W3C dispone del servicio en línea gratuito de validación
  3. Existen herramientas que ayudan a evaluar ciertos aspectos de la accesibilidad. Los validadores automáticos de accesibilidad revisan puntos conflictivos con la accesibilidad según pautas y estándares, y presentan un informe con los resultados. No es posible realizar una evaluación completa utilizando solamente herramientas automáticas, ya que algunos aspectos de la accesibilidad requieren una evaluación manual humana. Por otro lado, el evaluador se puede encontrar con falsos positivos y falsos negativos. La herramienta puede indicar que una página no contiene barreras y en una evaluación manual se detectan, o al contrario, la herramienta detecta algun problema que al revisar un experto encuentra que no existe. Se sugiere realizar la evaluación automática con al menos dos herramientas para cubrir los problemas detectables automáticamente.
  4. Existen herramientas que ayudan a evaluar ciertos aspectos de la accesibilidad. Los validadores automáticos de accesibilidad revisan puntos conflictivos con la accesibilidad según pautas y estándares, y presentan un informe con los resultados. Brindan además información relacionada que ayudará a los técnicos a comprender el problema y buscar soluciones. No es posible realizar una evaluación completa utilizando solamente herramientas automáticas. Por otro lado, el evaluador se puede encontrar con falsos positivos y falsos negativos. La herramienta puede indicar que una página no contiene barreras y en una evaluación manual se detectan, o al contrario, la herramienta detecta algun problema que al revisar un experto encuentra que no existe. Se sugiere realizar la evaluación automática con al menos dos herramientas para cubrir los problemas detectables automáticamente. Estas son algunas de las herramientas que se pueden utilizar para este tipo de evaluaciones de Accesibilidad: TAW, Test de Accesibilidad Web y examinator son herramientas en línea gratuitas de evaluacion de pautas WCAG 2.0. La ventaja de Total validator es que puedes descargarla en tu pc para evaluar prototipos que no tienen una dirección pública para ser accedidas desde Internet.