ADA accessibility, el mundo de la inclusión web
Cada día, aprendemos como sociedad a ser más tolerantes con nuestras diferencias, resaltando la aceptación, el amor y, muy importante, la inclusión.
Este punto, inclusión, es el eje central de nuestro artículo y quiero contarte cómo podrás hacer de tus sitios web un lugar seguro para tus usuarios.
Para abordar de manera más explícita el tema, comenzaré explicando que es el ADA, acrónimo en inglés de American with Disabilities Act. Este término se refiere a aquellas personas con alguna discapacidad que dificulte o hasta imposibilite realizar acciones de manera convencional.
A nivel mundial, la Organización Mundial de la Salud (OMS) estima que aproximadamente el 15% de la población mundial vive con alguna forma de discapacidad. Por lo tanto, aproximadamente 1.185 mil millones de personas en el mundo, padecen de alguna condición que les dificulta realizar sus actividades cotidianas, nuestro trabajo como desarrolladores es ayudar al mundo a cerrar esa brecha.
Afortunadamente para todos, vivimos en la era de la tecnología y contamos con múltiples herramientas que nos ayudarán a inspeccionar nuestros sitios, dándonos mayor visibilidad de puntos de oportunidad para realizar un sitio accesible para todos los usuarios.
A continuación daré una lista de las ventajas que nos provee tener sitios con un nivel completo de cumplimiento en ADA:
- Mejor experiencia de usuario para todos: Las mejoras en la accesibilidad suelen beneficiar a todos los usuarios, no solo a aquellos con discapacidades. Por ejemplo, textos claros y bien estructurados, opciones de tamaño de fuente ajustables y elementos de navegación intuitivos pueden mejorar la experiencia para todos los visitantes.
- Optimización para motores de búsqueda: Los motores de búsqueda valoran los sitios web accesibles, ya que las prácticas de accesibilidad a menudo coinciden con buenas prácticas de SEO. Un sitio bien estructurado, con contenido descriptivo y etiquetas adecuadas, puede mejorar la visibilidad en los resultados de búsqueda.
- Aumento de la audiencia y el alcance: Al hacer tu sitio web accesible, amplías tu público objetivo. Las personas con discapacidades representan una parte significativa de la población y tener un sitio web accesible te permite llegar a este segmento de usuarios que de otra manera podrían haberse excluido.
- Cumplimiento legal: La ADA es una ley en los Estados Unidos que requiere que las organizaciones ofrezcan igualdad de acceso y oportunidades a las personas con discapacidades. Cumplir con las pautas de accesibilidad ayuda a evitar demandas y posibles sanciones legales.
- Mejora de la reputación y la imagen de la marca: Demostrar un compromiso con la accesibilidad y la inclusión mejora la imagen de tu marca y muestra que te preocupas por todos tus usuarios. Esto puede generar confianza, fidelidad y un mejor posicionamiento en el mercado.
Existen muchas herramientas y basta con una búsqueda rápida en Google para acceder a un listado enorme y seleccionar la que mejor se ajuste a tu proyecto. En esta ocasión, compartiré recomendaciones y ejemplos globales que le darán ese toque inclusivo a tus desarrollos:
Tamaño
Una de las discapacidades más frecuentes y que se desarrolla de manera progresiva con la edad es la visual. No es de sorprender que existan libros físicos, en su versión “letra grande”. Básicamente, algo así aplica para nuestros sitios. He aquí una propuesta dinámica para poder cumplir con las normas de ADA:
<!DOCTYPE html>
<html>
<head>
<title>Tamaño de Fuente ADA</title>
<style>
body {
font-size: 1rem;
/* Tamaño de fuente base */
}
h1 {
font-size: 2rem;
/* Tamaño de fuente para encabezados */
}
p {
font-size: 1rem;
/* Tamaño de fuente para párrafos */
}
</style>
</head>
<body>
<h1>Bienvenidos a nuestro sitio web</h1>
<p>Nuestro sitio web se dedica a proporcionar información y recursos útiles para personas con discapacidades. Nos
esforzamos por garantizar que nuestro contenido sea accesible para todos.</p>
</body>
</html>
En este ejemplo, se utiliza un tamaño de fuente base de 1rem en el elemento <body>. Luego, se especifican tamaños de fuente para los elementos <h1> y <p>. El tamaño de fuente para los encabezados (<h1>) se establece en 2rem, mientras que el tamaño de fuente para los párrafos (<p>) se mantiene en 1rem.
Usar unidades relativas permiten que el tamaño de fuente se ajuste según las preferencias del usuario, como aumentar o disminuir el tamaño del texto en su navegador o dispositivo. Esto ayuda a garantizar que el contenido sea legible y accesible para personas con diferentes necesidades visuales. Recuerda que el tamaño exacto de fuente puede variar según el contexto y las preferencias del diseño, pero utilizar unidades relativas es una buena práctica para la accesibilidad.
Contraste de colores
Al igual que el tamaño, algo que puede provocar malestar en algunos usuarios es el contraste de colores, referido a la relación directa entre los elementos de nuestros sitios y las paletas de colores que interactúan a su alrededor.
Puede que parezca un tema de gustos a simple vista, pero una mala combinación de colores puede hacer que algunas personas pierdan de vista elementos importantes de tu sitio, por lo que habrá que tener en cuenta que, para proveer una vista amigable para nuestros usuarios, seguramente necesitaremos valernos de herramientas externas que nos den opciones de contrastes y que ayuden con una interacción web más amigable.
Solo se trata de buscar la combinación de colores que se alinee de mejor manera a nuestro proyecto:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Contraste de Colores y Texto ADA</title>
<style>
body {
background-color: #FFFFFF;
/* Fondo blanco */
color: #000000;
/* Texto negro */
}
</style>
</head>
<body>
<h1>Bienvenidos a nuestro sitio web</h1>
<p>Nuestro sitio web se dedica a proporcionar información y recursos útiles
para personas con discapacidades. Nos esforzamos por garantizar que nuestro
contenido sea accesible para todos.</p>
</body>
</html>
En este ejemplo, se utiliza CSS para aplicar el contraste de colores adecuado. El fondo blanco se establece como background-color: #FFFFFF, y el texto negro se establece como color: #000000. Estos valores representan colores con un contraste alto para mejorar la legibilidad.
Veamos este otro ejemplo, donde podemos ver una discrepancia entre colores que puede afectar a nuestros usuarios.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Contraste de Colores y Texto no ADA</title>
<style>
body {
background-color: #00FF00;
/* Fondo verde claro */
color: #FFFF00;
/* Texto amarillo */
}
</style>
</head>
<body>
<h1>Bienvenidos a nuestro sitio web</h1>
<p>Nuestro sitio web se dedica a proporcionar información y recursos útiles para personas con discapacidades.
Nos esforzamos por garantizar que nuestro contenido sea accesible para todos.</p>
</body>
</html>
En este ejemplo, el fondo se establece como un color verde claro (#00FF00) y el texto como amarillo (#FFFF00). Este contraste de colores es inadecuado y dificulta la legibilidad, especialmente para personas con discapacidades visuales.
Etiquetas “Texto alternativo”
Seguramente sabes que, hoy en día, existen herramientas que sirven como un tipo de narrador para sitios web y pues, aunque son programas sumamente amigables y útiles, no funcionan por arte de magia, por lo que necesitamos apoyarlas brindando información con lo que se conoce como texto alternativo, dando una descripción de nuestros componentes, links, imágenes y diferentes assets que interactúan con nuestro sitio:
<img src="imagen.jpg" alt="Descripción de la imagen" />
En este ejemplo, se utiliza el atributo alt para proporcionar una descripción textual de la imagen. Esto es especialmente importante para usuarios que no pueden ver la imagen, ya sea por discapacidad visual o porque no se cargó correctamente.
<a href="pagina.html" aria-label="Ir a la página de inicio">Inicio</a>
En este caso, se utiliza aria-label para proporcionar un texto descriptivo adicional para el enlace. Esto es útil para personas que utilizan lectores de pantalla y necesitan información contextual para comprender el propósito del enlace.
<button type="button" aria-label="Cerrar ventana">X</button>
Aquí, aria-label se utiliza para describir la función del botón. Esto permite a los usuarios con discapacidades visuales saber qué acción se realizará cuando se hace clic en el botón, incluso si no pueden ver su contenido visualmente.
Recuerda que es importante proporcionar descripciones claras y concisas tanto en alt como en aria-label. Asegúrate de utilizar lenguaje descriptivo pero breve para que las personas con discapacidades puedan comprender el propósito de los elementos en tu sitio web.
Conclusión
La inclusión es tarea de todos. Implementar este tipo de prácticas en nuestros sitios es aportar nuestro granito de arena a un mundo más conectado y unido mediante la tecnología.
¡Hasta la próxima!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.