Accesibilidad Web (Una introducción de 3 horas)

Desarrollo de un Portal
Accesibilidad
22 de octubre, 2010
Silvia Da Rosa
silvia.darosa@agesic.gub.uy

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

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.

¿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

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.

Diseño Universal – Diseño para todos
7

Accesibilidad Universal
Opción 1 Versus Opción 2

¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora,
Cognitiva
• Edad avanzada
• Limitaciones tecnológicas:
Antigua, nueva. Ancho de
banda. Plugins, navegador.

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.

De la
Computadora
Del Navegador Del Contenido
Componentes de la Accesibilidad Web
AutoresUsuarios

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

Documentos complementarios
WCAG 2.0
Pautas de accesibilidad de
contenido web
Como Cumplir Técnicas Comprender
How to meet
WCAG2.0
Techniques for
WCAG 2.0
Understanding
WCAG2.0
Ejemplo 1
Pautas online

¿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/

¿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

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

¿Cómo se ve un sitio sin imágenes?

¿Cómo se ve un sitio sin imágenes?
Ejercicio 3
1. Abrir el navegador Mozilla Firefox
Si 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

¿Qué descripción le pondría a cada
imagen?
Ítem 1
Ítem 2
Ejercicio 4
1 2 3
4 5 6

Una posible solución…
Ítem 1
Ítem 2
Ejercicio 4
1 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 = “”

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:

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:

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

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

1.3 Adaptable
Que nos marcan?
Mapa conceptual?
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…
Separar contenido y estructura de presentación, y usar elementos
semánticos para estructurar el contenido.
Ejemplo 3
www.zengarden.com

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!

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
Pascualina
Ingredientes
•Masa
•Acelga
Preparación
1. Poner la masa en la asadera.
2. Poner la acelga.
3. Llevar al horno.
Tarta de zapallitos
Ingredientes
Nuestro contenido En HTML

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!

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>

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>

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

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.

Contraste suficiente
Debe existir un contraste suficiente entre color de fondo y de letra.

2/09/1
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 4
Filtro de color

2/09/1
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.

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.
Ejemplo 5
www.ursea.gub.uy
(Firefox)

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:
Ejemplo 6
www.opp.gub.uy
www.universidad.edu.uy

Tiempo suficiente
• Permitir modificar el tiempo de sesión.
• Ante una interrupción, continuar sin pérdida de datos.

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/

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

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

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 8
www.cmat.edu.uy

3.1 Legible
Simplificar el contenido de texto.
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 partes
xml: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

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.
Ejemplo 9
http://www.ursea.gub.uy/
(IExplorer)
Práctica CTIC

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

4.1 Compatible
Que nos marcan?
Mapa conceptual?
clase?
Maximizar la compatibilidad con otros productos, incluyendo tecnología
de apoyo.

Validar estándares
Que nos marcan?
Mapa conceptual?
clase?
• Validador HTML [http://validator.w3.org/]
• Validador CSS [http://jigsaw.w3.org/css-validator/]

¿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 manual
Herramientas de
apoyo
(simuladores)
Ejemplo 10
http://www.snap.gub.uy/
http://www.mrree.gub.uy/
http://www.boe.es/

Cumplir las pautas no es lo mismo que ser
accesible
Un 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.

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

Muchas gracias
www.agesic.gub.uy

Accesibilidad Web (Una introducción de 3 horas)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Accesibilidad Web (Una introducción de 3 horas)

Similar a Accesibilidad Web (Una introducción de 3 horas) (20)

Más de tayzee

Más de tayzee (20)

Último

Último (20)

Accesibilidad Web (Una introducción de 3 horas)