1.
Componentes
de la
accesibilidad web

2.
Agenda
• Sesión práctica
• Introducción a los componentes de la
accesibilidad web
• Introducción a WCAG 2.0

3.
¿Cómo usan la web las personas
ciegas?
questions by Gregor Črešnar from the Noun Project

4.
Intentémoslo…
• Formar grupos de a 2
– Grupo 1: Sale del salón y se le vendarán los ojos
– Grupo 2:
• Descargar NVDA (http://www.nvaccess.org/download/)
• Ingresar al sitio www.movie.com.uy
• Ir a buscar al compañero
• Navegar usando el tabulador y las flechas para
obtener la siguiente información:
– Quiero mirar una película mañana luego de las 21 hrs
– Quiero saber la hora, el precio y si puedo hacer la
compra en línea

5.
Componentes esenciales de la
accesibilidad:
mucho más que desarrolladores web

6.
AutoresUsuarios
Componentes de la accesibilidad web
De la computadora
• Tecnologías de
apoyo
Del navegador
• Navegadores,
browsers
Del contenido
• La Web

7.
Contenido web
Fuente: www.w3.org/WAI/presentations/components
Información en una página o
aplicación web
● Texto
● Imágenes
● Formularios
● Sonidos..

8.
Los usuarios usan
● Navegadores
● Reproductores multimedia
● Tecnología de asistencia
para obtener e interactuar con
el contenido web
Fuente: www.w3.org/WAI/presentations/components
Obteniendo contenido web

9.
Creando contenido web
Fuente: www.w3.org/WAI/presentations/components
Desarrolladores web usan
herramientas de creación y
herramientas de evaluación
para crear contenido web

10.
Componentes de la accesibilidad web
Fuente: www.w3.org/WAI/presentations/components

11.
<img alt="Web Accessibility Initiative logo“ ... />
Ejemplo
● El contenido web debe incluir el texto alternativo en el código de la página web
● Los agentes de usuario (navegadores) deben disponibilizar el texto
● La tecnología de asistencia provee el texto al usuario: lectores de pantalla leen el
texto alternativo
● Las herramientas de creación deben permitir y alentar a que los desarrolladores y
editores lo incluyan
● Las herramientas de evaluación deben verificar que existe y es equivalente a la
imagen
Fuente: www.w3.org/WAI/presentations/components

12.
W3C WAI Guidelines
Fuente: www.w3.org/WAI/presentations/components

13.
WCAG 2.0

14.
Evolución de las WCAG
Fuente: http://www.3playmedia.com/ui/images/wcag-evolution.jpg

15.
Por qué surgen las WCAG2.0
• La accesibilidad en la web básica es relativamente fácil de garantizar simplemente
utilizando estándares web (HTML y CSS)
• La web 2.0 o web social se basa en interfaces más ricas que permiten la
comunidad, la colaboración, social networking e interacciones enriquecidas.
• Mecanismos de interacción más complejos, interfaces más ricas y sofisticadas
usando otro tipo de controles más complejos y complejizando los requisitos de
accesibilidad.
– Páginas con actualizaciones en tiempo real pueden no ser interpretados por tecnologías
de apoyos. Incluso si el usuario puede interactuar visualmente, puede verse abrumado y
confundido por la complejidad o gran cantidad de interacciones
Principales
objetivos de
WCAG 2.0
Ser perdurables en el tiempo.
Ser testeables de forma más precisa.
Ser más fáciles de usar y de entender.
Ser aplicables a tecnologías más avanzadas.
Ser flexibles y adaptables a diferentes situaciones, tecnologías y técnicas a
emplear.

16.
ISO/IEC DIS 40500:2012
• En 2012 la Organización Internacional de
Normalización (ISO) publica la norma ISO/IEC DIS
40500:2012
• Equivalente textualmente a las WCAG 2.0
• Con el objetivo de facilitar su uso en países que
requieran una normalización por parte de ISO en sus
procesos normalizadores.

17.
Organización de las WCAG 2.0
4
Principios
12
Pautas
61
Criterios de
conformidad
Conceptos
fundamentales
Objetivos
Básicos
Requisitos concretos a
cumplir, testeables
•Perceptible
• Operable
• Comprensible
• Robusto
A : Debe cumplir
AA : Debería cumplir
AAA: Si cumple, mucho mejor

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

19.
Un vistazo a WCAG 2.0
Perceptible Provee textos alternatvios a contenido no textual
Provee subtítulos y otras alternativas para multimedia
Crea contenido que pueda ser presentado de diferentes maneras sin perder contenido
Facilita al usuario poder ver y oir el contenido
Operable Crea funcionalidades disponibles por teclado
Brinda suficiente tiempo para leer y usar el contenido
No uses contenido que pueda causar ataques
Ayuda a los usuarios a navegar y encontrar el contenido
Comprensible Crea textos legibles y comprensibles
Crea contenido que se muestre y opera de forma predecible
Ayuda a los usuarios a evitar y corregir errores
Robusto Maximiza la compatibilidad con herramientas actuales y futuras

20.
Principio 1: Perceptible
La información y los componentes de la interfaz
de usuario deben ser presentados a los usuarios
de modo que ellos puedan percibirlos.
• Los usuarios deben ser capaces de percibir la información
presentada (no puede ser invisible a todos sus sentidos)
Pauta 1.1
•Alternativas
textuales
Pauta 1.2
•Medios
tempodependientes
Pauta 1.3
•Adaptable
Pauta 1.4
•Distinguible

21.
1.1 Alternativas textuales
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales
Proporcionar alternativas textuales para todo contenido no
textual de modo que se pueda convertir a otros formatos que las
personas necesiten, tales como textos ampliados, braille, voz,
símbolos o en un lenguaje más simple.
Propósito: asegurar que el contenido no textual esté
también disponible en texto
• “texto” refiere a texto electrónico (no imágenes de texto). Su presentación
es neutral: puede ser presentada de la mejor manera según las
necesidades del usuario.

22.
1.2 Medios Tempodependientes
Perceptible | Operable | Comprensible | Robusto >> 1.2 Medios Tempodependientes
Proporcionar alternativas para los medios
tempodependientes.
Propósito: proporcionar acceso a los multimedios tempodependientes y
sincronizados. Esto incluye a medios que son:
• sólo audio (sin vídeo y sin interacción)
• sólo vídeo (sin sonidos (audio) ni interacción)
• audio y vídeo
• audio y/o video combinado con interacción

23.
1.3 Adaptable
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable
Crear contenido que pueda presentarse de diferentes
formas (por ejemplo, con una disposición más simple)
sin perder información o estructura.
Propósito: asegurar que toda la información está disponible en
una forma que pueda ser percibida por todos los usuarios.
• Si toda la información está disponible en una forma que puede
ser determinado por el software, entonces se puede presentar
a los usuarios en diferentes formas (visual, audible, tacto, etc.)

24.
1.4 Distinguible
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible
Facilitar a los usuarios ver y oír el contenido,
incluyendo la separación entre el primer plano y el
fondo.
Propósito: que la presentación "por defecto" sea fácil de
percibir. Lo principal es que sea fácil diferenciar la información
de primer plano de la de segundo plano.

25.
Principio 2: Operable
Los componentes de la interfaz de usuario y
la navegación deben ser operables
• Los usuarios deben ser capaces de operar la interfaz
(la interfaz no puede requerir la interacción que un
usuario no puede realizar)
Pauta 2.1
•Accesible por teclado
Pauta 2.2
•Tiempo suficiente
Pauta 2.3
•Convulsiones
Pauta 2.4
•Navegable

26.
2.1 Accesible por teclado
Perceptible | Operable | Comprensible | Robusto >> 2.1 Accesible por teclado
Proporcionar acceso a toda la funcionalidad mediante
el teclado.
Propósito: Si la funcionalidad puede lograrse usando el
teclado, puede lograrse usando teclados adaptados,
entrada de voz, y otras tecnologías de asistencia.

27.
2.2 Tiempo suficiente
Perceptible | Operable | Comprensible | Robusto >> 2.2 Tiempo suficiente
Proporcionar a los usuarios el tiempo suficiente para
leer y usar el contenido.
Propósito: asegurar que todas las personas,
independientemente de sus limitaciones, tengan
tiempo suficiente para realizar las tareas que deseen.

28.
2.3 Convulsiones
Perceptible | Operable | Comprensible | Robusto >> 2.3 Convulsiones
No diseñar contenido de un modo que se sepa podría
provocar ataques, espasmos o convulsiones.
Propósito: Asegurar que el contenido evita los tipos de flash que
tienen más probabilidades de causar convulsiones cuando se ve
incluso por un segundo o dos.
• Las advertencias pueden no verse, sobre todo por los niños

29.
2.4 Navegable
Perceptible | Operable | Comprensible | Robusto >> 2.4 Navegable
Proporcionar medios para ayudar a los usuarios a
navegar, encontrar contenido y determinar dónde se
encuentran.
Propósito: Ayudar a los usuarios a encontrar
contenido, saber donde están y permitirle ir a otro
lado.

30.
Principio 3: Comprensible
La información y el funcionamiento de la interfaz de
usuario deben ser comprensibles.
• Los usuarios deben ser capaces de entender la información, así
como el funcionamiento de la interfaz de usuario
• el contenido o la operación no pueden estar más allá de su
comprensión
Pauta 3.1
•Legible
Pauta 3.2
•Predecible
Pauta 3.3
•Entrada de datos asistida

31.
3.1 Legible
Perceptible | Operable | Comprensible | Robusto >> 3.1 Legible
Hacer que los contenidos textuales resulten legibles y
comprensibles
Propósito: permitir que el contenido del texto sea leído por los
usuarios y por las ayudas técnicas, y asegurar que la información
necesaria para su comprensión esté disponible.
• Las personas con discapacidad experimentan el texto de formas diferentes:
para algunos, es visual; para algunos es auditiva; para algunos es táctil; y
para es visual y auditiva a la vez.

32.
3.2 Predecible
Hacer que las páginas web aparezcan y operen de
manera predecible
Propósito: ayudar mediante la presentación de contenidos en un
orden predecible y al hacer que el comportamiento de los
componentes funcionales e interactivos sean predecibles.
• Personas que utilizan amplificadores de pantalla ven sólo una parte de la
pantalla; un diseño coherente hace que sea más fácil encontrar las barras
de navegación y otros componentes. Los usuarios con limitaciones motrices
pueden realizar sus tareas con menos pulsaciones de teclado.
Perceptible | Operable | Comprensible | Robusto >> 3.2 Predecible

33.
3.3 Entrada de datos asistida
Ayudar a los usuarios a evitar y corregir los errores
Propósito: reducir el número de errores graves o irreversibles
que se hizo, aumentar la probabilidad de que los errores sean
notados por el usuario, y ayudar a los usuarios a entender lo que
deben hacer para corregir un error.
• Todo el mundo comete errores, y las personas con alguna discapacidad
pueden tener más dificultades. Además, puede ser más difícil para ellos
detectar que han cometido un error.
Perceptible | Operable | Comprensible | Robusto >> 3.3 Entrada de datos asistida

34.
Principio 4: Robusto
El contenido debe ser suficientemente robusto como para
ser interpretado de forma fiable por una amplia variedad
de aplicaciones de usuario, incluyendo las ayudas técnicas.
• Los usuarios deben ser capaces de acceder a los contenidos cuando
avanzan las tecnologías
• como las tecnologías y las aplicaciones del usuario evolucionan, el contenido
debe seguir siendo accesible
Pauta 4.1
•Compatible

35.
4.1 Compatible
Perceptible | Operable | Comprensible | Robusto >> 4.1 Compatible
Maximizar la compatibilidad con las aplicaciones de
usuario actuales y futuras, incluyendo las ayudas
técnicas
Propósito: apoyar a la compatibilidad con los agentes de usuario
actuales y futuros, en especial las tecnologías de asistencia
• Dado que las tecnologías cambian rápidamente, los desarrolladores
pueden tener muchos problemas para mantenerse al día.

36.
Silvia Da Rosa
@okactivist
C.C. www.mutuaspalabras.blogspot.com