Santiago Bustelo •Taller UX: Accesibilidad

APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS

1

Santiago Bustelo, Martín SzyslicanIxDA Buenos Aires

Accesibilidaddesde la concepción hasta la validación

Con el apoyo de

Este obra está bajo una licencia deCreative Commons Atribución-CompartirIgual 4.0 Internacional

Esta presentación está publicada bajo licenciaCreative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0)

Usted es libre de:

• Compartir — copiar y redistribuir el material en cualquier medio o formato

• Adaptar — remezclar, transformar y crear a partir del material.

Para cualquier propósito, incluso comercialmente.

El licenciante no puede revocar estas libertades en tanto usted siga los términos de la licencia.

Bajo las condiciones siguientes:

Atribución — Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y de las partes atribuidas, un aviso de derechos de autor, una nota de licencia, un aviso legal, y un enlace al material), proporcionando un enlace a la licencia, e indicando si se han realizado cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que sugiera que usted o su uso tienen el apoyo del licenciante.

CompartirIgual — Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted podrá distribuir su contribución siempre que utilice la misma licencia que la obra original, o una que aparezca como compatible en https://creativecommons.org/compatiblelicenses.

No hay restricciones adicionales — Usted no puede aplicar términos legales ni medidas tecnológicas que restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.

Acerca de Taller UX

Taller UX es un modelo reproducible de microtalleres de User Experience, construido colaborativamente, con el objetivo de mejorar la educación y divulgación de UX en español.

¿Querés colaborar con el proyecto o estás interesado en reproducir el taller en tu ciudad? ¡Contactanos!

Acerca de IxDA

IxDA (Interaction Design Association), es una organización mundial voluntaria, sin fines de lucro ni costos de membresía, iniciada en 2003.

Está conformada por voluntarios que se identifican con la misión de mejorar la condición humana avanzando la práctica profesional del Diseño de Interacción, sin percibir retribución económica por su participación.

Por ello, todas las iniciativas de IxDA son por la comunidad, para la comunidad.

Taller UX: Accesibilidad Santiago Bustelo •

Accesibilidad Web

5

• La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. (…)

• La Web es un recurso muy importante para diferentes aspectos de la vida: educación, empleo, gobierno, comercio, sanidad, entretenimiento y muchos otros. Es muy importante que la Web sea accesible para así proporcionar un acceso equitativo e igualdad de oportunidades a las personas con discapacidad. Una página Web accesible puede ayudar a personas con discapacidad a que participen más activamente en la sociedad.http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

Taller UX: Accesibilidad Santiago Bustelo •

Las partes del problema

6

Información×

Representación×

Tecnología=

Resultado final

≈ Contenido

≈ Diseño

≈ Desarrollo

Santiago Bustelo •Taller UX: Accesibilidad

Información vs. representación

7

Miguel de Cervantes El Ingenioso Hidalgo de Don Quijote de la Mancha

CAPÍTULO I

QUE TRATA DE LA CONDICIÓN Y EJERCICIO

DEL FAMOSO HIDALGO D. QUIJOTE DE LA MANCHA

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha

mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua,

rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón

las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún

palomino de añadidura los domingos, consumían las tres partes de su

hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con

su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta,

y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así

ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro

hidalgo con los cincuenta años, era de complexión recia, seco de carnes,

enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que tenía

el sobrenombre de Quijada o Quesada (que en esto hay alguna diferencia en los

autores que deste caso escriben), aunque por conjeturas verosímiles se deja

entender que se llama Quijana; pero esto importa poco a nuestro cuento; basta

que en la narración dél no se salga un punto de la verdad.

PÁGINA 1

QUE TRATA DE LA CONDICIÓN Y EJERCICIO

DEL FAMOSO HIDALGO D. QUIJOTE DE LA MANCHA

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha

mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua,

rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón

las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún

palomino de añadidura los domingos, consumían las tres partes de su

hacienda. El resto della concluían sayo de velarte, calzas de velludo para las

fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con

su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta,

y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así

ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro

hidalgo con los cincuenta años, era de complexión recia, seco de carnes,

enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que tenía

el sobrenombre de Quijada o Quesada (que en esto hay alguna diferencia en los

autores que deste caso escriben), aunque por conjeturas verosímiles se deja

entender que se llama Quijana; pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.

PÁGINA 1

Miguel de Cervantes El Ingenioso Hidalgo de Don Quijote de la Mancha

Es, pues, de saber, que este sobredicho hidalgo, los ratos que estaba

ocioso (que eran los más del año) se daba a leer libros de caballerías con tanta

afición y gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la

administración de su hacienda; y llegó a tanto su curiosidad y desatino en esto,

que vendió muchas hanegas de tierra de sembradura, para comprar libros de

caballerías en que leer; y así llevó a su casa todos cuantos pudo haber dellos; y

de todos ningunos le parecían tan bien como los que compuso el famosoOficioA4

Miguel de Cervantes El Ingenioso Hidalgo de Don Quijote de la Mancha

CAPÍTULO I

QUE TRATA DE LA CONDICIÓN Y EJERCICIO DEL FAMOSO HIDALGO D. QUIJOTE DE LA MANCHA

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no hamucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años, era de complexión recia, seco de carnes, enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna diferencia en los autores que deste caso escriben), aunque por conjeturas verosímiles se deja entender que se llama Quijana; pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.

PÁGINA 1

Santiago Bustelo •Taller UX: Accesibilidad

