Más de mil millones de personas en el mundo tienen alguna discapacidad, mil millones. Eso es más que la población de los Estados Unidos, Canadá, Francia, Italia, Japón, México y Brasil juntos.
¿Te ha pasado que entras a un sitio web y la tipografía es demasiado pequeña? ¿Hay fondos que no te permiten leer fácilmente? ¿Molestos pop-ups tapan partes importantes del sitio? Cuando hablamos de accesibilidad web, nos referimos a cuestiones que facilitan que los contenidos de un sitio web puedan ser entendidos por todas las personas, incluidas quienes tienen alguna discapacidad visual, auditiva o de cualquier otro tipo. En esta entrada te platicaré más acerca de este interesante tema y de cómo lograr una página web accesible.
¿Qué es la accesibilidad web?
Una web es accesible cuando sus contenidos pueden ser entendidos por todas las personas. Para que esto sea posible, se deben combinar un buen diseño, programación y tecnología.
Pautas de accesibilidad
La W3C ha publicado una serie de recomendaciones para lograr un Internet más inclusivo, también conocidas por sus siglas en inglés como WCAG. Parten de cuatro importantes guías:
- Perceptible. Se debe facilitar a los usuarios ver y escuchar el contenido. Cuando se trate de una imagen, se debe proporcionar un texto alternativo que se pueda escuchar en lugar de verse. La letra debe tener un puntaje adecuado, el lenguaje debe ser entendible y también deben proporcionarse alternativas para los medios basados en el tiempo.
- Operable. Se consigue cuando las funciones del sitio web están disponibles desde un teclado. Este punto también se refiere a la usabilidad, que permita una navegación sencilla y que los usuarios tengan tiempo suficiente para leer y utilizar el contenido.
- Comprensible. El texto debe ser legible y el sitio web debe funcionar de una manera predecible. Por ejemplo, si ponemos un botón, lo lógico sería que este tuviera alguna función. Se puede proporcionar a los usuarios la posibilidad de reportar fallas.
- Robusto. Los elementos cuentan con ID únicos, los elementos tienen etiquetado de inicio y final completo y se anidan de acuerdo con las especificaciones establecidas.
¿Cómo hacer un sitio web accesible?
Para tener un sitio web inclusivo, sus diferentes componentes deben ser accesibles. Esto abarca aspectos de diseño, redacción y etiquetado correcto de las imágenes y demás elementos multimedia.
Diseño accesible
Un diseño inclusivo considera que los internautas accedemos al contenido de maneras diferentes. El diseño debe contemplar cuestiones como:
- Color. Mientras que una persona puede ser perfectamente capaz de distinguir entre tonalidades de colores otras pueden presentar una condición de daltonismo. Por ello, debe existir un equilibrio entre color y contraste y no se debe confiar únicamente al color cuestiones que tengan que ver con la estructura o el formato. Ha de considerarse que en ocasiones las gráficas o esquemas pueden imprimirse en blanco y negro, por lo que los colores deber ser lo suficientemente distinguibles en una escala de grises.
- Contraste. Se refiere a la diferencia entre el texto y su color de fondo o entre las diferentes partes de una imagen. Una relación de contraste suficiente puede ayudar a las personas que tienen problemas de visión como astigmatismo o daltonismo.
- Tipografía. Su tamaño depende del tamaño de pantalla en la que se va a reproducir el contenido, por lo que debe ajustarse para distintos dispositivos. El uso de mayúsculas debe limitarse únicamente a los usos recomendados, tales como los nombres propios, ya que poner todo en mayúsculas podría complicar la lectura.
Imágenes accesibles
Los lectores de pantalla emplean los textos alternativos para describir de qué tratan las imágenes. El texto alternativo es una metaetiqueta de SEO que comúnmente el internauta que vea el sitio, no podrá leer. Sin embargo, tanto los motores de búsqueda como los lectores de pantalla usan esta etiqueta para comprender de qué trata la imagen y leerla.
- Imágenes decorativas. Cuando una imagen únicamente está ahí como un elemento ornamental y no es indispensable para comprender el contenido del sitio, el texto alternativo debe dejarse vacío.
- Imágenes informativas. Cuando las imágenes son indispensables para que se comprenda el contenido de una página, es necesario colocar el texto alternativo para que se pueda leer por las tecnologías de accesibilidad.
- Gráficas e infografías. Los gráficos, diagramas, mapas conceptuales, esquemas e infografías, entre otros, pueden ser difíciles de descifrar, especialmente en fuentes pequeñas. Si el diseño incluye tablas o gráficos con muchos datos, es preciso resumirlos en texto alternativo.
Redacción accesible
- Ortografía y gramática. Los textos deben estar bien redactados, sin faltas de ortografía que causen problemas de ambigüedad.
- Legibilidad. Sencillo de comprender, sin elementos que estorben.
- Estructuración y formato. Los elementos más importantes del texto deben destacar del resto. El contenido debe estar estructurado jerárquicamente mediante títulos, subtítulos, listas ordenadas, etc.
- Textos ancla descriptivos. Cuando se vincule a un contenido mediante un enlace, el texto ancla debe estar relacionado con el contenido al que se dirige. Por ejemplo, en lugar de un simple: ‘da clic aquí’ puedes poner ‘servicios de redacción accesible‘, y enlazar a un contenido relacionado.
Beneficios de un sitio web accesible
Además de conseguir que personas con un diferentes espectros de capacidades puedan entender el contenido de un sitio web, el diseño accesible tiene otros beneficios.
Uno de ellos es que los motores de búsqueda pueden comprender mejor los contenidos del sitio. De esta manera, cuando un usuario realiza una consulta relacionada con los temas que abordas en tu página, será más probable que el motor de búsqueda muestre tu sitio en la lista de resultados.
Herramientas de accesibilidad para desarrollo web
Como desarrolladores web, existen pautas y lineamientos para la accesibilidad. Los lenguajes de etiquetado como HTML, tienen una semántica detrás que contribuye con la accesibilidad. A simple vista, muchas de las etiquetas no se distinguen ya que están en el código, sin embargo, contribuyen para que los contenidos de un sitio web puedan comprenderse mejor.
Como usuarios de Internet, también contamos con herramientas para saber qué tan accesibles son nuestros navegadores. Se han desarrollado complementos para los navegadores web que ayudan a mostrar el contenido con mayor claridad cuando se tiene algún padecimiento.
Finalmente, hay otras herramientas que nos muestran cómo las personas con algún tipo de discapacidad perciben las páginas de un sitio. Mediante estas herramientas de empatía se puede lograr una mayor comprensión acerca de la importancia de la accesibilidad web.
En conclusión…
- La accesibilidad web facilita que todas personas comprendan el contenido de un sitio.
- Al desarrollar un sitio web, es necesario considerar las pautas de la W3C y comprender la semántica detrás de las etiquetas HTML.
- Además de ser más inclusivo, un sitio web accesible es correctamente comprendido por los motores de búsqueda, por lo que su posicionamiento web será mejor.
¿Quieres saber más de desarrollo web? Lee otros artículos relacionados en nuestro blog y comenta qué te pareció esta entrada.
