Escuchaste hablar de accesibilidad web? De sitios web accesibles? Seguramente algo ya escuchaste.. O estuviste leyendo un poco!!

Hacer un sitio web accesible implica que cualquier persona puede acceder al CONTENIDO de una web, más allá que la persona usuaria tenga una discapacidad visual, motriz, auditiva, etc.

Muchas de las web que accedemos diariamente su contenido no es accesible para cualquier persona, puede ser que su diseño sea muy poco accesible o la manera en qué está programada no ayude a la misma.

Para mi la accesibilidad es uno de los pilares de UX más interesantes y que con algunas buenas prácticas podemos mejorarla un MONTÓN y aportar mucho más VALOR al usuario y al negocio!! y  para nosotros cómo diseñadores nos ayuda a ser mejores profesionales 🙂

En general cuándo se diseña y desarrolla un sitio no se tiene en cuenta a un graaan número de personas que por ejemplo, no pueden leer textos pequeños, o que tienen algún grado de daltonismo y no puede distinguir contrastes bajos, o gente no vidente que usa lectores de pantalla para acceder al contenido, puede ser que  la discapacidad sea permanente o temporaria. Una discapacidad temporaria puede ser por ejemplo que no pueda usar el mouse porque se quebró la mano y tenga que navegar la web a través del teclado.

Con buenas prácticas en el diseño y desarrollo web podemos hacer nuestra web o la de nuestros clientes MUCHO más accesible para poder incluir a ese gran número de personas  #inclusión

 

Criterios de accesibilidad

Hay distintos criterios de accesibilidad que un sitio web puede tener, dependiendo del país son las normativas que hay que cumplir, está el nivel A, AA y AAA. 

La mayoría de los sitios que son accesibles cumplen los criterios AA.

En algunos países es obligatorio el criterio más alto que es AAA, en Argentina es obligatorio el nivel AA para los sitios que dependen del Estado, para los sitios comerciales no hay ninguna ley o regularización.

La idea es en este post hacer un mini resumen de algunos puntos a tener en cuenta, después iré voy a ir profundizando con algunos en particulares!! 🙂

Estos criterios fueron extraídos de la W3C (World Wide Web Consortium, comité que se dedica a implementar tecnologías uniformes en el uso y desarrollo de Internet.), acá les dejo el link del check list original: https://www.w3.org/WAI/eval/preliminary.html

 

Peeero antes de empezar con el checklist hay que destacar que para que un sitio sea accesible, hay varios roles que entran en juego, el diseñador, el desarrollador, el contenidista y el data entry, uno como diseñador puede diseñar un sitio accesible, usable, organizado, buenos contrastes, buen diseño de la arquitectura, etc, pero si luego el encargado de crear el contenido no tiene en cuenta las pautas para que ese contenido sea accesible, por ejemplo un video sin subtítulos, el contenido del mismo va a dejar de ser accesible para una persona con problemas auditivos. Lo que pienso es que la accesibilidad debe ser un MINDSET de todos los que metan mano en la web.

 

EL factor MÁS importante y el que da el puntapié, es el diseño y el contenido del sitio, como está organizada la navegación, que haya una navegación lógica y consistente, la buena jerarquización de contenidos, el contenido suficiente y claro, etc.

A veces ocurre que hay sitios que hasta a una persona sin ninguna discapacidad le cuesta encontrar el contenido o navegarlo, imagínense el trabajo y esfuerzo que es para aquel que tenga algún tipo de discapacidad… el esfuerzo es mucho mayor y la frustración también 🙁

 Y atentisss acá!!.. derribemos el mito que por una web sea accesible tiene que ser fea o aburrida..  

 

Empecemos con el check list!!!

Algunos criterios a tener en cuenta para mejorar la accesibilidad de tu web

1. Etiqueta <title></title>

Una de las primeras cosas a tener en cuenta es el título que usamos en nuestras secciones.
La etiqueta title <title> Título del sitio web </title>

Esta etiqueta si recuerdan es la que va dentro del head y es la que va a tirar cómo resultado de búsqueda Google (a continuación ejemplo en google y un ejemplo del código html)

 

Qué debo tener en cuenta a la hora de escribir los titles?

Tienen que ser descriptivos de cada sección, los titles es lo primero que van a leer los lectores de pantalla, lo primero que debería decir es de que se trata la sección, a la vez si un usuario tiene varias pestañas abiertas puede ver fácilmente cuál es de cada sección.