Información atada a una representación

9

Don Quijote.GIFDon Quijote.MP3

Taller UX: Accesibilidad Santiago Bustelo •

Tomar conciencia

10

• Los usuarios no son productores de contenido, diseño o desarrollo.

• Si nuestros usuarios tienen que separar información entretejida con la representación, los estamos obligando a hacer un esfuerzo considerable, no productivo, y que no les corresponde.

• Hacerlo bien, que no es fácil, nos define a todos los involucrados como profesionales, nos enorgullece y ennoblece.

Taller UX: Accesibilidad Santiago Bustelo •

¿Quiénes son nuestros usuarios?

11

Taller UX: Accesibilidad Martín Szyszlican •

Estadísticas en argentina (2010)

• Argentina: 13% (5 millones de personas)• Personas que cuentan con certificado de discapacidad y aquellas

que no lo poseen pero declaran tener alguna/s dificultad/es o limitación/es permanente/s para ver, oír, moverse, entender o aprender.

Fuente: http://www.censo2010.indec.gov.ar/resultadosdefinitivos_totalpais.asp

12

13%

Santiago Bustelo •Taller UX: Accesibilidad

Ana, Contadora (73 años)Deficiencia visual, pérdida de motricidad fina

• Lleva una vida activa. Para mantener las expensas bajas para todos, se hace cargo de la administración de su edificio.

• Trabajó con computadoras las últimas décadas. Las considera herramientas, no le interesa cómo funcionan.

• Como millones de adultos mayores, Ana sufre de degeneración macular asociada a la edad. Tiene dificultad en leer textos pequeños o con poco contraste. Sabe ampliar el texto en Explorer, pero no funciona en todos los sitios.

• Tiene un ligero temblor en la mano derecha. Usar el mouse a veces resulta un desafío, particularmente con links o botones muy pequeños. Prefiere usar el teclado.

• Las páginas que puede leer y usar sin problemas, funcionan muy bien en la pantallita de nuestro celular.

Foto kellyCDB (CC)

“La otra noche fuimos al teatro con las chicas. ¡Qué buenos actores! Hacía tiempo que no me reía tanto”.

13

Santiago Bustelo •Taller UX: Accesibilidad

Diego, Estudiante (26)Discapacidad cognitiva (dislexia, TDAH)

• Dicen que nació para médico. No sabía si empezar la carrera, pero la vocación fue más fuerte que el “miedo a los libros”. Descubrió que puede hacer que la computadora le lea los textos al mismo tiempo que los ve en la pantalla, y eso le ayuda a estudiar.

• Un niño por cada aula puede tener Trastorno por Déficit de Atención con Hiperactividad. Diego fue ese niño. Junto con dislexia, le genera grandes dificultades en la lectura.

• Las páginas muy “cargadas” o con animaciones lo marean.

• Agradece que Google entienda lo que quiere buscar aunque lo ingrese con faltas de ortografía.

• Los sitios que prefiere Diego, nos resultan fáciles de usar cuando estamos apurados y bajo presión.

Foto zpeckler (CC)

“Cuando éramos chicos, mi hermano se lastimó. Lo vendé tan bien, que no tuvieron que darle puntos”.

14

Santiago Bustelo •Taller UX: Accesibilidad

Hilda, Periodista (23)Discapacidad auditiva

• Colabora en varios medios y blogs. Le entusiasma la explosión de medios sociales.

• Perdió la audición a los 6 años debido a una meningitis, enfermedad que no distingue edad y puede dejar secuelas neurológicas como parálisis o epilepsia. La pérdida de audición afecta aprox. a 17 de cada 1.000 niños y jóvenes menores de 18 años, y a aprox. a 314 de cada 1.000 personas mayores de 65 años.

• Es capaz de leer los labios y comunicarse verbalmente, aunque para quienes recién la conocen puede ser difícil entenderla. Inspirada en el personaje de una serie, suele llevar puestos auriculares para evitar situaciones incómodas.

• Se maneja muy bien investigando en la web, aunque últimamente parece que están de moda screencasts y otros formatos que no puede aprovechar.

• Los sitios que Hilda consulta son los que podemos visitar en el trabajo y otras situaciones donde no podemos hacer ruido.

Foto elisharene (CC)

“Disculpame, no te estaba atendiendo”.

15

Santiago Bustelo •Taller UX: Accesibilidad

Jorge Luis, Representante (32)Discapacidad visual

• Siempre tuvo facilidad para tratar con gente. Es uno de los mejores vendedores en el sector.

• Perdió la vista en un accidente automovilístico que le costó años de rehabilitación. Aprendió a usar la PC con un lector de pantalla y le enseñó a sus compañeros de trabajo atajos del CRM que les permiten trabajar más rápido y distraerse menos.

• Como Jorge Luis no puede mirar (o escuchar) la pantalla mientras negocia con un cliente, suele relevarlo antes de realizar el llamado. Los clientes se sienten atendidos y entendidos cuando hablan con él.

• Los sitios que Jorge Luis puede usar tienen alternativas de texto para todas las imágenes, lo cual los posiciona muy bien en Google.

Foto Emezeta.com (CC)

“¡Tenemos uno muy bueno… en oferta!”

16

Santiago Bustelo •Taller UX: Accesibilidad

Philippe, Ingeniero (27)Hablante no nativo, ceguera al color

• Es Francés. Allá conoció a su mujer, Ana, que es argentina. Vinieron a Salta de luna de miel, y terminaron quedándose a vivir.

