Programando: 7 buenas prácticas de accesibilidad web
Las opiniones, hechos e interpretaciones expresadas en esta publicación, que no han sido sometida a revisión editorial o de otro tipo, son de exclusiva responsabilidad de sus autoras y pueden no coincidir con las de Adalab.”
Algunos sencillos pasos para que todas las personas puedan acceder a vuestro contenido web.
La web es un recurso muy importante para diferentes aspectos en la vida cotidiana como educación, empleo o entretenimiento. Es muy importante ofrecer a todas las personas la misma oportunidad de acceder a la información.
> Según la Organización Mundial de la Salud (OMS) más de mil millones de personas viven en todo el mundo con alguna forma de discapacidad.
Parece que en este momento estamos pensando en personas con discapacidad visual. Pero cualquier limitación física puede afectar al uso de la web: un brazo escayolado, autismo, daltonismo, etc.
En este artículo os enseño 7 buenas prácticas muy sencillas que podéis emplear para conseguir una web más accesible.
Lectores de pantalla y etiquetas semánticas
Los lectores de pantalla son un software que permite el uso del sistema operativo y distintas aplicaciones gracias a un sintetizador de voz que “lee y explica” lo que se visualiza en la pantalla.
Para que los lectores de pantalla funcionen correctamente y puedan mostrar al usuario lo que es relevante y guiarle a través de la propia estructura de la web, usamos etiquetas semánticas que permiten al navegador saber cómo es y de qué trata cada una de las partes. Estas etiquetas son por ejemplo <header>, <section>, <ul>, <nav>, <button> y muchas más.
Tabindex
Tabindex es un atributo de HTML que permite que el elemento al que se lo añadimos reciba el foco. Existen varias maneras de activar el foco dependiendo del valor asignado a tabindex:
- (tabindex=”-1”) Cuando el valor es negativo, el foco se realiza únicamente usando el ratón.
- (tabindex=”0”) Si es igual a cero, el foco se recibe con el ratón y se puede navegar con la tecla ‘tab’.
- (tabindex=”1”) Cuando el valor es positivo, distinto de cero, el foco se recibe con el ratón, se puede navegar con la tecla ‘tab’ y además el valor del tabindex indica su posición en el orden de tabulación.
No te olvides de las etiquetas alternativas y los subtítulos
Cuando pongamos imágenes o iconos que creamos que son importantes, añadimos el atributo ‘alt’ con una breve descripción de lo que muestra la imagen/icono para que el navegador pueda contárselo a los usuarios que no pueden verlos.
Además esta misma descripción aparece si hay algún problema al cargar la imagen/icono por lo que es enormemente útil no sólo para personas con limitaciones físicas.
Igual de importante es que cuando incluyamos archivos multimedia incorporemos subtítulos, transcripciones de audio y descripciones de vídeo.
Contraste de colores
Para facilitar la lectura y la comprensión del texto de nuestra web vamos a tener en cuenta el contraste entre las combinaciones de los colores del fondo y del texto, para que se pueden percibir por personas con limitaciones visuales o en pantallas en blanco y negro.
El WCAG (Web Content Aceesibility Guidelines) define en el criterio 1.4.3 los parámetros que deben seguirse al establecer el contraste de color. Para el nivel AA se pide un ratio de contraste de 4,5:1 entre el fondo de pantalla y el contenido (texto).
Pero no os preocupéis. Existen aplicaciones que nos ayudan a comprobar si lo estamos haciendo bien. Aquí os dejo algunos ejemplos:
No escribas en mayúsculas
Aunque creamos que esto puede servir para atraer la mirada de los usuarios de nuestra web, realmente no resulta buena idea porque algunos lectores de pantalla leen estos textos letra por letra en lugar de las palabras y la lectura puede llegar a ralentizarse en un 10%.
El tamaño importa
Me refiero a la zona táctil de nuestra web.
Desde el punto de vista de diseño vamos a favorecer la usabilidad de nuestra web, teniendo en cuenta a las personas con limitaciones motrices que tienen dificultad para controlar movimientos. Entonces vamos a evitar:
- Elementos clikables muy juntos entre sí.
- Botones muy pequeños o con poco padding.
- Enlaces de texto en un cuerpo muy pequeño.
Validadores de accesibilidad web
Existen aplicaciones que nos ayudan a comprobar si vamos por buen camino en temas de accesibilidad. Aquí os dejo algunos ejemplos, aunque existen muchas más:
Estas son algunas de las opciones más sencillas que existen para garantizar la accesibilidad web y espero que las pongáis en práctica.
Gracias por leerme y si queréis ampliar información sobre el tema, os recomiendo:
https://www.w3c.es/Traducciones/es/WAI/intro/accessibility/
https://www.w3.org/WAI/standards-guidelines/wcag/
https://developers.google.com/web/fundamentals/accessibility/
