Este documento presenta las prácticas de accesibilidad web más importantes para personas con discapacidades visuales, auditivas y de movilidad. Describe brevemente los tipos de discapacidad y ofrece recomendaciones como usar texto alternativo para imágenes, subtítulos en videos, y diseñar sitios que sean navegables sin uso de mouse u otras herramientas. La recomendación general es que los sitios deben ser accesibles en todos los dispositivos y navegadores para beneficiar a la mayor cantidad de usuarios posible.
2. ¿Quién soy?
Argentino, de Rosario, 1986, hincha de Newell's,
sin estudios universitarios, con muchos fracasos y
algunos éxitos, muy metido en la interweb desde
purrete.
!
1997 Primer sitio web
2000 Primer sitio web online
2004 Creación de BOS Multimedios
2005 Docente de diseño web en CREARTE
2006 Arquitecto de Producto en Sónico / FNBox
2010 Líder de Producto en SocialSnack
2012 Consultor en México
2013 Trabajo y formación de equipo digital en agencia
2014 Incorporación del mismo a 5M2 para crear el área digital
3. Daltonismo
En promedio, de 5 a 8% de la población masculina y 0.5% de la
femenina sufre algún tipo de daltonismo. En el 95% de los casos
afecta los colores rojo y verde, el color menos afectado es el azul.
!
El efecto puede ser no distinguir un color, no identificar ninguno o
intercambiarlos.
Rojo Sin daltonismo Verde
News Medical: "Color Blindness Prevalence"
http://www.news-medical.net/health/Color-Blindness-Prevalence.aspx
4. Prácticas accesibles
No utilizar colores para comunicar
En formularios, evitar comunicar los campos
con error mediante color y utilizar texto en su
lugar.
!
Enlaces azules y subrayados
De preferencia, al menos no depender solo del
color para indicar los fragmentos de texto que
tienen vínculo.
!
Evitar contraste de color sobre color
Es recomendable utilizar combinaciones de
negro / blanco con color, por ejemplo, blanco
sobre azul o negro sobre verde, idealmente
negro sobre blanco.
5. Problemas de visión
246 millones de personas en el mundo tienen problemas leves de
visión. El 65% tiene más de 50 años. Con los años mejoran los
tratamientos, pero también aumenta la cantidad de adultos
mayores.
!
Los efectos van de dificultad para leer con bajo contraste hasta
casos donde es necesario aumentar la tipografía y modificar los
colores manualmente desde el navegador.
Organización Mundial de la Salud: "Ceguera y discapacidad visual"
http://www.who.int/mediacentre/factsheets/fs282/es/
6. Prácticas accesibles
• Tipografías de al menos 16 pixeles de tamaño.
• Contrastes fuertes.
• De 45 a 75 caracteres por línea. 40 a 50 si es
texto a dos columnas.
• No más de dos columnas por texto.
• Tipografía serif para textos largos.
• No utilizar imagenes que contengan texto, ya
que no pueden adaptarse.
Smashing Magazine: "For Body Copy. Anything Less Is A Costly Mistake"
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
iA: "The 100% Easy-2-Read Standard"
http://ia.net/blog/100e2r/
7. Ceguera
39 millones de personas en el mundo sufren de ceguera. El 82%
tiene más de 50 años. Con los años mejoran los tratamientos, pero
también aumenta la cantidad de adultos mayores.
!
La ceguera es el caso más utilizado cuando se habla de
accesibilidad web y para el cual existen la mayor cantidad de
prácticas aplicables.
Organización Mundial de la Salud: "Ceguera y discapacidad visual"
http://www.who.int/mediacentre/factsheets/fs282/es/
8. Prácticas accesibles
• El sitio debe poder navegarse aún sin CSS.
• Utilizar H1, H2, etc. para identificar los distintos niveles de texto.
• Evitar todo tipo de acción con mouseover.
• Los textos enlazados deben ser descriptivos como "Ir a la
siguiente página" y no "Click aquí".
• Describir las imágenes con la etiqueta ALT, para aquellas que
sean solo de decoración utilizar ALT="".
• Identificar los distintos elementos del sitio: ID en DIVs, LABEL en
formularios, meta tags completos (title, lang).
• Utilizar links internos para saltar los contenidos repetidos.
9. Sordera total o parcial
Más del 5% de la población mundial sufre algún tipo de sordera.
Esto equivale a 360 millones de personas, de las cuales alrededor
de 30 millones son niños. Más del 30% de los mayores de 65 años
sufre algún tipo de sordera.
!
La prácticas accesibles para esta discapacidad son pocas, pero
muchas veces difíciles de llevar a cabo.
Organización Mundial de la Salud: "Sordera y pérdida de la audición"
http://www.who.int/mediacentre/factsheets/fs300/es/
10. Prácticas accesibles
Subtítulos en videos
YouTube, así como otras plataformas, permiten incorporar subtítulos manualmente en
distintos idiomas luego de subir el video, diréctamente desde un panel online.
!
Transcripciones para audio
Incluir junto a los audios embebidos o descargables del sitio versiones transcriptas,
algo muy común en discursos.
11. Uso de la web sin manos
Distintas situaciones pueden llevar a una persona a estar
imposibilitado de usar sus manos para navegar. Enfermedades
como la artritis severa, problemas genéticos y amputaciones,
sobre todo este último, es más común de lo que creemos,
alcanzando las 50,000 amputaciones por año en Estados Unidos*.
!
Por lo general, las personas con esta discapacidad navegan por
reconocimiento de voz o teclas (ej: tab + enter).
* Esta información data de 1996 y no es exclusiva de personas con ambas manos amputadas.
About One Hand Typing: Statistics on Hand and Arm Loss
http://www.aboutonehandtyping.com/statistics.html
12. Prácticas accesibles
• Botones y links claros y grandes.
• Evitar contenido solo visible con mouseover.
• Favorecer los drops, checkboxes y radio buttones a campos de
texto abierto en formularios.
• Reducir la cantidad de elementos y pasos para navegar.
• Favorecer las páginas verticales con mucho contenido a
muchas páginas con poco contenido.
• Evitar los menúes que se mantienen abiertos por tiempo o se
cierran muy rápido al perder el foco.
13. Recomendación general
Accesibilidad no solo se refiere a personas con discapacidades,
sino también a la posibilidad de acceder al contenido de tu sitio
por la mayor cantidad de personas posibles.
Es por ello que un sitio que no se ve bien en móviles o en ciertos
navegadores, tampoco es accesible. Mi recomendación para
solucionar esto va en contra de lo que estamos acostumbrados:
"Diseña para móvil,
adapta para escritorio."
14. Muchas gracias
Los invito a contactarme, seguirme y leer mi blog.
!
Twitter
https://twitter.com/AlejandroSena
!
LinkedIn
http://mx.linkedin.com/in/asena
!
Blog
http://alejandrosena.com/blog/
!
E-Mail
hola@alejandrosena.com