• Empezaron un emprendimiento de ecoturismo en el pueblo de los abuelos de ella. Acceden a Internet por dial-up.

• Estudió español en el secundario. Encuentra al “argentino” un tanto distinto, y le cuesta seguir muchas películas sin subtítulos. Los sitios con redacción ampulosa lo obligan a leer palabra por palabra.

• Como el 8% de los varones, tiene una deficiencia en los receptores del color, conocida popularmente como daltonismo. En su caso, no puede distinguir los colores compuestos por luz roja. En un formulario tiene problemas para distinguir los campos marcados en rojo.

• Los sitios que Philippe y Ana prefieren, son ideales para acceder con un Kindle, o con un celular por conexión 3G, lenta y cara.

“Compramos un lector de DVD que detesto.El tono de verde que utiliza para ‘on’ y el tono de rojo que utiliza para ‘off’, son indeferenciables por mí.”

Foto ecospc (CC)

17

Taller UX: Accesibilidad Santiago Bustelo •

Usuarios más perjudicados

• Personas con discapacidad• Sensorial (vista u oído): visión baja o nula, daltonismo, pérdida de audición.• Motriz: pérdida de control muscular, motricidad o de miembros, volviendo

difícil o imposible la operación de dispositivos tradicionales.• Cognitivos: afasia (pérdida de lenguaje), dislexia, limitaciones cognitivas

congénitas o asociadas a la edad.• Personas con desventajas técnicas o culturales• Computadoras viejas y/o conexiones lentas• Hablantes no nativos, diferencias culturales, baja escolaridad

• Casos de epilepsia• Epilepsia fotosensible

Más información: Trace Center: Major disability groups

18

Taller UX: Accesibilidad Santiago Bustelo •

¿Cómo nos llegan los requerimientos de los usuarios con discapacidad?

• Dentro de un proyecto no se cuenta con procesos y recursos adecuados para incorporar todos los casos.

• Entidades y Estados, en representación de los usuarios más perjudicados, generan cuerpos consistentes de requerimientos como resultado de un proceso de investigación.

19

Taller UX: Accesibilidad Santiago Bustelo •

¿Cómo podemos cumplir estos requerimientos?

• Entender Usabilidad y Accesibilidad como atributos cualitativos:

• No son un componente que se pueda “agregar” a un producto.

• Son el resultado de decisiones tácticas y estratégicas en Información × Representación × Tecnología durante todo el proceso de desarrollo.

• Son afectados por todos los involucrados en decisiones y ejecución de negocio, contenido, diseño y desarrollo.

• La calidad de un sistema se define por el componente más débil.

• Conocer requerimientos de accesibilidad y verificar su cumplimiento.

20

Taller UX: Accesibilidad Santiago Bustelo •

• Mejorar los procesos lleva tiempo y se logra paso a paso, proyecto a proyecto.

• En el camino, muchas veces habrá que tomar atajos.Distinguir parche de solución.

Suerte:“Con suerte, no tendremos usuarios con discapacidad”

Formulismo:“Haga click aquí para una versión sólo texto”

Especialidad:“¿Tiene una discapacidad? Aquí están los servicios de apoyo que podemos brindarle si lo declara”

Estándares:“Todo lo publicado ha sido producido siguiendo las guías WCAG 2.0”

Propiedad:“El personal ha sido capacitado para lograr enfoques de e-learning flexibles, creativos y adaptables”

Colaboración:“Una diversidad de alumnos –incluyendo personas con discapacidad– trabaja con nuestros desarrolladores y educadores para lograr buenas prácticas ”

Modelos de madurez

21

JISC TechDis (2010): Technological Maturity and Culture

Riesgo

Santiago Bustelo •Taller UX: Accesibilidad

Business Disability Forum Technology Taskforce: Accessibility Maturity Model

22

Areas Nivel 1:Informal

Nivel 2:Definido

Nivel 3:Repetible

Nivel 4:Administrado

Nivel 5:Optimizado

Impulsores de negocio Sin apoyo de superiores Estrategia planteada Compromiso / participación de arriba a abajo

Gestión activa de la estrategia

Pioneros y líderes

Guías y estándares Mínimo o poco claro Estándares básicos documentados / usados ad hoc

Estándares en uso / promovidos activamente

Estándares elevados / mejora coninua

Adoptante temprano de nuevos estándares

Gestión de riesgos No definido Proceso definido / mínima dirección real

Gestión activa Mejora continua / visión estratégica

Proveedores influenciados

Recursos y costos No asignadio o controlado

Algún presupuesto alocado / Responsabilidades claras

Estrategia de inversión / servicios de soporte integrados

Gestión efectiva de costo / beneficio

Presupuesto alocado para innovación / empoderamiento de usuarios

Entrega (diseño, construcción, test, implementación)

Mínima presencia en el ciclo de vida del producto

Requerimientos documentados / aplicados ad hoc

Pruebas de validación por equipo y clientes integradas

Métricas de cumplimiento de estándares relevadas

Excelencia en innovacion y diseño

Adquisiciones y contratos con proveedores

Mínima presencia en procesos de adquisición

Proceso documentado / utilizado ad hoc

Uso habitual incluyendo gestión de incumplimientos

Proactivo y brindando respaldo

Colaboración con proveedores

Sistemas heredados Baja accesibilidad Accesibilidad limitada, estrategia planteada

Sistemas heredados prioritarios hechos accesibles

