Accesibilidadv203 Iwork09 160106021643

APRENDIENDO A DISEÑAR PARA MEDIOS
INTERACTIVOS
Taller UX: Accesibilidad Santiago Bustelo • 1

Con el apoyo de
Accesibilidad
desde la concepción hasta la validación
Santiago Bustelo, Martín Szyslican
IxDA Buenos Aires
Este obra está bajo una licencia de

Creative Commons Atribución-CompartirIgual 4.0 Internacional
Esta presentación está publicada bajo licencia
Creative 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.
Accesibilidad Web
• 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

Las partes del problema
Información ≈ Contenido
×
Representación ≈ Diseño
×
Tecnología ≈ Desarrollo
=
Resultado final

Información vs. representación
QUE TRATA DE LA CONDICIÓN Y EJERCICIO

DEL FAMOSO HIDALGO D. QUIJOTE DE LA MANCHA
Miguel de Cervantes El Ingenioso Hidalgo de Don 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
CAPÍTULO I
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í
QUE TRATA DE LA CONDICIÓN Y EJERCICIO
ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
DEL FAMOSO HIDALGO D. QUIJOTE DE LA MANCHA
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
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha
autores que deste caso escriben), aunque por conjeturas verosímiles se deja
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua,
entender que se llama Quijana; pero esto importa poco a nuestro cuento; basta
rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón
que en la narración dél no se salga un punto de la verdad.
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
PÁGINA 1
hacienda. El resto della concluían sayo de velarte, calzas de velludo para las
Miguel de Cervantes El Ingenioso Hidalgo de Don Quijote de la Mancha
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í
Es, pues, de saber, que este sobredicho hidalgo, los ratos que estaba
ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
ocioso (que eran los más del año) se daba a leer libros de caballerías con tanta
hidalgo con los cincuenta años, era de complexión recia, seco de carnes,
afición y gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la
enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que tenía
administración de su hacienda; y llegó a tanto su curiosidad y desatino en esto,
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
A4 Oficio
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 famoso

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
Información atada a una representación
Don Quijote.MP3 Don Quijote.GIF

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

¿Quiénes son
nuestros usuarios?

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.
13%
Fuente: http://www.censo2010.indec.gov.ar/
resultadosdefinitivos_totalpais.asp
Taller UX: Accesibilidad Martín Szyszlican • 12

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.
Foto kellyCDB (CC)

• Como millones de adultos mayores, Ana sufre de degeneración
macular asociada a la edad. Tiene dificultad en leer textos
“La otra noche pequeños o con poco contraste. Sabe ampliar el texto en
fuimos al teatro
con las chicas.
Explorer, pero no funciona en todos los sitios.
¡Qué buenos
actores! Hacía
• Tiene un ligero temblor en la mano derecha. Usar el mouse a
tiempo que no me veces resulta un desafío, particularmente con links o botones
reía tanto”. 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.

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.
Foto zpeckler (CC)
“Cuando éramos
• Un niño por cada aula puede tener Trastorno por Déficit de
chicos, mi hermano
Atención con Hiperactividad. Diego fue ese niño. Junto con
se lastimó. Lo dislexia, le genera grandes dificultades en la lectura.
vendé tan bien, que
no tuvieron que • Las páginas muy “cargadas” o con animaciones lo marean.
darle puntos”.
• 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.

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
Foto elisharene (CC)
1.000 personas mayores de 65 años.
“Disculpame, no te
estaba atendiendo”.
• 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.

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
Foto Emezeta.com (CC)
CRM que les permiten trabajar más rápido y distraerse menos.
“¡Tenemos uno
muy bueno… en
• Como Jorge Luis no puede mirar (o escuchar) la pantalla
oferta!” 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.

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.
Foto ecospc (CC)

• Estudió español en el secundario. Encuentra al “argentino” un tanto
distinto, y le cuesta seguir muchas películas sin subtítulos. Los
“Compramos un sitios con redacción ampulosa lo obligan a leer palabra por palabra.
lector de DVD que
detesto. • Como el 8% de los varones, tiene una deficiencia en los receptores
El tono de verde del color, conocida popularmente como daltonismo. En su caso, no
que utiliza para puede distinguir los colores compuestos por luz roja. En un
‘on’ y el tono de formulario tiene problemas para distinguir los campos marcados
rojo que utiliza
para ‘off’, son en rojo.
indeferenciables
por mí.”
• 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.

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

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

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