Ejemplos de titles pobres.. Y de buenos titles:

     Títulos pobres:

  • Alconada IT : Home
  • Alconada IT : Contacto
  • Alconada IT : Servicios
  • Alconada IT : Bolsa de trabajo

  

    Mejores opciones de títulos:

  • Alconada IT : Diseño y desarrollo de páginas web
  • Curso de Diseño Web : Alconada IT
  • Bolsa de trabajo : Oportunidades laborales : Alconada IT
  • Diseño Web : Alconada IT

 

2. Textos alternativos en imágenes

  • Todas las imágenes que hagan al contenido tienen que tener un texto alternativo (alt=””)
  • El texto alternativo de la imagen debe describir realmente de que se trata la imagen, hay que pensar que si una persona no puede ver la imagen, este texto debería dejarle claro de que se trata o cuál es su contenido, No se trata de ponerle un texto alternativo porque si.. 
  • Si la imagen está puesta de manera  decorativa o sea  que no hace al contenido de la web, su texto alternativo quedará vacío (alt=””), ejemplo de imagen decorativa:

 

A continuación les muestro un ejemplo de un mal uso del alt, la imagen es de contenido asique está bien que tenga un texto alternativo, pero ese texto no es para nada descriptivo de la imagen, es en el sitio de la municipalidad de la plata en la sección de novedades. El alt solo dice “Noticia” ese alt podría ir con cualquier imagen, un alt más acertado sería “Charla sobre reciclado en la República de los Niños”

 

3. Elementos multimedia

  • Si tenemos en nuestro sitio videos explicativos o institucionales es importante que el contenido del mismo esté en el audio y los subtítulos, o que se pueda acceder al contenido con algún otro formato.
  • Posibilidad de pausar y frenar los videos, de mutear el sonido (el usuario debe tener el control sobre el contenido multimedia)

 

4. Documentos descargables

Si el usuario tiene la posibilidad de descargarse documentos como PDFs es importante que el contenido del mismo pueda ser leído por lectores de pantallas, por ejemplo si ponemos textos dentro de una imagen, ese texto no puede ser leído por un screen reader, acá les dejo un link con algunas recomendaciones para hacer PDFs accesibles:
https://helpx.adobe.com/es/acrobat/using/creating-accessible-pdfs.html

 

5 – Estructuración html

  • Buen uso de headings, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
    El h1 se debe usar una vez sola por html y encontrarse en la primer parte del código fuente y debe ser el primer heading dentro de tu html.
    No se debe saltear ningún nivel de heading, o sea no puedo usar <h4> si no había usado <h3> en el mismo archivo.
  • Etiquetas semánticas, <header>, <main>, <section> , <nav>, <footer>, <ul>

          Importante: Acordate de validar tu html: https://validator.w3.org/

 

  6 – Buen uso de los contrastes

Para un diseño web accesible es super importante tener cuidado con los contrastes que usamos, las personas con alguna disminución visual le cuesta ver algunos contrastes o colores muy brillantes, hay herramientas que te permiten rápidamente validar si los colores tienen el contraste adecuado. Hay muchas herramientas, yo la que eso es: https://contrastchecker.com/

El contraste debe pasar el criterio por lo menos AA de accesibilidad, el círculo AA y el AA18pt deberían estar los 2 verdes al validar.

 

7. Textos
Tené cuidado que todos los textos tengan el tamaño mínimo de 16px para poder ser leído, parece algo obvio pero hay sitios con tamaños muy pequeños que dificultan la accesibilidad.
También tené en cuenta de nunca poner texto como imagen, todos los textos que sean de contenido de una web deben ir cómo texto y nunca dentro de una imagen.

 

8. Navegación

Es importante chequear de navegar la web con la tecla tab del teclado y verificar que todo lo que sea enlace y clickeable sea accesible por medio del tab.

Al posicionarnos sobre un enlace por medio del tab este debería remarcarse con un borde de color.

 

El tema es muy amplio y hay mucha información para hacer nuestros sitios accesibles, pero con algunas buenas prácticas y de a poco podemos  hacer que nuestros sitios sean más accesibles, hay una herramienta que es una extensión del navegador que  analiza la web y te dice que podemos mejorar para una mejor accesibilidad, esta extensión se llama Wave.

 

Cómo usar la extensión Wave:

1. Buscala en las extensiones de chrome


2. Al instalarla se va a agregar este iconito en tu navegador

3. Andá a la url del sitio que quieras analizar y tocá sobre el iconito, se te va a abrir una consola a la izquierda donde te va a dar un resumen de los aspectos a mejorar.. Noo te vuelvas loco.. Andá mejorando los que estén a tu alcance

También te sirve para analizar otros sitios e ir aprendiendo!!!

 

 

 

 

 

Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.