Sistemas mayormente accesibles

Todos los sistemas heredados hechos accesibles

Procesos de ajustes razonables

Mínima / Reactiva Proceso básico / usado ad hoc

Proceso integrado recomendado / en uso habitual

Gestión activa dentro de los niveles de servicio

Innovación / se comparten mejores prácticas

Taller UX: Accesibilidad Santiago Bustelo •

WCAGWeb Content Accessibility Guidelines

WCAG 2.0, ISO/IEC 40500:2012

23

Taller UX: Accesibilidad Santiago Bustelo •

WCAG 1 vs. WCAG 2

24

• WCAG 2 está organizado en Principios (vs. guidelines).• WCAG 2.0 aplica de manera más amplia a diferentes tecnologías, y

a tecnologías futuras. • WCAG 1 estaba enfocado en HTML; WCAG 2 tiene lineamientos

independientes de la tecnología.• Los requerimientos WCAG 2.0 pueden verificarse de manera más

precisa.

https://www.w3.org/WAI/WCAG20/from10/diff.php

Taller UX: Accesibilidad Santiago Bustelo •

WCAG: Principios

• Perceptible • La información y los componentes de la interfaz de usuario deben ser

presentados a los usuarios de modo que ellos puedan percibirlos. • Operable

• Los componentes de la interfaz de usuario y la navegación deben ser operables.

• Comprensible • La información y el manejo de la interfaz de usuario deben ser comprensibles.

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

25

Taller UX: Accesibilidad Santiago Bustelo •

WCAG: Requisitos de conformidad

Para que una página web sea conforme con las WCAG 2.0, deben satisfacerse todos los requisitos de conformidad siguientes:1. Nivel de conformidad: Uno de los siguientes niveles de conformidad se satisface por completo.• Nivel A: Para lograr conformidad con el Nivel A (el mínimo), la página web satisface todos los Criterios de

Conformidad del Nivel A, o proporciona una versión alternativa conforme.• Nivel AA: Para lograr conformidad con el Nivel AA, la página web satisface todos los Criterios de

Conformidad de los Niveles A y AA, o se proporciona una versión alternativa conforme al Nivel AA.• Nivel AAA: Para lograr conformidad con el Nivel AAA, la página web satisface todos los Criterios de

Conformidad de los Niveles A, AA y AAA, o proporciona una versión alternativa conforme al Nivel AAA.

Nota 1: Aunque la conformidad sólo puede alcanzarse en los niveles mencionados, se alienta a los autores a notificar en sus declaraciones cualquier avance que hayan realizado para satisfacer los criterios de conformidad de un nivel de conformidad mayor al que hayan alcanzado.Nota 2: No se recomienda que el Nivel de Conformidad AAA sea requerido como política general para la totalidad de un sitio web, ya que en algunos contenidos no es posible satisfacer todos los Criterios de Conformidad de Nivel AAA.

Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, Traducción Candidata a ser la Oficial al Español

26

Taller UX: Accesibilidad Santiago Bustelo •

Pautas WCAG 2.0

1 Perceptible1.1 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.1.2 Medios tempodependientes: proporcionar alternativas para los medios tempodependientes.1.3 Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.1.4 Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

2 Operable2.1 Proporcionar acceso a toda la funcionalidad mediante el teclado.2.2 Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.2.3 No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.2.4 Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

3 Comprensible3.1 Hacer que los contenidos textuales resulten legibles y comprensibles.3.2 Hacer que las páginas web aparezcan y operen de manera predecible.3.3 Ayudar a los usuarios a evitar y corregir los errores.

4 Robusto4.1 Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.

Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, Traducción Candidata a ser la Oficial al EspañolMás información (en inglés): WCAG 2.0 Quick Reference List

27

Taller UX: Accesibilidad Santiago Bustelo •

Legislación argentina y mundial

28

Taller UX: Accesibilidad Santiago Bustelo •

Legislación destacada a nivel mundial

• EEUU• Rehabilitation Act Amendments of 1998, Section 508

• Reino Unido• The Disability Discrimination Act 1995, Part III Access to Goods

and Services• Special Educational Needs and Disability Act 2001• The Disability Discrimination Act 1995, Part IV Education

http://www.w3.org/WAI/Policy/

29

Taller UX: Accesibilidad Santiago Bustelo •

Legislación argentina

30

• Ley 26.653 de Accesibilidad de la Información en las Páginas Web (noviembre 2010)

• Resolución 69/2011: Apruébase la "Guía de Accesibilidad para Sitios Web del Sector Público Nacional" (WCAG 1.0, 1999)

• Decreto 355/2013: Apruébase la reglamentación de la Ley 26.653• Disposición Nro 2/2014, Oficina Nacional de Tecnologías de

Información (WCAG 2.0, 2008)

Taller UX: Accesibilidad Santiago Bustelo •

Alcance

ARTICULO 1 — El Estado nacional, entiéndanse los tres poderes que lo constituyen, sus organismos descentralizados o autárquicos, los entes públicos no estatales, las empresas del Estado y las empresas privadas concesionarias de servicios públicos, empresas prestadoras o contratistas de bienes y servicios, deberán respetar en los diseños de sus páginas Web las normas y requisitos sobre accesibilidad de la información que faciliten el acceso a sus contenidos, a todas las personas con discapacidad con el objeto de garantizarles la igualdad real de oportunidades y trato, evitando así todo tipo de discriminación.

Ley 26.653 de Accesibilidad de la Información en las Páginas Web (11/2010)

