Accesibilidad weben 5 prácticas contundentes

por Alejandro Sena

¿Quién soy?

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

Argentino, de Rosario, 1986, hincha de Newell's, sin estudios universitarios, con muchos fracasos y algunos éxitos, muy metido en la interweb desde purrete. !

DaltonismoEn 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.

News Medical: "Color Blindness Prevalence" http://www.news-medical.net/health/Color-Blindness-Prevalence.aspx

Sin daltonismo VerdeRojo

Prácticas accesiblesNo 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.

Problemas de visión246 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/

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/

Ceguera39 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/

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.

Sordera total o parcialMá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/

Prácticas accesiblesSubtí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.

Uso de la web sin manosDistintas 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).

About One Hand Typing: Statistics on Hand and Arm Loss http://www.aboutonehandtyping.com/statistics.html

* Esta información data de 1996 y no es exclusiva de personas con ambas manos amputadas.

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.

Recomendación generalAccesibilidad 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."

Muchas graciasLos 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