ayutn.com.ar1

INTRODUCCIÓNACCESIBILIDAD EN LA WEB

Manuel Razzari

Jornada de Tecnologías Abiertas, Universidad Nacional de José C. Paz, Mayo 2015

ayutn.com.ar2

TEMARIO

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

ayutn.com.ar3

LA WEB ABIERTA

La web como medio nos da la posibilidad de:● Publicar contenidos y aplicaciones.● Implementar lenguajes usados por autores.● Acceder a estos contenidos, en cualquier

navegador o dispositivo, sin censura, con derecho a la privacidad, sin importar capacidades de la persona.

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

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

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

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.

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.

ayutn.com.ar9

ACHICANDO LA BRECHA

Accesibilidad Demandas y expectativas de la sociedad

brecha

Ayudas técnicas Capacidades / habilidades de la persona

10 ayutn.com.ar

NAVEGAR LA WEBcon ayudas técnicas

11 ayutn.com.ar Lector de pantalla

12 ayutn.com.ar Línea braille

13 ayutn.com.ar Puntero en la cabeza

14 ayutn.com.ar Pulsador

15 ayutn.com.ar Switch por soplido

16 ayutn.com.ar Teclado en pantalla

17 ayutn.com.ar Lupa de pantalla

18 ayutn.com.ar Reconocimiento de voz

19 ayutn.com.ar Modo alto contraste

ayutn.com.ar20

ACHICANDO LA BRECHA

Accesibilidad Responsabilidad del creador del sitio Web

brecha

Ayudas técnicas Aumentan las capacidades de las personas

ayutn.com.ar21

ACCESIBILIDAD WEB

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

22 ayutn.com.ar

POR QUÉ NOS IMPORTAHacer mucho, con poco.

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!

ayutn.com.ar24

NOSOTROS MISMOS

● Dependencia de la web● Accidentes● Envejecimiento

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%

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

27 ayutn.com.ar

ALGUNOS EJEMPLOS¡Al fin!

ayutn.com.ar28

BUSQUEMOS TRABAJO

ayutn.com.ar29

BUSQUEMOS TRABAJO

30 ayutn.com.ar

DOS GATITOS PRECIOSOS

https://github.com/mercadolibre/chico/issues/632

<strong class="price"> $700⁰⁰</strong>

ayutn.com.ar31

DEPENDENCIA DEL COLOR

WCAG: http://goo.gl/dZOCK

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

ayutn.com.ar33

DEPENDENCIA DEL COLOR

http://wearecolorblind.com/example/google-analytics

ayutn.com.ar34

CONTRASTE

ayutn.com.ar35

TITULADO DE LAS PÁGINAS

http://www.deyalexander.com.au/publications/page-titles.html

ayutn.com.ar36

LÍMITE DE TIEMPO

ayutn.com.ar37

ANTESBien.

DESPUÉSMal.

ayutn.com.ar38

DESTELLOS

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

39 ayutn.com.ar

MITOS

ayutn.com.ar40

“NO LES VENDO A ELLOS”

ayutn.com.ar41

VERSIÓN SÓLO TEXTO

ayutn.com.ar42

VERSIÓN SÓLO TEXTO

ayutn.com.ar43

PERSONALIZACIÓN POR SITIO

programaraciegas.net/?p=178

ayutn.com.ar44

“ES SÓLO PARA PERSONAS CON DISCAPACIDAD”

● Mejores prácticas● Usabilidad● Rendimiento● Independencia del dispositivo● Posicionamiento en buscadores

ayutn.com.ar45

“ES SÓLO PARA PERSONAS CON DISCAPACIDAD”

● Discapacidad temporal, situacional● Resignificación / reapropiación

46 ayutn.com.ar

ENTONCES…¿Cómo hacemos?

ayutn.com.ar47

HERRAMIENTAS DE VALIDACIÓN

● Examinator.ws● TAWdis.net● WAVE.webaim.org● HTML_CodeSniffer● Tenon.io

ayutn.com.ar48

¡NO SIEMPRE FUNCIONAN!

<img src="banner.gif" width="100" height="50" alt="calendario-2015" />

http://www.msal.gov.ar/ Mayo 2015

49 ayutn.com.ar

MAQUETADOR WEBProbar 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.htmlhttp://accesibilidadweb.dlsi.ua.es/?menu=nvda

50 ayutn.com.ar

NO EMPEZAR DE CERO

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

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

53 ayutn.com.ar

WCAG 2.0Pautas de Accesibilidad para el Contenido Web,

versión 2.0

http://www.sidar.org/traducciones/wcag20/es/

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

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.

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.

¡MUCHAS GRACIAS!@mrazzari

http://goo.gl/P22QQd