31

Taller UX: Accesibilidad Santiago Bustelo •

Plazos

ARTICULO 7 — Las normas y requisitos de accesibilidad mencionados en esta ley [Art. 5: determinadas por la Oficina Nacional de Tecnologías de la Información (ONTI)], deberán ser implementados en un plazo máximo de VEINTICUATRO (24) meses para aquellas páginas existentes con anterioridad a la entrada en vigencia de la presente ley. El plazo de cumplimiento será de DOCE (12) meses a partir de la entrada en vigencia de la presente ley para aquellas páginas Web en proceso de elaboración, debiendo priorizarse las que presten servicios de carácter público e informativo.

Ley 26.653 de Accesibilidad de la Información en las Páginas Web (11/2010)

32

Taller UX: Accesibilidad Santiago Bustelo •

Estrategias de separación de información,

representación y tecnología

33

Taller UX: Accesibilidad Santiago Bustelo •

Model: HTML View: CSS Controller: Navegador

Modelo MVC (Modelo/Vista/Controlador)

34

Jeff Atwood: Understanding Model-View-Controller/

Santiago Bustelo •Taller UX: Accesibilidad

Desarrollo web: Capas

35

HTML

CSS JavaScript

ContenidoFlash

PHP, ASP, Java…

Base de datos

Dispositivo

Navegador

Usuario

Cliente

ClientSide

ServerSide

Tecnologías asistivas

Santiago Bustelo •Taller UX: Accesibilidad

HTML: Capas Geológicas

37

HTML 2.0 (1995)

HTML 3.2 (1997)

HTML 4.0 / 4.01 (1997-1999)

XHTML 1.0 / 1.1 (2000-2001)

HTML 5 (2008-)

Santiago Bustelo •Taller UX: Accesibilidad

Progressive enhancement

38

CSS JavaScript

ContenidoFlash

PHP, ASP, Java…

Base de datos

Dispositivo

NavegadorCliente

ClientSide

ServerSide

HTML

Santiago Bustelo •Taller UX: Accesibilidad

Progressive enhancement

39

PHP, ASP, Java…

Base de datos

CSS JavaScript

ContenidoFlash

Dispositivo

Navegador

HTML 3.2 (1997)

HTML 4.0 / 4.01 (1997-1999)

XHTML 1.0 / 1.1 (2000-2001)

HTML 5 (2008-)

HTML 2.0 (1995)

Taller UX: Accesibilidad Santiago Bustelo •

HTML: marcado semántico (o no)

Marcado semántico<H1>Título</H1>

<P>Párrafo</P>

<OL>

<LI>Primer  item</LI>

<LI>Segundo  item</LI>

</OL>

Marcado incorrecto<P  style=”size:24px”>Título</P>

<P>Párrafo</P>

<P>  -­‐  Primer  item  <BR>

   -­‐  Segundo  item</P>

40

Taller UX: Accesibilidad Santiago Bustelo •

Metadatos HTML: datos acerca de los datos

<html  lang="es-­‐AR">

<title>Título  de  la  página</title><link  rel="author  license"  href="/about">

<meta  name="keywords"  content="british,type  face,font,fonts,highway,highways">

<meta  charset="utf-­‐8">

W3C: 4.2 Document metadata — HTML

41

Taller UX: Accesibilidad Santiago Bustelo •

Gestión: Modelo de Calidad por áreas

42

Taller UX: Accesibilidad Santiago Bustelo •

¿Qué es Calidad?

• “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco)

• Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming)

• “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio”(Lean Software Development)

43

Taller UX: Accesibilidad Santiago Bustelo •

Cuantificando calidad

• Emplear siempre la misma métrica para la misma cosa.• Implementar métricas y herramientas adecuadas, probadas y

consistentes, conociendo y observando sus limitaciones.• Si es necesario desarrollar herramientas, publicarlas como

software libre. No son un activo del proyecto o del equipo. Pertenecen al mundo de la investigación, no al de la tecnología competitiva.

44

Santiago Bustelo •Taller UX: Accesibilidad

Construyendo en equipo

45

“ 1.1.1 Contenido no textual: Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito…

WCAG 2.0

✗

Contenido Desarrollo

<img  alt="un  dibujo  que  me  pasaron  que  tiene  muchos  colores"  />

ResultadoImagen

Santiago Bustelo •Taller UX: Accesibilidad

Construyendo en equipo

46

“ 1.1.1 Contenido no textual: Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito…

WCAG 2.0

✔

Contenido Desarrollo

<img  alt="Diagrama  Cromático  de  la  CIE"  />

ResultadoImagen

Documentación:Alternativa textual

de la imagen

Taller UX: Accesibilidad Santiago Bustelo •

Calidad por áreas

47

• Separamos el proceso en áreas definidas.

• Cada área:

• Comparte una visión común.

• Tiene un único interlocutor responsable.

• Tiene un checklist que puede aplicar en todo momento.

• Sólo recibe calidad:

• Insumos pasaron checklist del área anterior.

• Sólo entrega calidad:

• Entregables pasando checklist propio y de las áreas anteriores.

• Documentación de elementos a incorporar posteriormente.

Santiago Bustelo •Taller UX: Accesibilidad

En el primer proyecto…

48

Interfaz Front-end Back-end ContenidosDirección

StakeholdersSponsors

Santiago Bustelo •Taller UX: Accesibilidad

Proyectos de mayor escala

49

