Accesibilidad Web (Una introducción de 3 horas)

Desarrollo de un Portal

Accesibilidad

22 de octubre, 2010

Silvia Da Rosa

[email protected]

mailto:[email protected]

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 para

algunos

6

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.

Tecnología de apoyo

De la Computadora

Del Navegador Del Contenido

Componentes de la Accesibilidad Web

AutoresUsuarios

¿Por donde empezar?

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.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

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

http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm

http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm

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

¿Qué descripción le pondría a cada

imagen?

Ítem 1

Ítem 2

Ejercicio 41 2 3

4 5 6

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 = “”

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

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

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

http://colorfilter.wickline.org/

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.

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 5www.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 6www.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 8www.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 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

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 9http://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 manualHerramientas de

apoyo (simuladores)

Ejemplo 10http://www.snap.gub.uy/

http://www.mrree.gub.uy/

http://www.boe.es/

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.

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)

Education

Transcript of Accesibilidad Web (Una introducción de 3 horas)