accesibilidad web (una introducción de 3 horas)
DESCRIPTION
Clase de Accesibilidad como parte del Taller de Desarrollo de Portales realizado por AGESIC en 2010. Original publicado en: www.agesic.gub.uy http://www.agesic.gub.uy/innovaportal/file/1189/1/Clase2_Accesibilidad.pdfTRANSCRIPT
![Page 1: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/1.jpg)
Desarrollo de un Portal
Accesibilidad
22 de octubre, 2010
Silvia Da Rosa
![Page 2: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/2.jpg)
No todos navegamos igual
Si quisieras mirar un video de
Mafalda en el Aeropuerto…
¿Qué palabras se dicen durante
los primeros 25 segundos?
¿Cuántas veces llama Mafalda
por su nombre a su mamá?
Ejercicio 1
![Page 3: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/3.jpg)
No todos navegamos igual
Ejercicio 1¿Qué solución plantearías?
• Que el usuario lleve siempre
audífonos.
• Que subtitulen los videos.
• Que el usuario se compre un
equipo con sonido más
potente.
• Que el usuario no utilice
Internet en espacios públicos.
![Page 4: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/4.jpg)
No todos navegamos igual
¿Y si no puedes usar el mouse y/o la mano derecha
(o izquierda) …
• Por un accidente
• Porque tener una mano ocupada
• Porque se rompió el mouse
…y necesitaras el teléfono del Departamento de RRHH de la AIN?
Ejercicio 2
http://www.ain.gub.uy/nosotros/nosotros_edificio.html
![Page 5: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/5.jpg)
No todos navegamos igual
Ejercicio 2
¿Qué solución plantearías?
• Que tengan siempre un mouse de repuesto.
• Hacer que las funciones sean accesibles por teclado.
• Aconsejar a los usuarios que practiquen usar el mouse con la
mano izquierda para casos de emergencia.
• Que no tomen mate mientras trabajan.
![Page 6: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/6.jpg)
Diseño para
algunos
6
![Page 7: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/7.jpg)
Diseño Universal – Diseño para todos
7
![Page 8: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/8.jpg)
Accesibilidad Universal
Opción 1 Versus Opción 2
![Page 9: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/9.jpg)
¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora,
Cognitiva
• Edad avanzada
• Limitaciones tecnológicas:
Antigua, nueva. Ancho de
banda. Plugins, navegador.
![Page 10: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/10.jpg)
Accesibilidad Web
La posibilidad que recursos web
(información y servicios) puedan ser
utilizados de forma satisfactoria por el
mayor número posible de personas,
independientemente de las limitaciones
personales o de limitaciones derivadas de
su entorno, sean éstas de carácter físico,
mental, educativo, familiar o socio-
económico.
![Page 11: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/11.jpg)
Tecnología de apoyo
![Page 12: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/12.jpg)
De la Computadora
Del Navegador Del Contenido
Componentes de la Accesibilidad Web
AutoresUsuarios
![Page 13: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/13.jpg)
¿Por donde empezar?
![Page 14: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/14.jpg)
Principios, pautas y criterios de
conformidad de WCAG 2.0
A• Debe cumplir
AA• Debería cumplir
AAA• Si cumple es mucho mejor.
Niveles de Accesibilidad
4
Principios
12
Pautas
61
Criterios de
conformidad
Conceptos
fundamentales
Objetivos
Básicos
Requisitos
concretos a cumplir,
testeables
• Perceptible
• Operable
• Comprensible
• Robusto
![Page 15: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/15.jpg)
Documentos complementarios
WCAG 2.0Pautas de accesibilidad de
contenido web
Como Cumplir Técnicas Comprender
How to meet
WCAG2.0
Techniques for
WCAG 2.0
Understanding
WCAG2.0
Ejemplo 1Pautas online
![Page 16: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/16.jpg)
¿Cómo profundizo después de esta clase?
• Guías Agesic:http://www.agesic.gub.uy/
• Pautas WCAG 2.0:http://www.codexexempla.org/traducciones/pautas-accesibilidad-
contenido-web-2.0.htm
• Mapa conceptual:http://www.triplea.es/blog/wp-content/uploads/2009/04/mapa-wcag2.pdf
• Olga carreras:http://olgacarreras.blogspot.com/
![Page 17: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/17.jpg)
¿En qué momento del proyecto se aplican?
En todo momento:
• Planificación
• Diseño
• Desarrollo
• Mantenimiento
Por todos los integrantes del equipo
• Diseño
• Tecnología
• Editores
![Page 18: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/18.jpg)
1.1 Alternativas textuales
Brindar alternativas textuales para imágenes.
Perceptible | Operable | Distinguible | Robusto
alt = “Flor de Edelweiss …” El texto alternativo debe
presentar contenido y
función, muy raramente es
una descripción.
Descripciones
alternativas
cortas
![Page 19: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/19.jpg)
¿Cómo se ve un sitio sin imágenes?
![Page 20: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/20.jpg)
¿Cómo se ve un sitio sin imágenes?
![Page 21: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/21.jpg)
¿Cómo se ve un sitio sin imágenes?
Ejercicio 3
1. Abrir el navegador Mozilla FirefoxSi no tiene el navegador instalado, utilice el archivo de
instalación que se encuentra en el material de clase.
2. Instalar complemento:
Web Developer.
https://addons.mozilla.org/es-ES/firefox/addon/60/
3. Entrar al sitio de su organismo
4. Visualizarlo sin imágenes
![Page 22: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/22.jpg)
¿Qué descripción le pondría a cada
imagen?
Ítem 1
Ítem 2
Ejercicio 41 2 3
4 5 6
![Page 23: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/23.jpg)
Una posible solución…
Ítem 1
Ítem 2
Ejercicio 41 2 3
4 5 6
alt = “¡Importante!”
alt = “ Gatito”
alt = “En formato pdf”
alt = “3 años de
garantía”
alt= "Introduzca las
letras de la imagen"alt = “”
![Page 24: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/24.jpg)
Si la imagen necesita más descripción...
<img src="grafico1.gif“
alt = "Variación porcentual en
el incremento de
colombianos y ecuatorianos
en España. 1998 - 2007.“
longdesc="grafico1.html" />
Ejemplo:
![Page 25: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/25.jpg)
Controles de formularios
<label for="nombre">nombre: </label>
<input type="text" id="nombre"
name="nombre" />
<input name="busqueda" type="text"
title="Término para la búsqueda" />
input type="submit" value="Buscar" />
Ejemplo:
![Page 26: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/26.jpg)
1.2 Medios Tempodependientes
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
Proveer alternativas para multimedia
Cinco medidas de accesibilidad diferentes:
• Transcripción textual: descripciones tanto de la parte visual
como de la parte auditiva
• Subtítulos
• Audiodescripción
• Audiodescripción ampliada
• Interpretación en lengua de señas
Perceptible | Operable | Distinguible | Robusto
![Page 27: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/27.jpg)
Transcripción textual
[Sonido de calle]
[Entra música]
En la calle casi todas las personas van en silla de ruedas. Una
chica que no usa silla de ruedas entra en un banco.
La chica dice: Buenos días, querría abrir una cuenta.
El empleado le habla en lengua de signos. La chica sonríe
desconcertada, porque no entiende nada.
Vuelve a verse la calle y está lloviendo. Varias personas en sillas
de rueda suben y bajan por ella sin problemas, un hombre que
camina, se escurre por la lluvia.
[ … ]
Ejemplo 2 Video
![Page 28: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/28.jpg)
1.3 Adaptable
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
El contenido debe poder
presentarse de diferentes
formas sin perder información
o estructura:
• Audio mediante un
lector de pantalla
• Braille por medio de
una línea braille
• Sin hoja de estilos
• Sólo texto…
Perceptible | Operable | Distinguible | Robusto
Separar contenido y estructura de presentación, y usar elementos
semánticos para estructurar el contenido.
Ejemplo 3 www.zengarden.com
![Page 29: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/29.jpg)
Marcar estructura con elementos
semánticos
• Usar <h1> - <h6> para encabezados.
• Marcar los párrafos con <p>
• Usar <ul>, <ol> y <dl> para las listas
• Marcar los encabezados en las tablas de datos (<th>) y
relacionarlos con las celdas de datos (<td>)
Y no usarlos solamente por su presentación visual!
![Page 30: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/30.jpg)
Ejemplo de elementos semánticos
<h1>Recetas de cocina</h1>
<h2>Pascualina</h2>
<h3>Ingredientes</h3>
<ul>
<li>Masa</li>
<li>Acelga</li>
</ul>
<h3>Preparación</h3>
<ol>
<li>Poner la masa en la asadera.</li>
<li>Poner la acelga.</li>
<li>Llevar al horno.</li>
</ol>
<h2>Tarta de zapallitos</h2>
<h3>Ingredientes</h3>
Recetas de cocina
PascualinaIngredientes
•Masa
•Acelga
Preparación
1. Poner la masa en la asadera.
2. Poner la acelga.
3. Llevar al horno.
Tarta de zapallitosIngredientes
Nuestro contenido En HTML
![Page 31: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/31.jpg)
Marcar texto especial con elementos
semánticos
• Usar <em> y <strong> para el texto enfatizado
• Usar <q> para las citas cortas en línea (frases dentro de otro
párrafo)
• Usar <blockquote> para las citas largas en bloques de texto
(párrafos).
• Usar <cite> para identificar las referencias
• Usar <abbr> para abreviaturas y <acronym> para acrónimos
• Usar <a> para enlaces
Y no usarlos solamente por su presentación visual!
![Page 32: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/32.jpg)
Ejemplos para marcar texto especial
La accesibilidad web beneficia además a las personas
sin discapacidad.
Ejemplo 1
Ejemplo 2
En su discurso, Tabárez recordó que el éxito “no son sólo los
resultados sino las dificultades que se pasan para alcanzarlo”.
<p>
La accesibilidad web <strong>beneficia</strong> además a las personas
<em>sin</em> discapacidad.
</p>
<p>
En su discurso, Tabárez recordó que el éxito <q>no son sólo los
resultados sino las dificultades que se pasan para alcanzarlo</q>.
</p>
![Page 33: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/33.jpg)
Ejemplos para marcar texto especial
Ejemplo 3
Extracto del libro El Quijote de Miguel de Cervantes:
En un lugar de la mancha, de cuyo nombre no quiero acordarme…
<p>
Extracto del libro <cite>El Quijote</cite> de Miguel de Cervantes:
</p>
<blockquote cite="http://www.elquijote.com/cap1">
<p>
En un lugar de la mancha, de cuyo nombre no quiero acordarme...
</p>
</blockquote>
![Page 34: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/34.jpg)
1.4 Distinguible
Hacer que sea más fácil para el usuario ver y escuchar el contenido.
• No usar el color para transmitir información.
• Contraste suficiente entre color de fondo y de letra.
• Tamaño del texto configurable por el usuario
• Formato del texto para mejorar su legibilidad
Perceptible | Operable | Distinguible | Robusto
![Page 35: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/35.jpg)
Por ejemplo:
• “Los campos marcados en rojo son
obligatorios.”
• “Por favor revisa los campos
obligatorios marcados en rojo.”
Cual es un enlace?
Uso del color
No usar el color como único medio de transmitir información.
![Page 36: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/36.jpg)
Contraste suficiente
Debe existir un contraste suficiente entre color de fondo y de letra.
![Page 37: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/37.jpg)
2/09/10
Verificar Contraste
• Simular discapacidades visuales:
http://colorfilter.wickline.org/
Ejemplo:
http://www.distancia.edu.uy/
• Herramienta para verificar contraste:
http://www.paciellogoup.com/resources/contrast-
analyser.html
Ejemplo 4Filtro de color
![Page 38: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/38.jpg)
2/09/10
Formato y tamaño de los textos
• Utilizar tamaños relativos (em, %)
Permitir aumentar hasta un 200% el texto
sin desarmar la estructura
sin scroll horizontal para leer una línea de texto.
• El texto no debe estar justificado.
• Colocar interlineado de, al menos, un espacio y
medio.
![Page 39: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/39.jpg)
2.1 Accesible por teclado
• Usar enlaces y controles de formulario estándar de HTML.
• Usar manejadores de evento que puedan lanzarse
mediante teclado.
onmousedown con onkeydown
onmouseup con onkeyup
onmouseover con onfocus
onmouseout con onblur
• Usar onclick.
• Comprobar que no existen trampas para el foco del teclado.
Todas las funcionalidades deben ser accesibles por teclado.
Perceptible | Operable | Distinguible | Robusto
Ejemplo 5www.ursea.gub.uy
(Firefox)
![Page 40: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/40.jpg)
2.2 Tiempo suficiente
• Responder físicamente
• Mover el ratón, usar el teclado, etc.
• Leer el contenido.
• Interactuar y rellenar los formularios.
• Localizar elementos en la página.
• Etc.
Dar suficiente tiempo para leer y usar el contenido para:
Perceptible | Operable | Distinguible | Robusto
Ejemplo 6www.opp.gub.uy
www.universidad.edu.uy
![Page 41: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/41.jpg)
Tiempo suficiente
• Permitir modificar el tiempo de sesión.
• Ante una interrupción, continuar sin pérdida de datos.
![Page 42: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/42.jpg)
2.3 Convulsiones
Personas con epilepsia fotosensitiva pueden sufrir ataques por cambios
rápidos de luz a oscuridad, que superen cierta frecuencia y
tamaño.después de esta clase?
En 1997 en Japón, un capítulo de
una serie de dibujos animados
produjo ataques epilépticos a gran
número de personas.
Herramienta para analizar si un
contenido presenta riesgos.
http://trace.wisc.edu/peat/
Perceptible | Operable | Distinguible | Robusto
![Page 43: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/43.jpg)
2.4 Navegable
Ayudar al usuario a navegar, encontrar el contenido y determinar dónde
está.
Foco visible
Usar encabezados. Enlace al comienzo que vaya al
área principal
![Page 44: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/44.jpg)
Ayudar al usuario a encontrar el contenido
Nombrar los enlaces de manera que identifiquen su propósito.
Incluir mapa del sitio y enlaces a páginas relacionadas.
Incluir búsqueda
Click aquí
Leer más
![Page 45: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/45.jpg)
Ayudar al usuario a saber dónde está
Titular las páginas
Indicar situación actual dentro de las barras de navegación
Miga de pan
Ejemplo 8www.cmat.edu.uy
![Page 46: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/46.jpg)
3.1 Legible
Simplificar el contenido de texto.
Perceptible | Operable | Distinguible | Robusto
Idioma de la página: <html xmlns="http://www.w3.org/1999/xhtml"
lang="es" xml:lang="es">
Palabras "inusuales“Enlace a la definición
Idioma de las partesxml:lang="en“
Abreviaturas <acronym title="World Wide Web Consortium"
xml:lang="en">W3C</acronym>
Nivel de lectura de
educación secundaria
Ilustraciones que ayuden a explicar
Resumen
texto fácil de leer: texto corto, párrafos cortos
![Page 47: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/47.jpg)
3.2 Predecible
• Al recibir el foco no iniciar ningún cambio en el contexto
• La navegación debe ser coherente
• La identificación debe ser coherente en etiquetas, nombres y
alternativas textuales
• Evitar abrir nuevas ventanas.
En caso de hacerlo: Avisar apertura de páginas o que sea opcional
Que las páginas operen de una manera predecible.
Perceptible | Operable | Distinguible | Robusto
Ejemplo 9http://www.ursea.gub.uy/
(IExplorer)
Práctica CTIC
![Page 48: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/48.jpg)
3.3 Entrada de datos asistida
Ayuda a evitar y corregir errores.
• Identificar errores
• Prevención de errores
• Proporcionar ayuda contextual
• Permitir confirmar datos, permitir
deshacer
Perceptible | Operable | Distinguible | Robusto
![Page 49: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/49.jpg)
4.1 Compatible
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
Maximizar la compatibilidad con otros productos, incluyendo tecnología
de apoyo.
Perceptible | Operable | Distinguible | Robusto
![Page 50: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/50.jpg)
Validar estándares
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
• Validador HTML [http://validator.w3.org/]
• Validador CSS [http://jigsaw.w3.org/css-validator/]
![Page 51: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/51.jpg)
¿Cómo evaluar la accesibilidad?
Evaluación automática
•TAW para WCAG2.0: http://www.tawdis.net
• eXaminator: http://examinator.ws
Simulador de lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
Evaluación automática
Evaluación manualHerramientas de
apoyo (simuladores)
Ejemplo 10http://www.snap.gub.uy/
http://www.mrree.gub.uy/
http://www.boe.es/
![Page 52: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/52.jpg)
Cumplir las pautas no es lo mismo que ser
accesibleUn portal 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
• Información de contacto disponible para que el usuario reporte
barreas de acceso.
![Page 53: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/53.jpg)
Navegar con lector de pantalla
1. Activar NVDA
2. Navegar usando NVDA
• http://www.sanidadpolicial.gub.uy/
• http://www.fundacionctic.es/
3. Ahora escuchar el sitio de sus organismos
Ejercicio 4
![Page 54: Accesibilidad Web (Una introducción de 3 horas)](https://reader034.vdocuments.mx/reader034/viewer/2022051322/546db734b4af9f892c8b5545/html5/thumbnails/54.jpg)
Muchas gracias
www.agesic.gub.uy