RedactoresDiseñadores

Contenidistas

Análisis Func.Dis. InteracciónArq. Información

Dis. Interfaz

HTML/CSSTemplatesJavaScript

XAML, Flash

Arq. SoftwareArq. BD

PHP / .Net / Java

StakeholdersSponsors

Interfaz Front-end Back-end ContenidosDirección

Taller UX: Accesibilidad Santiago Bustelo •

Visión común

•¿Cuáles son los objetivos del proyecto?• Aprobados por el equipo, medibles, con plazos definidos.

•¿Quiénes son nuestros usuarios?• Arquetipos (Personas) en base a relevamiento con usuarios reales.

•¿Qué vamos a construir?• Definición de expectativas del producto final.• Nivel de conformidad WCAG 2 consensuado por el equipo.• Comprensión de aplicación de las guías WCAG 2.

•¿Cómo lo vamos a construir?• Metodología conocida, aceptada y utilizada por el equipo.

50

Santiago Bustelo •Taller UX: Accesibilidad

Areas: Presentación, ContenidosInterfaz, diseño visual y multimedia

51

Santiago Bustelo •Taller UX: Accesibilidad

Protanopia

Protanopi

Ejemplos de N

ational Eye Institute, National Institutes of H

ealth¿Cómo ven nuestros usuarios?

52

Taller UX: Accesibilidad Santiago Bustelo •

Cuando el color no comunica

“ Nunca usar color como único elemento de significado. Emplearlo para reforzar mensaje transmitido por texto, imagen o posición (ej. luces del semáforo).

“ Empezar el diseño como wireframe o en blanco y negro, y agregar color después.

“ Emplear colores fáciles de distinguir (separados en HSL/HSV, manteniendo buen contraste contra el fondo; no emplear colores adyacentes, sino tríadas o complementarios).

“ En documentación y ayudas, identificar elementos de la interfaz por nombre, no por color. Microsoft Dev Center: Color

• Emplear contraste entre texto y fondo conforme especificaciones de contraste WCAG 2 (herramientas disponibles).

53

Taller UX: Accesibilidad Santiago Bustelo •

Textos alternativos

• Sólo el texto puede ser representado en todos los dispositivos. • No desarrollar contenido en formatos multimedia, audio y/o video,

si no se prevén recursos para producir e implementar alternativas textuales.

• Implementar o proveer para su implementación atributos ALT para imágenes y animaciones, y descripciones de figuras y diagramas.

• Multimedia: Proporcionar subtítulos y transcripción del sonido, y descripción del vídeo.

• Usar textos descriptivos para links. Mejora posicionamiento en Google y ayuda a usuarios de lectores de pantalla, que navegan empleando listados de links. Nunca “Click aquí”.

54

Taller UX: Accesibilidad Santiago Bustelo •

Tipografía

• Emplear tipografía legible.• Menos de 80 caracteres por línea, buen interlineado y espacio

entre párrafos (150% y 1.5 veces el interlineado, respectivamente, para nivel AAA)

55

Taller UX: Accesibilidad Santiago Bustelo •

Animaciones, audio y video

• Evitar animaciones gratuitas que no agregan valor a nuestros usuarios.• Dos usos lícitos para animaciones: mostrar una transformación

(producto que “vuela” al carrito), o una secuencia que sólo tiene sentido desarrollada en el tiempo (ej. danza).

• No emplear animaciones en el área de la visión periférica del usuario.• Más de tres “flashes” pueden disparar un ataque de epilepsia.• El usuario debe poder controlar la reproducción de audio y video.

• Que la página empiece a reproducir sonido apenas se la abre es fastidioso. Que lo haga enterrada en un grupo de pestañas es desquiciante.

56

Santiago Bustelo •Taller UX: Accesibilidad

Area: TecnologíaDesarrollo front-end

57

Taller UX: Accesibilidad Santiago Bustelo •

Trabajar por capas

• Conocer y respetar sentido semántico de cada tag HTML5. Nunca reemplazar o reinventar tags (ej, P  class=”titulo”).

• Progressive Enhancement: • Primero maquetar el HTML. Validar regularmente.• Sobre HTML sólido, aplicar CSS y repasar tags, classes y IDs.• JavaScript no intrusivo como última capa. El sitio debe ser

navegable con JavaScript desactivado.• No aceptar código generado automáticamente sin evaluarlo ni saber

cómo funciona.• Aplicar recomendaciones de Yahoo Exceptional Performance.

58

Taller UX: Accesibilidad Santiago Bustelo •

Navegación y presentación accesible

• Implementar estructura y mecanismos para evitar que usuarios de lectores de pantalla tengan que recorrer bloques de contenido innecesariamente.• Ej.: links “saltear navegación”, sólo perpectibles por lectores de

pantalla.• El texto debe poder ser ampliado al 200% sin pérdida de contenido

o funcionalidad.• Emplear medidas relativas (em,  %) en CSS.

• Maquetado fluido.

59

Santiago Bustelo •Taller UX: Accesibilidad

Desarrollo y testeo modular

kambrica.com/congo

inputconfig.phpvariables.ymlcomponents_html_layoutscomponente1componente2

60

Taller UX: Accesibilidad Santiago Bustelo •

HTML elemental

• Correcto uso de títulos (H1,H2,H3…) y listas (UL/OL>LI,  DL>DT/DD).

• Uso correcto de tags y atributos para relacionar elementos y proveer texto alternativo: LABEL  for…,  title,  alt,  longdesc,  ABBR

