Este documento presenta información sobre accesibilidad web para personas con discapacidad. Explica que la discapacidad puede ser congénita, adquirida o temporal y define conceptos como ayudas técnicas y accesibilidad. Detalla barreras comunes que enfrentan las personas con discapacidad al navegar sitios web y mitos sobre accesibilidad. Finalmente, ofrece recomendaciones para crear sitios web accesibles siguiendo las pautas WCAG 2.0.

1. ayutn.com.ar1
INTRODUCCIÓN
ACCESIBILIDAD EN LA WEB
Manuel Razzari
Interaction Design Foundation Bs.As, Digital House, Mayo 2017
Jornada de Tecnologías Abiertas, Universidad Nacional de José C. Paz, Mayo 2015

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

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

4. ayutn.com.ar5
VISIONES DE LA DISCAPACIDAD
La discapacidad como enfermedad:
Discriminación + paternalismo
La discapacidad como una cuestión
de derechos humanos:
Equiparación + autonomía

5. ayutn.com.ar6
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)
DISCAPACIDAD

6. ayutn.com.ar7
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.

7. ayutn.com.ar8
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.

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

9. 10 ayutn.com.ar
NAVEGAR LA WEB
con ayudas técnicas

10. 11 ayutn.com.ar
Lector de pantalla

11. 12 ayutn.com.ar
Línea braille

12. 13 ayutn.com.ar
Puntero en la cabeza

13. 14 ayutn.com.ar
Pulsador

14. 15 ayutn.com.ar
Switch por soplido

15. 16 ayutn.com.ar
Teclado en pantalla

16. 17 ayutn.com.ar
Lupa de pantalla

17. 18 ayutn.com.ar
Reconocimiento de voz

18. 19 ayutn.com.ar
Modo alto contraste

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

20. ayutn.com.ar21
ACCESIBILIDAD WEB
Crear sitios web para que puedan usarlos
plenamente personas con alguna discapacidad.
● Congénita
● Adquirida
● Temporal

21. 22 ayutn.com.ar
POR QUÉ NOS IMPORTA
Hacer mucho, con poco.

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

23. ayutn.com.ar24
NOSOTROS MISMOS
● Dependencia de la web
● Accidentes
● Envejecimiento

24. ayutn.com.ar25
ENVEJECIMIENTO
DE LA POBLACIÓN
Población de más de 60 años (mundo)
●
1950: 8%
●
1975: 9%
●
2000: 10%
●
2025: 15%

25. ayutn.com.ar26
LA LEY 26.653
● Entidades estatales
● No gubernamentales (ej. universidades)
● Proveedores del estado
● Pero no sólo web! (ej. banco que paga sueldos)
● Responsabilidad Social Empresaria
http://www.boletinoficial.gov.ar/Inicio/Index.castle?s=01&idAviso=10510022&IdRubro=441&f=20140820

26. 27 ayutn.com.ar
ALGUNOS EJEMPLOS
¡Al fin!

27. ayutn.com.ar28
BUSQUEMOS TRABAJO

28. ayutn.com.ar29
BUSQUEMOS TRABAJO

29. ayutn.com.ar30
BUSQUEMOS TRABAJO

30. 31 ayutn.com.ar
DOS GATITOS PRECIOSOS
https://github.com/mercadolibre/chico/issues/632
<strong class="price">
$700⁰⁰
</strong>

31. ayutn.com.ar32
DEPENDENCIA DEL COLOR
WCAG: http://goo.gl/dZOCK

32. ayutn.com.ar33 http://wearecolorblind.com/example/bbc-online-football-tables/

33. ayutn.com.ar34
DEPENDENCIA DEL COLOR
http://wearecolorblind.com/example/google-analytics

34. ayutn.com.ar35
CONTRASTE

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

36. ayutn.com.ar37
LÍMITE DE TIEMPO

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

38. 39 ayutn.com.ar
MITOS

39. ayutn.com.ar40
“NO LES VENDO A ELLOS”

40. ayutn.com.ar41
VERSIÓN SÓLO TEXTO

41. ayutn.com.ar42
VERSIÓN SÓLO TEXTO

42. ayutn.com.ar43
PERSONALIZACIÓN POR SITIO
programaraciegas.net/?p=178

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

44. ayutn.com.ar45
“ES SÓLO PARA PERSONAS
CON DISCAPACIDAD”
● Discapacidad temporal, situacional
● Resignificación / reapropiación

45. 46 ayutn.com.ar
ENTONCES…
¿Cómo hacemos?

46. ayutn.com.ar47
HERRAMIENTAS DE VALIDACIÓN
● Examinator.ws
● TAWdis.net
● WAVE.webaim.org
● HTML_CodeSniffer
● Tenon.io

47. ayutn.com.ar48
¡NO SIEMPRE FUNCIONAN!
<img src="banner.gif" width="100" height="50" alt="calendario-2015" />
http://www.msal.gov.ar/ Mayo 2015

48. 49 ayutn.com.ar
MAQUETADOR WEB
Probar como lo haría alguien con discapacidad.
+
Paso 1: Incluir lector de pantalla y teclado en la matriz de pruebas.
+
http://www.ssa.gov/espanol/accesibilidad/teclado_nav.html
http://accesibilidadweb.dlsi.ua.es/?menu=nvda

49. 50 ayutn.com.ar
NO EMPEZAR
DE CERO

50. ayutn.com.ar51
GESTOR DE CONTENIDO
●
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

51. ayutn.com.ar52
COMPONENTES ACCESIBLES
●
Probarlo en nuestros browsers objetivo
●
Puedo usarlo con el teclado
●
Escalable (text zoom)
●
Si hay links, que apunten a una URL
●
¿Dice ser accesible? WAI-ARIA.
●
Librerías: jQuery UI, dojo toolkit, OpenAjax
●
Frameworks front-end: Bootstrap 3

52. 53 ayutn.com.ar
WCAG 2.0
Pautas de Accesibilidad
para el Contenido Web,
versión 2.0
http://www.sidar.org/traducciones/wcag20/es/

53. ayutn.com.ar54
WCAG 2.0
www.sidar.org/traducciones/wcag20/es/
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

54. ayutn.com.ar55
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.

55. ayutn.com.ar56
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.

56. ¡MUCHAS GRACIAS!
@mrazzari
http://goo.gl/P22QQd