Modelos de madurez
• 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: Formulismo: Especialidad: Estándares: Propiedad: Colaboración:

“Con suerte, no “Haga click aquí para “¿Tiene una “Todo lo publicado ha “El personal ha sido “Una diversidad de alumnos –
tendremos usuarios una versión sólo texto” discapacidad? Aquí sido producido capacitado para lograr incluyendo personas con
con discapacidad” están los servicios de siguiendo las guías enfoques de e-learning discapacidad– trabaja con
apoyo que podemos WCAG 2.0” flexibles, creativos y nuestros desarrolladores y
brindarle si lo declara” adaptables” educadores para lograr
buenas prácticas ”
Riesgo
JISC TechDis (2010): Technological Maturity and Culture

Business Disability Forum Technology Taskforce:
Accessibility Maturity Model
Areas Nivel 1: Nivel 2: Nivel 3: Nivel 4: Nivel 5:

Informal Definido Repetible Administrado Optimizado
Impulsores de negocio Sin apoyo de superiores Estrategia planteada Compromiso / Gestión activa de la Pioneros y líderes
participación de arriba a estrategia
abajo
Guías y estándares Mínimo o poco claro Estándares básicos Estándares en uso / Estándares elevados / Adoptante temprano de
documentados / usados promovidos activamente mejora coninua nuevos estándares
ad hoc
Gestión de riesgos No definido Proceso definido / Gestión activa Mejora continua / visión Proveedores
mínima dirección real estratégica influenciados
Recursos y costos No asignadio o Algún presupuesto Estrategia de inversión / Gestión efectiva de Presupuesto alocado
controlado alocado / servicios de soporte costo / beneficio para innovación /
Responsabilidades claras integrados empoderamiento de
usuarios
Entrega (diseño, Mínima presencia en el Requerimientos Pruebas de validación por Métricas de Excelencia en innovacion
construcción, test, ciclo de vida del producto documentados / equipo y clientes cumplimiento de y diseño
implementación) aplicados ad hoc integradas estándares relevadas
Adquisiciones y contratos Mínima presencia en Proceso documentado / Uso habitual incluyendo Proactivo y brindando Colaboración con
con proveedores procesos de adquisición utilizado ad hoc gestión de respaldo proveedores
incumplimientos
Sistemas heredados Baja accesibilidad Accesibilidad limitada, Sistemas heredados Sistemas mayormente Todos los sistemas
estrategia planteada prioritarios hechos accesibles heredados hechos
accesibles accesibles
Procesos de ajustes Mínima / Reactiva Proceso básico / usado Proceso integrado Gestión activa dentro de Innovación / se
razonables ad hoc recomendado / en uso los niveles de servicio comparten mejores
habitual prácticas

WCAG
Web Content Accessibility Guidelines
WCAG 2.0, ISO/IEC 40500:2012

WCAG 1 vs. WCAG 2
• 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

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.

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

Pautas WCAG 2.0
1 Perceptible
1.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 Operable
2.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 Comprensible
3.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 Robusto
4.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ñol
Más información (en inglés): WCAG 2.0 Quick Reference List

Legislación
argentina y mundial

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/

Legislación argentina
• 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)

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)

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)

Estrategias de separación
de información,
representación y tecnología

Modelo MVC (Modelo/Vista/Controlador)
Model: HTML View: CSS Controller: Navegador
Jeff Atwood: Understanding Model-View-Controller/

Desarrollo web: Capas
Usuario
Navegador
Cliente
Dispositivo
Contenido
Flash Client
CSS JavaScript
Side
HTML
PHP, ASP, Java… Server

Base de datos Side

Tecnologías asistivas
HTML: Capas Geológicas
HTML 5 (2008-)
XHTML 1.0 / 1.1 (2000-2001)
HTML 4.0 / 4.01 (1997-1999)
HTML 3.2 (1997)
HTML 2.0 (1995)

Progressive enhancement
Navegador
Cliente
Dispositivo
Contenido
Flash Client
CSS JavaScript
Side
HTML
PHP, ASP, Java… Server

Base de datos Side

Progressive enhancement
Navegador
Dispositivo
Contenido
Flash
CSS JavaScript
HTML 5 (2008-)
XHTML 1.0 / 1.1 (2000-2001)
HTML 4.0 / 4.01 (1997-1999)
HTML 3.2 (1997)
HTML 2.0 (1995)
PHP, ASP, Java…
Base de datos

HTML: marcado semántico (o no)
Marcado semántico Marcado incorrecto

<H1>Título</H1> <P style=”size:24px”>Título</P>
<P>Párrafo</P> <P>Párrafo</P>
<OL> <P> -‐ Primer item <BR>
<LI>Primer item</LI> -‐ Segundo item</P>
<LI>Segundo item</LI>
</OL>

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

Gestión: Modelo de
Calidad por áreas

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

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.

Construyendo en equipo
“ 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…
Contenido Imagen Desarrollo Resultado
WCAG 2.0
✗
<img alt="un dibujo que
me pasaron que tiene
muchos colores" />

Construyendo en equipo
“ 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…
Contenido Imagen Desarrollo Resultado
WCAG 2.0
✔
Documentación:
Alternativa textual
de la imagen <img alt="Diagrama
Cromático de la CIE" />

Calidad por áreas
• 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.

En el primer proyecto…
Dirección Interfaz Front-end Back-end Contenidos
Stakeholders
Sponsors

Proyectos de mayor escala
Dirección Interfaz Front-end Back-end Contenidos
Stakeholders Análisis Func. HTML/CSS Arq. Software Redactores

Sponsors Dis. Interacción Templates Arq. BD Diseñadores
Arq. Información JavaScript PHP / .Net / Java Contenidistas
Dis. Interfaz XAML, Flash

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.

Areas: Presentación,
Contenidos
Interfaz, diseño
visual y multimedia
emplos de National Eye Institute, National Institutes of Health
¿Cómo ven
nuestros
usuarios?
Protanopi
Protanopia

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

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

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)

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.

Area: Tecnología
Desarrollo front-end

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.

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.

Desarrollo y testeo modular
kambrica.com/congo
input
config.php
variables.yml
components
_html
_layouts
componente1
componente2

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.

Caso de ejemplo

Diseño y desarrollo tradicional vs. diseño y desarrollo
usable y accesible
• 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
No se distingue sección activa
No se distinguen niveles de menú
...para usuarios con daltonismo...

Abuso SEO
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) representanAlt las describe
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 logo
Navegación
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 Dirección
sixty-
three rows Link Industrias Libertador S.R.L. Link Administrador de Bases de Datos Link Derqui SACIFI Link Responsable
Flash
Comercial Link “Envíe
Directorio su CV”
Telemax Linkno perceptibleLink Consultora Delcampo Link Equipe de Suporte Técnico em
Implementador
Português Link Chandra and Asociados Link Analista Programador Java Sr. slash Ssr. Link Malloc Argentina Link Auditor
Interno Semi Senior slashBloque de Grupo
Senior Link ofertas destacadas
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 Recién
Semi llegamos al buscador!
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 alt=titulo.gif
SRL Link Analista Jr. de Precios de Transferencia
Link Udaondo and Asociados Link Estudiantes avanzados o graduados de Contador Público Nacional Link Consultora
Sólo 1er Link
Cabildo categoría
Asistenteesdeperceptible
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
Títulos para
Administración left paren thirty-seven right paren Graphic espacio Ubicación colon Graphic espacio Graphic espacio
mouseover
Idiomas colon Graphic espacio Checkbox Not checked buscar empleos en el portal Ingles Checkbox Not checked buscar
alt=boton-verde.gif
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
Representación de texto realizada por Fangs – the screen reader emulator
...y de lectores de pantalla

Versión accesible: daltonismo
Visión estándar Simulación: protanopia

Versión accesible: lectores de pantalla
Marcado semántico: títulos y listas Breadcrumb accesible
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
Sólo perceptible por
lectores de pantalla
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 Categorías perceptibles

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…

Validación

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

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

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

¿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

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

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

Problemas comunes
de accesibilidad web

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

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>

Problemas comunes: Imágenes
• IMÁGENES
• Imágen sin alt o longdesc

Problemas comunes: Sopa de HTML
• Maquetación no semántica
• Encabezados <h1> a <h6> no empleados

¡Muchas gracias!
Accesibilidad desde la concepción hasta la
validación
Santiago Bustelo, Martín Szyslican
Con el apoyo de
Este obra está bajo una licencia de

Creative Commons Atribución-CompartirIgual 4.0 Internacional
Se entregarán certificados de asistencia a
aquellos que realicen todos los talleres.
Gracias! Seguinos en nuestra

comunidad local:
facebook.com/ixdalaplata
@ixdalaplata

Accesibilidadv203 Iwork09 160106021643

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Accesibilidadv203 Iwork09 160106021643

Cargado por

Copyright:

Formatos disponibles

APRENDIENDO A DISEÑAR PARA MEDIOS

Taller UX: Accesibilidad Santiago Bustelo • 1

Este obra está bajo una licencia de

Usted es libre de:

Bajo las condiciones siguientes:

• La accesibilidad Web significa que personas con algún tipo de

Taller UX: Accesibilidad Santiago Bustelo • 5

Taller UX: Accesibilidad Santiago Bustelo • 6

QUE TRATA DE LA CONDICIÓN Y EJERCICIO

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

Taller UX: Accesibilidad Santiago Bustelo • 7

QUE TRATA DE LA CONDICIÓN Y

En un lugar de la Mancha, de cuyo nombre no

Don Quijote.MP3 Don Quijote.GIF

Taller UX: Accesibilidad Santiago Bustelo • 9

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

Taller UX: Accesibilidad Santiago Bustelo • 10

Taller UX: Accesibilidad Santiago Bustelo • 11

• Argentina: 13% (5 millones de personas)

Taller UX: Accesibilidad Martín Szyszlican • 12

Foto kellyCDB (CC)

Taller UX: Accesibilidad Santiago Bustelo • 13

• Dicen que nació para médico. No sabía si empezar la carrera,

Taller UX: Accesibilidad Santiago Bustelo • 14

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

Taller UX: Accesibilidad Santiago Bustelo • 15

• Siempre tuvo facilidad para tratar con gente. Es uno de los

Taller UX: Accesibilidad Santiago Bustelo • 16

• Es Francés. Allá conoció a su mujer, Ana, que es argentina. Vinieron

Foto ecospc (CC)

Taller UX: Accesibilidad Santiago Bustelo • 17

• Personas con discapacidad

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

Taller UX: Accesibilidad Santiago Bustelo • 18

• Dentro de un proyecto no se cuenta con procesos y recursos

Taller UX: Accesibilidad Santiago Bustelo • 19

• Entender Usabilidad y Accesibilidad como atributos cualitativos:

Taller UX: Accesibilidad Santiago Bustelo • 20

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

Suerte: Formulismo: Especialidad: Estándares: Propiedad: Colaboración:

JISC TechDis (2010): Technological Maturity and Culture

Taller UX: Accesibilidad Santiago Bustelo • 21

Areas Nivel 1: Nivel 2: Nivel 3: Nivel 4: Nivel 5:

Taller UX: Accesibilidad Santiago Bustelo • 22

Taller UX: Accesibilidad Santiago Bustelo • 23

• WCAG 2 está organizado en Principios (vs. guidelines).

Taller UX: Accesibilidad Santiago Bustelo • 24

Taller UX: Accesibilidad Santiago Bustelo • 25

Taller UX: Accesibilidad Santiago Bustelo • 26

Taller UX: Accesibilidad Santiago Bustelo • 27

Taller UX: Accesibilidad Santiago Bustelo • 28

Taller UX: Accesibilidad Santiago Bustelo • 29

• Ley 26.653 de Accesibilidad de la Información en las Páginas Web

Taller UX: Accesibilidad Santiago Bustelo • 30

ARTICULO 1 — El Estado nacional, entiéndanse los tres poderes que lo

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

Taller UX: Accesibilidad Santiago Bustelo • 31

ARTICULO 7 — Las normas y requisitos de accesibilidad mencionados en

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

Taller UX: Accesibilidad Santiago Bustelo • 32

Taller UX: Accesibilidad Santiago Bustelo • 33

Model: HTML View: CSS Controller: Navegador

Jeff Atwood: Understanding Model-View-Controller/