• Jamás usar tablas para diseño. Usar tablas para contenido tabular, marcando correctamente THEAD,  TBODY,  TFOOT,  THs,  CAPTION.

• Uso de IDs para marcar puntos en el contenido y classes con sentido semántico.

• Nunca usar atributo style en un elemento.

61

Taller UX: Accesibilidad Santiago Bustelo •

Caso de ejemplo

62

Taller UX: Accesibilidad Santiago Bustelo •

Diseño y desarrollo tradicional vs. diseño y desarrollo usable y accesible

63

• Una consultora ficticia de Recursos Humanos, que lanza una sección de empleos para personas con discapacidad.

• Se presentan dos versiones del mismo sitio: uno con problemas usuales de usabilidad y accesibilidad, otro resolviendo esas situaciones.

Versión con problemas

...para usuarios con daltonismo...

No se distingue sección activa

No se distinguen niveles de menú

...y de lectores de pantalla

Page has fifty-five Links NTI S.A. Recursos Humanos colon Empleos, Busquedas laborales, buscar trabajo, encontrar trabajo, trabajo en argentina, trabajo en buenos aires, reclutamiento de personal, cesion de personal dash Internet Explorer Link Graphic Logo NTI colon los cuatro rombos (en color turquesa, marrón, ocre y gris) representan las cuatro áreas que conforman nuestra visión y misión, el dinamismo y el constante cambio que son los desafíos del mundo de las empresas Link Contáctenos Av. Corrientes one thousand forty-six Piso nine Bs. As. Argentina left paren Cone thousand twenty-three ABC right paren Tel. colon left paren fifty-four eleven right paren four thousand one hundred twenty-three dash five thousand six hundred seventy-eight Link Inicio Link Empleos Link Recursos Humanos Link La Empresa Link Español bullet Link English Link Buscar empleo Link Búsqueda avanzada Ofertas destacadas Table with one column and sixty-three rows Link Industrias Libertador S.R.L. Link Administrador de Bases de Datos Link Derqui SACIFI Link Responsable Comercial Link Directorio Telemax Link Implementador Link Consultora Delcampo Link Equipe de Suporte Técnico em Português Link Chandra and Asociados Link Analista Programador Java Sr. slash Ssr. Link Malloc Argentina Link Auditor Interno Semi Senior slash Senior Link Grupo Castañares Link Administrativa Link Obligado Consultores Link Profesionales de Impuestos Link Industrias Alvarez Jonte Link Administrador Link Leonov S.A. Link Administrador Middleware Link Compass East Link Analista de Marketing On Line Jr slash Semi Sr Link Ayefour Link Tester Semi Sr Link Tomahawk SRL Link Programador Web Java Semi Sr slash Junior Link Grupo Larralde Link Analista Sr. De Compensaciones Link Constituyentes SA Link Customer Care Representatives Link Bacacay SRL Link Analista Jr. de Precios de Transferencia Link Udaondo and Asociados Link Estudiantes avanzados o graduados de Contador Público Nacional Link Consultora Cabildo Link Asistente de Impuestos Link Escalada SA Link Market Research Analyst Link Juramento S.R.L. Link Enterprise Services Mainframe Link Bowman and CIA Link Administrador Unix Table end Graphic titulo.gif Buscar ofertas del portal Table with five columns and eleven rows Graphic espacio Categoría colon Graphic espacio Combo box Administración left paren thirty-seven right paren Graphic espacio Ubicación colon Graphic espacio Graphic espacio Idiomas colon Graphic espacio Checkbox Not checked buscar empleos en el portal Ingles Checkbox Not checked buscar empleos en el portal Varios Graphic espacio Antiguedad ofertas colon Graphic espacio Graphic espacio Graphic espacio Graphic boton dash verde.gif Graphic espacio Table end Link Home Link Mapa del sitio Link Contáctenos

Abuso SEO

Alt describe logo

Navegación

Dirección

alt=titulo.gif

Recién llegamos al buscador!

Títulos para mouseover

alt=boton-verde.gif

Flash “Envíe su CV” no perceptible

Bloque de ofertas destacadas

Sólo 1er categoría es perceptible

Representación de texto realizada por Fangs – the screen reader emulator

Santiago Bustelo •Taller UX: Accesibilidad

Versión accesible: daltonismo

67

Simulación: protanopiaVisión estándar

Santiago Bustelo •Taller UX: Accesibilidad

Page has seven headings and sixty-eight links NTI S.A. Recursos Humanos colon Ofertas laborales dash Internet Explorer Usted está en colon Link Inicio colon Link Empleos colon Categorías. This page link Saltear navegación

Heading level one Link Graphic N.T.I. S.A. Recursos Humanos

Heading level four Oportunidades laborales Edit Graphic Buscar List of two items bullet Link Empleos por categoría bullet Link Ingrese su CV List end List of five items bullet Link Inicio bullet Link Empleos bullet Link Recursos Humanos bullet Link La Empresa bullet Link Contacto List end Link Español bullet Link English List of three items bullet Link Categorías bullet Link Búsqueda avanzada bullet Link Ingrese su CV List end Graphic Miles de empresas lo están buscando

Heading level four Link Graphic Envíe su Currículum

