La accesibilidad web se basa en hacer el diseño y desarrollo de las páginas web, accesibles para las personas, independientemente de si tienen alguna discapacidad o no.
La accesibilidad es un tema increíblemente importante y muchas veces subestimado, o quizá no hemos escuchado mucho sobre este tema. Pero lo cierto es que, debemos pensar en tener la web accesible para todos.
De acuerdo a las Pautas de Accesibilidad de Contenido Web (WCAG) existen 4 principios con los que debe contar el contenido web:
- Perceptible: Que la información presentada, sea presentada de manera que pueda percibir.
- Operable: El usuario puede manejar la navegación.
- Comprensible: La información y el manejo de la interfaz debe ser comprensible.
- Robusto: Que el contenido sea lo suficientemente robusto para ser interpretado de forma fiable por una amplia variedad de agentes de usuario, incluidas las tecnologías de apoyo.
Aquí te dejo algunos tips para poder tener una página accesible:
1. Añade texto alternativo a las imágenes
El atributo alt se utiliza en el tag de imagen, sirve para que el navegador muestre un texto alternativo cuando la imagen no pueda mostrase, es un atributo obligatorio.
Este atributo permite que personas con discapacidad visual, que utilizan un lector de pantalla, puedan interpretar el contenido de las imágenes.
2. Usa correctamente los encabezados
Gracias a los encabezados, podemos jerarquizar la información dentro de nuestras páginas y facilitar la navegación de personas con discapacidad visual.
Se recomienda usar solo un <h1> por página, esto nos ayuda a que los lectores de pantalla puedan conocer el tema central de la página.
También debemos tomar en cuenta que no deben existir saltos de encabezados, es decir, después de un <h1>, no puede ir un <h3>, el siguiente debe ser <h2>.
3. El contenido debe de ser accesible por medio del teclado
Esto es muy importante para aquellas personas que no pueden usar el ratón y necesitan navegar por la página usando el teclado. Cuando se presiona la tecla TAB la página hace foco sobre el siguiente elemento o botón, al presionar ENTER puede seleccionar un elemento o activar un botón.
Para hacer esto, podemos utilizar el atributo tabindex y la pseudo clase :focus.
4. El contraste entre el texto y el fondo debe ser significativo
Según las pautas internacionales de accesibilidad, el contraste entre el color del texto y el fondo debe tener una relación de 4.5:1 para textos pequeños y 3:1 para textos grandes.
Existen herramientas para revisar el contraste, como:
5. Formularios que funcionan con lectores de pantalla
Para hacer los formularios accesibles, debemos conectar cada <label> con su <input> correspondiente usando el atributo for y el id.
Esto permite que cuando el lector de pantalla llegue al campo, lea la etiqueta asociada y el usuario sepa qué información debe ingresar.
Conclusión
Según la OMS, más de mil millones de personas viven con algún tipo de discapacidad, esto representa el 15% de la población mundial.
La accesibilidad web no es solo una buena práctica, es una responsabilidad que tenemos como desarrolladores para crear una web más inclusiva para todos.
¿Tienes algún tip adicional sobre accesibilidad? ¡Compártelo en los comentarios!
Enlaces relacionados
Cómo Configurar SSH Keys para GitHub en 5 Minutos
Checa este otro Post
