Your SlideShare is downloading. ×
Incorporando accesibilidad en el proceso de desarrollo de software y sitios web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Incorporando accesibilidad en el proceso de desarrollo de software y sitios web

868
views

Published on

La Accesibilidad es un atributo cualitativo que depende del eslabón más débil del proceso de construcción del software o sitio web. En este proceso colaboran profesionales de diseño, desarrollo y …

La Accesibilidad es un atributo cualitativo que depende del eslabón más débil del proceso de construcción del software o sitio web. En este proceso colaboran profesionales de diseño, desarrollo y producción de contenidos, con visiones no siempre compatibles.

Se presentan guías, modelos y ejemplos para que equipos de trabajo establecidos puedan atender a la accesibilidad como requerimiento, permitiendo a cada rol involucrado:

- compartir una visión con el resto de las áreas,
- entender el alcance y responsabilidad de cada área,
- resolver los aspectos cualitativos que le corresponden,
- verificar su propio cumplimiento de dichos aspectos,
- entender, respetar y mantener la calidad lograda por las otras áreas.

La presentación ofrece conocimientos nuevos a profesionales sin experiencia previa en accesibilidad, y un modelo de proceso para que profesionales iniciados en la problemática puedan alinear a sus compañeros de trabajo.


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo Incorporando Accesibilidad en el proceso de desarrollo de software y sitios web Santiago Bustelo, Kambrica • IxDA BA @sbustelo MEMBER Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar
  • 2. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 1. El problema • Por partes hasta llegar al fondo 2. El largo camino a la solución • Usabilidad y Accesibilidad, atributos cualitativos • Modelo de Calidad por áreas • Recomendaciones para cada área 3. Sobre atajos y parches Qué vamos a ver:
  • 3. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER • No vamos a ver… • Balas de plata • Cómo continuar haciendo lo mismo y lograr resultados diferentes • A quién echarle la culpa Alineando expectativas
  • 4. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Problema: domar la accesibilidad Ilustración: WallPaperDisk.com
  • 5. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Lo que nos piden que logremos Ilustración: DesktopNexus.com
  • 6. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Información × Representación × Tecnología = Resultado final ≈ Contenido ≈ Diseño ≈ Desarrollo Las partes del problema
  • 7. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Información vs. representación 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 famoso OficioA4
  • 8. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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
  • 9. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Información atada a una representación Don Quijote.GIFDon Quijote.MP3
  • 10. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER • Nuestros 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 y que no les corresponde, como resultado de no haber hecho bien nuestro trabajo. • Hacerlo bien, que no es fácil, nos define como profesionales, nos enorgullece y ennoblece. Autocrítica despiadada
  • 11. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Usuarios ≉ Para quién trabajamos Requerimientos Entregables Cliente Desarrollador Diseñador Contenidista
  • 12. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER “Esa manga de inútiles”“Esos cretinos” ¿Cómo trabajamos?
  • 13. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER ¿Cómo trabajamos? Interlocutor del equipo Desarrolladores Diseñadores Contenidistas Requerimientos Entregables Interlocutor del cliente Stakeholders Sponsors
  • 14. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER ¿Para quién trabajamos? Burbuja del Proyecto Se rompe una vez finalizado el proyecto Usuarios finales Operan todos los días el producto del proyecto finalizado Mundo real Producto
  • 15. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Problema: domar la accesibilidad El problema de fondo: Nuestro producto no satisface a nuestros usuarios
  • 16. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Inés, Contadora (73 años) • 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, Inés 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 Inés 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”.
  • 17. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Pablo, Estudiante (26) • 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 e Hiperactividad. Pablo 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 Pablo, 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”.
  • 18. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Diana, Periodista (23) • 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. • Es capaz de leer los labios y comunicarse verbalmente, aunque para quienes recién la conocen puede ser difícil entenderla. 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 Diana 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”.
  • 19. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Claudio, Representante (32) • 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 Claudio 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 Claudio 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!”
  • 20. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Philippe, Ingeniero (27) • Es Francés. Allá conoció a su mujer, Ana, que es argentina. Vineron 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. Ello no lo inhabilita para manejar, porque puede ubicar las luces del semáforo por posición, pero sí para identificar en un formulario 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)
  • 21. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER ¿Cómo nos llegan los requerimientos de los usuarios? • Dentro de nuestro proyecto no solemos tener procesos y recursos adecuados para incorporar todos los casos. • Nuestras decisiones impactan, de forma positiva o negativa, en el acceso a la información y capacidad productiva de millones de personas. • 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.
  • 22. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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
  • 23. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 24. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER El largo camino a la solución Ilustración: JohnnySlowhand
  • 25. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER ¿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.
  • 26. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER JISC TechDis: Technological Maturity and Culture • Mejorar nuestros procesos lleva tiempo y se logra paso a paso, proyecto a proyecto. • En el camino, muchas veces tendremos que tomar atajos. Distinguir parche de solución. Modelos de madurez
  • 27. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Modelo de Calidad por áreas
  • 28. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER ¿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)
  • 29. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER ¿Cómo determinamos la Calidad? • “Si no medimos, no hay calidad. Punto y aparte” (Sebastián Fernández Quezada, Keikendo) • “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei) • Emplear siempre la misma métrica para la misma cosa. • Implementar métricas y herramientas adecuadas, probadas y consistentes, conociendo y observando sus limitaciones. • No existen métricas ni herramientas perfectas. No es excusa. • 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.
  • 30. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Métrica binaria WCAG 2.0 ✗ WCAG 2.0 ✔
  • 31. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Métrica binaria
  • 32. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Construyendo paso a paso 1.  A=0 1.  A=0 2.  B=1 1.  A=0 2.  B=1 3.  C=B/A 1.  A=10 2.  B=1 3.  C=B/A
  • 33. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER WCAG 2.0 ✗ Construyendo en equipo Contenido Desarrollo “ 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… <img  alt="un  dibujo  que   me  pasaron  que  tiene   muchos  colores"  /> ResultadoImagen
  • 34. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER WCAG 2.0 ✔ Construyendo en equipo Contenido Desarrollo “ 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… <img  alt="Diagrama   Cromático  de  la  CIE"  /> ResultadoImagen Documentación: Alternativa textual de la imagen
  • 35. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Equipo sin interlocutores Arq. Software Stakeholder JavaScript Sponsor Cuñado Arq. Bases de Datos PHP Redactor Colado Analista HTML
  • 36. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 37. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER En el primer proyecto… Interfaz Front-end Back-end ContenidosDirección Stakeholders Sponsors
  • 38. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Proyectos de mayor escala Redactores Diseñadores Contenidistas Análisis Func. Dis. Interacción Arq. Información Dis. Interfaz HTML/CSS Templates JavaScript XAML, Flash Arq. Software Arq. BD PHP / .Net / Java Stakeholders Sponsors Interfaz Front-end Back-end ContenidosDirección
  • 39. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 40. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Area: Dirección
  • 41. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Asumir el rol • Al igual que los miembros del equipo, los sponsors y stakeholders no son el usuario durante la extensión del proyecto. • Designar un único interlocutor representante de todos los stakeholders, con autoridad para tomar decisiones.
  • 42. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 1er proyecto: Reducir riesgos • Son muchas variables. Reducir las variables en juego. Trabajar con equipo, metodología, etc. ya conocidos. • Cambio cultural. Tomar un proyecto con la menor cantidad de impedimentos. • Escala: Empezar con un proyecto y equipo chicos. Agile: un proyecto grande son muchos proyectitos.
  • 43. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Despejar obstáculos • Visión • No podemos “intentar” accesibilidad. Cada paso en el camino debe ser un paso hacia adelante. Lo contrario es desperdicio. • Recursos • Incorporar accesibilidad es una extensión del alcance. • No es posible satisfacerla sin capacitar a los recursos y darles tiempo para poder desarrollar nuevas capacidades. • Tiempo • Hacer las cosas bien lleva tiempo. Hacerlas bien la primera vez lleva más tiempo. Sincerar los desvíos pasados.
  • 44. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Area: Tecnología Desarrollo back-end
  • 45. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Arquitectura de Software • La tecnología escogida debe asegurar accesibilidad dentro de la metodología y recursos definidos para el proyecto. • Preferir con pasión modelos MVC que permitan: • desarrollar la interfaz empleando HTML estándar, • implementarla como templates. • No aceptar código HTML/CSS/JavaScript generado automáticamente sin evaluarlo ni saber cómo funciona. • Aplicar recomendaciones de Yahoo Exceptional Performance. • URLs deben permitan función “volver” del navegador.
  • 46. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Humanizar la tecnología • Declarar en el código el idioma del contenido. • Prever mecanismos para presentación humana de información: • Evitar “0 resultados”, tablas sin filas y otras consecuencias de iteradores nulos. • Evitar “1 errores” soportando variación de género y número en textos dirigidos al usuario. • Arquitectura de Base de Datos: • Debe ser posible buscar desde un campo de texto libre, no sensible a mayúsculas/minúsculas, acentos, etc. • BD NO DEBE IMPONER CONTENIDO EN MAYUSCULAS. • Sistema de mailing debe informar al destinatario el email desde el que está suscripto, permitiéndole darse de baja desde la dirección correcta.
  • 47. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Area: Contenidos Producción de textos
  • 48. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Información vs. manifestación “ Por la presente solicito un anticipo a cuenta de mi pensión,de acuerdo con la Ley 31/1990(27/dic),art.47.Adjunto el formulario CPA/2 completado y firmado para ejercer este derecho. “ A quien corresponda: Habiéndose informado previamente al interesado por los canales oficiales de la posibilidad de solicitar de antemano la cuenta de la pensión que le fuere reconocida en su momento, de acuerdo con lo que dispone el artículo 47 de la Ley 31/1990 aprobada el 27 de diciembre del año mencionado, el funcionario suscribiente desea acogerse al citado derecho, para lo cual, conforme a los procedimientos oportunamente establecidos, ha completado y firmado el formulario CPA/2 que se entrega adjunto a la presente solicitud.
  • 49. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Información: el punto justo Indexed: Needles and haystacks and such.
  • 50. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Medida de complejidad del texto • En inglés: • Flesch–Kincaid: 0-100 (muy difícil ➔ muy fácil) • Gunning fog, SMOG: Nivel de escolaridad • En castellano: • Fernández Huerta: 0-100 (muy difícil ➔ muy fácil) • INFLESZ (Artículo, Herramienta): Nivel de dificultad • Hay mucho por hacer en nuestra lengua, y también malas implementaciones. Someter las herramientas a prueba.
  • 51. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Readability index calculator: ✗ no pasa la prueba “ Por la presente solicito un anticipo a cuenta de mi pensión,de acuerdo con la Ley 31/1990(27/dic),art.47.Adjunto el formulario CPA/2 completado y firmado para ejercer este derecho. Fernandez-Huerta score: 57 (Fairly Difficult) “ A quien corresponda: Habiéndose informado previamente al interesado por los canales oficiales de la posibilidad de solicitar de antemano la cuenta de la pensión que le fuere reconocida en su momento, de acuerdo con lo que dispone el artículo 47 de la Ley 31/1990 aprobada el 27 de diciembre del año mencionado, el funcionario suscribiente desea acogerse al citado derecho, para lo cual, conforme a los procedimientos oportunamente establecidos, ha completado y firmado el formulario CPA/2 que se entrega adjunto a la presente solicitud. Fernandez-Huerta score: 69 (Normal)
  • 52. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER INFLESZ 1.0: ✔ consistente “ Por la presente solicito un anticipo a cuenta de mi pensión,de acuerdo con la Ley 31/1990(27/dic),art.47.Adjunto el formulario CPA/2 completado y firmado para ejercer este derecho. Grado Escala Inflesz: Bastante Fácil Indice Fernandez-Huerta: 79.44 “ Aquien corresponda: Habiéndose informado previamente al interesado por los canales oficiales de la posibilidad de solicitar de antemano la cuenta de la pensión que le fuere reconocida en su momento, de acuerdo con lo que dispone el artículo 47 de la Ley 31/1990 aprobada el 27 de diciembre del año mencionado, el funcionario suscribiente desea acogerse al citado derecho, para lo cual, conforme a los procedimientos oportunamente establecidos, ha completado y firmado el formulario CPA/2 que se entrega adjunto a la presente solicitud. Grado Escala Inflesz: Muy difícil Indice Fernandez-Huerta: 27.75
  • 53. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Reglas de estilo • Guillermo Franco: Cómo escribir para la web (PDF gratuito) • Jakob Nielsen: Writing for the web
  • 54. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Lo esencial • Contenido conciso, objetivo, escaneable. • Nivel de lectura / escolaridad accesible. • Cuidado con técnicas SEO que prometen más visitas, a costa de perderlas debido a contenido retorcido. • 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í”. • Si usamos un CMS, somos responsables del código semántico del contenido: uso de títulos, listas, alt,  title…
  • 55. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Areas: Presentación, Contenidos Interfaz, diseño visual y multimedia
  • 56. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Protanopia Protanopia EjemplosdeNationalEyeInstitute,NationalInstitutesofHealth ¿Cómo ven nuestros usuarios?
  • 57. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER DanKam: Realidad aumentada para daltónicos
  • 58. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Protanopia Imagen original Visión normal Imagen original Simulación protanopia Imagen DanKam Visión normal Imagen DanKam Simulación protanopia
  • 59. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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).
  • 60. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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í”.
  • 61. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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)
  • 62. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 63. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Area: Presentación Diseño de la interfaz
  • 64. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Nivel de representación: específica / universal / críptica UX Magazine: Realism in UI design
  • 65. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Diseño modular de la interfaz Nathan Curtis: Modularity & Design Hierarchy
  • 66. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Accesibilidad en la representación • Investigar nuevas posibilidades tecnológicas (ej. @font-face, efectos CSS3) que eviten tener que implementar texto como imagen. • Emplear redundancia en elementos de operación para no depender de un único atributo que puede no ser percibido. Ej.: links en color y subrayados, campos requeridos señalados con color y texto.
  • 67. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Accesibilidad en la operación • CAPTCHAs: como imagen y sonido. Considerar siempre primero otras alternativas, dado que son muy, muy problemáticos. • Toda la interfaz debe ser operable con el teclado. • Considerar que usuarios con discapacidades necesitan mucho más tiempo que los demás para completar tareas. • Navegacion y operación predecibles y consistentes. Todo cambio de contexto debe ser iniciado por el usuario. • Diseñar la operación de forma que permita evitar errores y resolver de forma sencilla los que ocurran.
  • 68. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Area: Tecnología Desarrollo front-end
  • 69. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 70. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 71. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Desarrollo y testeo modular icograma.com/congo input config.php variables.yml components _html _layouts componente1 componente2
  • 72. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER 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.
  • 73. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Parche ≠ Solución Foto: LA NACION / Emiliano Lasalvia
  • 74. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Parches • Se realizan contra reloj con recursos existentes. El aprendizaje es limitado, imposible o negativo. • Mantenimiento tiende a infinito. • La gerencia ya no nos cree: como leer código es más difícil que escribirlo, solemos querer reescribir lo que funciona, algo que nunca debe hacerse (Joel Spolsky). • El código “descartable” prevalece (Big Ball of Mud).
  • 75. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Big Ball of Mud (aka Shantytowns) • Trabajo reactivo sobre lo evidente e inmediato, poco o ningún planeamiento e infraestructura. • Cada cambio “local” tiene consecuencias globales, obliga a repasar desarrollo previo. • Se acumulan incertidumbres que explotan tardíamente. • Cada vez más difícil lograr escalabilidad, performance, mantenibilidad.
  • 76. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Principio de Pareto • El 80% de los resultados proviene del 20% de las causas. • Descartar o ignorar el resto.
  • 77. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Algunos parches comunes • Versión accesible separada, accediendo misma DB • En algunos casos, es o puede ser el principio de la construcción de una solución válida. • Salsa tártara sobre código spaghetti • Versión accesible separada, estática • Para sitios o secciones institucionales • Requiere documentación visible por quienes en el futuro realicen revisiones o actualizaciones del sitio principal.
  • 78. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Bonus Track Foto: IGN.com
  • 79. 2011 Buenos Aires Día de la UsabilidadDía de la Usabilidad Organizado por el Movimiento de Diseño Inclusivo MEMBER Para empezar a andar el camino mañana a la mañana Business Taskforce on Accessible Technology: Accessibility Maturity Model self-assessment