Heading level two Categorías List of twenty-five items bullet Link Administración left paren thirty-seven right paren bullet Link Call Center left paren eight right paren bullet Link Comercial slash Ventas left paren one hundred twenty-two right paren bullet Link Comercio Exterior left paren twelve right paren bullet Link Contabilidad left paren thirty-one right paren bullet Link Diseño left paren twelve right paren bullet Link E dash commerce left paren nine right paren bullet Link Educación left paren five right paren bullet Link Finanzas left paren thirty-two right paren bullet Link Gastronomía left paren fourteen right paren bullet Link Gerencia slash Dirección Gral left paren six right paren bullet Link Hotelería left paren two right paren bullet Link Impuestos left paren eleven right paren bullet Link Ingeniería left paren eight right paren bullet Link Legal left paren twelve right paren bullet Link Logística left paren fifteen right paren bullet Link Mantenimiento left paren four right paren bullet Link Marketing left paren twenty-four right paren bullet Link Multimedia left paren four right paren bullet Link Pasantías left paren six right paren bullet Link Periodismo left paren four right paren bullet Link Producción e Ingeniería left paren twenty-five right paren bullet Link Recepcionista left paren twelve right paren bullet Link Recursos Humanos left paren twenty-four right paren bullet Link Empleo para Personas con Discapacidad left paren forty-one right paren List end

Heading level four Ofertas destacadas Definition list of twenty-one items Industrias Libertador S.R.L. equals Link Administrador de Bases de Datos Derqui SACIFI equals Link Responsable Comercial Directorio Telemax equals Link Implementador Consultora Delcampo equals Link Equipe de Suporte Técnico…

Versión accesible: lectores de pantalla

68

Categorías perceptibles

Breadcrumb accesible

Sólo perceptible por lectores de pantalla

Marcado semántico: títulos y listas

Taller UX: Accesibilidad Martín Szyszlican •

Validación

69

Taller UX: Accesibilidad Martín Szyszlican •

¿Cómo es un sitio web accesible?

• Puede ser accedido• Con cualquier dispositivo conectado a la web (Diversidad de

resoluciones y tamaños de pantalla)• Con cualquier ancho de banda (Tiempo de descarga aceptable)• Con cualquier navegador (Modo gráfico, Modo texto, Lectores

de pantalla)• Sin necesidad de extensiones o agregados.

70

Taller UX: Accesibilidad Martín Szyszlican •

¿Cómo es un sitio web accesible?

• Puede ser operado por• Cualquier persona, con cualquier dispositivo conectado a la

web (Teclado, Mouse, Táctil, Joystick)• Puede ser comprendido por

• Niños• Personas con problemas cognitivos• Personas con visión reducida• Extranjeros (Encoding)

71

Taller UX: Accesibilidad Martín Szyszlican •

Software de ayuda a la validación

• En español:• TAW http://www.tawdis.net• Examinator http://www.examinator.ws

• En inglés:• AChecker http://achecker.ca• WAVE http://wave.webaim.org

72

Taller UX: Accesibilidad Martín Szyszlican •

¿Tengo un sitio web accesible?

• Lectores de pantalla• NVDA http://www.nvaccess.org/• JAWS http://www.freedomscientific.com/Products/

Blindness/Jaws• Emuladores para navegador

• Fangs (para firefox) https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/

• ChromeVox (para chrome) https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn

73

Taller UX: Accesibilidad Martín Szyszlican •

¿Cómo hago un sitio web accesible?

• Conocer estándares y recomendaciones W3C• WAI (Iniciativa de accesibilidad web)• Pautas de accesibilidad para el contenido (WCAG2)

http://sidar.org/traducciones/wcag20/es/• Aplicaciones ricas de internet accesibles (ARIA)

http://www.w3.org/TR/wai-aria/• Otras: HTML, CSS, EcmaScript, RSS, etc…

http://www.w3.org/standards/

74

Taller UX: Accesibilidad Martín Szyszlican •

¿Cómo hago un sitio web accesible?

• Capacitar y alinear a todo el equipo:• Si para nadie es importante, no se hará.• Área de control de calidad.

• Diferenciar cada proyecto y decidir a qué nivel de cumplimiento se va a llegar.

75

Taller UX: Accesibilidad Martín Szyszlican •

Problemas comunes de accesibilidad web

76

Taller UX: Accesibilidad Martín Szyszlican •

Problemas comunes: Navegación

• Menúes y links• Repetición (no presentar link para saltar al contenido)• Sub-item ocultos por display:none• Mismo color en links visitados y no visitados• Texto de los enlaces poco claros fuera de contexto

77

Taller UX: Accesibilidad Martín Szyszlican •

Problemas comunes: Formularios

• Ingreso de datos• Onclick (mal uso de JavaScript)• No definir estilo "Focus" para el campo activo (los reset lo

desactivan)• Falta de la etiqueta <LABEL>

78

Taller UX: Accesibilidad Martín Szyszlican •

Problemas comunes: Imágenes

• IMÁGENES• Imágen sin alt o longdesc

79

Taller UX: Accesibilidad Martín Szyszlican •

Problemas comunes: Sopa de HTML

• Maquetación no semántica• Encabezados <h1> a <h6> no empleados

80

Este obra está bajo una licencia deCreative Commons Atribución-CompartirIgual 4.0 Internacional

Con el apoyo de

¡Muchas gracias!Accesibilidad desde la concepción hasta la validación

Santiago Bustelo, Martín Szyslican

facebook.com/ixdalaplata

@ixdalaplata

Gracias!Se entregarán certificados de asistencia a aquellos que realicen todos los talleres.

Seguinos en nuestra comunidad local: