Introducción a la Accesibilidad en el contexto de la creación y uso de sistemas y aplicaciones. Qué son y para qué sirven las ayudas técnicas. Cómo las personas con discapacidad usan computadoras y móviles. En qué consisten las soluciones y procesos. Estrategias, herramientas y metodologías, para lograr sistemas accesibles y su implementación.

1. Introducción a Experiencias de
Usuarios & Política Pública

2. Accesibilidad web e Inclusión Social
MANUEL RAZZARI (@mrazzari)
Co-fundador de Con Vista Al Mar, estudio de diseño de interfaces.
Licenciado en Tecnología Multimedial, trabaja en accesibilidad
desde 2002. IxDA Local Leader y co-fundador del Movimiento de
Diseño Inclusivo, dedicado al apoyo y difusión de iniciativas sobre
estas temáticas. Profesor en la Diplomatura en Accesibilidad y
Usabilidad de UTN Buenos Aires. Co-autor del libro “Pioneros y
Hacedores - Fundamentos y Casos de Diseño de Interacción con
estándares de Accesibilidad y Usabilidad”.

4. 4
TEMARIO
● Discapacidad
● Cómo navegan la Web personas c/discapacidad
● Barreras que encuentran
● Mitos de la accesibilidad
● Como hacer Web accesible

5. 5
SITUACIONES DE DISCAPACIDAD
●
Ceguera, baja visión, percepción de colores.
●
Sordera o hipoacusia.
●
Discapacidades motrices.
●
Discapacidades intelectuales.
●
Discapacidades del lenguaje.
●
Viscerales

6. 6
VISIONES DE LA DISCAPACIDAD
Como enfermedad:
Discriminación + paternalismo
Como una cuestión de derechos humanos:
Equiparación + autonomía

7. 7
Resulta de la interacción entre
●
las personas con deficiencias y
●
las barreras debidas a la actitud y al entorno
que evitan su participación plena y efectiva en
la sociedad, en igualdad de condiciones con
las demás.
(De la definición de la ONU, 2001)
DISCAPACIDAD

8. 8
AYUDAS TÉCNICAS
Elemento, pieza de equipo o producto ya sea común
del mercado, adaptado o especial que es usado para
incrementar, mantener o mejorar las capacidades
funcionales de personas con discapacidad.

9. 9
ACCESIBILIDAD
Un lugar físico, transporte o información es
accesible cuando todas las personas tienen
técnicamente igual posibilidad de acceso y uso de
los mismos, tengan o no discapacidad o limitación.

10. 10
ACHICANDO LA BRECHA
Accesibilidad Demandas y expectativas de la sociedad
brecha
Ayudas técnicas Capacidades / habilidades de la persona

11. 11
NAVEGAR LA WEB
con ayudas técnicas

12. 12
Lector de pantalla

13. 13
Línea braille

14. 14
Puntero en la cabeza

15. 15
Pulsador

16. 16
Switch por soplido

17. 17
Teclado en pantalla

18. 18
Lupa de pantalla

19. 19
Reconocimiento de voz

20. 20
Modo alto contraste

21. 21
ACHICANDO LA BRECHA
Accesibilidad Responsabilidad del creador del sitio Web
brecha
Ayudas técnicas Aumentan las capacidades de las personas

22. 22
ACCESIBILIDAD WEB
Crear sitios web para que puedan usarlos
plenamente personas con alguna discapacidad.
● Congénita
● Adquirida
● Temporal
● Situacional

23. 23
https://www.microsoft.com/en-us/design/inclusive Traducido por @edumerco

24. 24
POR QUÉ NOS IMPORTA
Hacer mucho, con poco.

25. 25
EQUIPARACIÓN + AUTONOMÍA
● Igual oportunidad
● Vida independiente
● Acceso antes impensable
● Comunicación (mail, noticias, redes sociales)
● Compras, pagos, trámites, trabajo
● La web!

26. 26
NOSOTROS MISMOS
● Dependencia de la web
● Accidentes y enfermedades
● Envejecimiento

27. 27
ENVEJECIMIENTO
DE LA POBLACIÓN
Población de más de 60 años (mundo)
●
1950: 8%
●
1975: 9%
●
2000: 10%
●
2025: 15%
●
2050: 21%
https://esa.un.org/unpd/wpp/

28. 28
LA LEY 26.653
● Entidades estatales
● No gubernamentales (ej. universidades)
● Proveedores del estado, concesionarios
¡Pero no sólo de web! (ej. banco paga sueldos)
● Instituciones civiles que reciban subsidios
Ley: http://servicios.infoleg.gob.ar/infolegInternet/anexos/175000-179999/175694/norma.htm
Reglamentación: https://www.boletinoficial.gob.ar/#!DetalleNormaBusquedaRapida/110631/20140820/26.653

29. 29
ALGUNOS EJEMPLOS
¡Al fin!

30. 30
BUSQUEMOS TRABAJO

31. 31
BUSQUEMOS TRABAJO

32. 32
BUSQUEMOS TRABAJO

33. 33
DOS GATITOS PRECIOSOS
2012 – 2017: https://github.com/mercadolibre/chico/issues/632
<strong class="price">
$700⁰⁰
</strong>

34. 34
DEPENDENCIA DEL COLOR
WCAG: http://goo.gl/dZOCK

35. 35 http://wearecolorblind.com/example/bbc-online-football-tables/

36. 36
CONTRASTE
https://contrastchecker.com/

37. 37
TITULADO DE LAS PÁGINAS
http://www.deyalexander.com.au/publications/page-titles.html

38. 38
LÍMITE DE TIEMPO

39. 39
DESTELLOS
685 chicos internados en Japón, 1997 http://en.wikipedia.org/wiki/Dennō_Senshi_Porygon

40. 40
MITOS

41. 41
Foto: @juane_rambosio

42. 42

43. 43
VERSIÓN SÓLO TEXTO

44. 44
“NO LES VENDO A ELLOS”

45. 45
PERSONALIZACIÓN POR SITIO
programaraciegas.net/?p=178

46. 46
“ES SÓLO PARA PERSONAS
CON DISCAPACIDAD”
● Mejores prácticas
● Usabilidad
● Rendimiento
● Independencia del dispositivo
● Posicionamiento en buscadores

47. 47
“ES SÓLO PARA PERSONAS
CON DISCAPACIDAD”
Discapacidad temporal, situacional

48. 48
“ES SÓLO PARA PERSONAS
CON DISCAPACIDAD”
Resignificación / reapropiación / inspiración

49. 49
ENTONCES…
¿Cómo hacemos?

50. 50
HERRAMIENTAS DE VALIDACIÓN
● Examinator.ws
● TAWdis.net
● WAVE.webaim.org
● HTML_CodeSniffer
● Axe dev tools
● tota11y
● SiteImprove

51. 51
¡NO SIRVEN PARA TODO!
<img src="banner.gif" width="100" height="50" alt="calendario-2015" />
http://www.msal.gov.ar/ Mayo 2015

52. 52
MAQUETADOR WEB
Probar como lo haría alguien con discapacidad.
+
+
http://www.ssa.gov/espanol/accesibilidad/teclado_nav.html
http://accesibilidadweb.dlsi.ua.es/?menu=nvda

53. 53
NO EMPEZAR
DE CERO

54. 54
GESTOR DE CONTENIDO
●
CMS y RTE que genere HTML válido
●
Diálogos para texto alt y marcado semántico
●
Plantillas que separen lógica de HTML
●
Lenguajes, frameworks y sus comunidades

55. 55
COMPONENTES ACCESIBLES
●
Puedo usarlo con el teclado
●
Escalable (text zoom)
●
Si hay links, que apunten a una URL
●
¿Dice ser accesible? WAI-ARIA.
●
Frameworks front-end: Bootstrap 3.3.1+

56. 56
WCAG 2.0
Pautas de Accesibilidad
para el Contenido Web,
versión 2.0
http://www.sidar.org/traducciones/wcag20/es/

57. 57
WCAG 2.0
Perceptible
1.1 Alternativas textuales
1.2 Medios tempo-dependientes
1.3 Adaptable
1.4 Distinguible
Operable
2.1 Accesible por teclado
2.2 Tiempo suficiente
2.3 Convulsiones
2.4 Navegable
Comprensible
3.1 Legible
3.2 Perceptible
3.3 Entrada de datos asistida
Robusto
4.1 Compatible
Pautas (12) Nivel A (25 criterios) Nivel AA (13) Nivel AAA (23)
Ley 26.653

58. 58
POR QUÉ
● Manual de accesibilidad
● Ahorra tiempo de pruebas
● Cubre casos que no podemos probar
● La ley
● Más específico y formalmente verificable
que WCAG 1.0.

59. 59
PARA CERRAR
● Accesible: para todos, cada vez más.
● No empezar de cero.
● Las herramientas automáticas son una guía,
no “palabra santa”.
● Probar con teclado y NVDA.

60. ¿PREGUNTAS?

61. ¡ GRACIAS !
@ixdaba / @ixdalaplata
@BuenosAires_LAB