La accesibilidad en la web
Las pautas de accesibilidad para el contenido para la web son recomendaciones para crear contenido web más accesible.
Según el Informe mundial sobre la discapacidad publicado en el año 2011 estima que más de mil millones de personas viven con algún tipo de discapacidad. Alrededor del 15% de la población mundial.
La accesibilidad web es la práctica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones.
Web Content Accessibility Guidelines creadas por W3C son recomendaciones para crear contenido web más accesible, las cuales también han sido ratificadas por la ISO, como estándar ISO/IEC 40500:2012.
¿Por qué implementar accesibilidad en la web?
Una declaración de accesibilidad demuestra compromiso y proporciona detalles a los usuarios con discapacidades sobre las implementaciones que pueden usar y mejorar su experiencia en el sitio web.
- Puede aumentar el SEO de nuestro sitio web
- Para incluir a personas en situaciones de discapacidad.
- Para mejorar la usabilidad de nuestros proyectos.
- Porque en algunos países es la ley.
Principios WCAG
Perceptible: Crear alternativas textuales para todo contenido no textual. Facilitar a los usuarios ver y oír el contenido, poder presentar el contenido de diferentes formas sin perder información o estructura.
Operable: Que toda la funcionalidad esté disponible desde el teclado. Que sea navegable, dar el tiempo suficiente para leer en elementos dinámicos y dar opciones de tiempo.
Comprensible: Ser legible, tamaños contrastes de textos, hacer la página predecible, tener instrucciones claras.
Robusto: Mantener compatibilidad con las aplicaciones de usuario actuales y futuras, navegadores y dispositivos, incluyendo las tecnologías asistivas y tener un buen performance.
Los criterios de WCAG comprende 3 niveles de conformidad:
- A el nivel más bajo.
- AA requiere cumplir los criterios del nivel A y AA
- AAA el nivel más alto requiere cumplir los criterios del nivel AA y AAA.
Tecnologías asistivas
Las tecnologías asistivas sirven de ayuda para las personas con dificultades. Ayudan a realizar tareas regulares con el objetivo de mejorar su calidad de vida y su integración. Algunas de estas tecnologías son:
- Lectores de pantalla
- Extensiones que manipulan el CSS
- Lupa de pantalla
- Control de voz
- Varilla bucal
HTML Semántico
Un buen HTML resuelve muchos aspectos de la accesibilidad con el uso correcto de etiquetas y atributos. Usar HTML semántico ayudará al navegador a incluir significado en el árbol de accesibilidad. Así los lectores de pantalla pueden entender el rol, propiedades y estado que tiene esa parte de nuestro código.
No recomendado:
<body>
<div></div>
<div>
</div>
<div></div>
</body>
Recomendado:
<body>
<header></header>
<main>
</main>
<footer></footer>
</body>
Uso de texto alternativo en imágenes
Esto le ayuda a los lectores de pantalla al momento de toparse con imágenes a leer la descripción.
<img src ="img src" alt="texto mostrar en caso que no esté disponible la imagen">
Uso de scope en tablas
El uso del scope ayuda a los lectores de pantalla a seguir el orden correcto.
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">City</th>
</tr>
<tr>
<td>1.</td>
<th scope="row">Joel Garner</th>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th scope="row">Clive Lloyd</th>
<td>Baltimore</td>
</tr>
</table>
Roles apropiados
Hay que definir los roles de acuerdo a la función que realizarán. En este caso el primer "botón" tiene la funcionalidad de enlazar a otra página por lo que debería ser implementado como hipervínculo para que tome el rol de link.
Atributos Aria
Estos atributos se pueden añadir a cualquier etiqueta HTML para comunicar cambios especiales al DOM de nuestra aplicación. Roles propiedades y estados. Siempre es preferible usar un elemento HTML semántico correcto si es que existe en lugar de usar ARIA.
Roles: Define el tipo general del objeto. Comunican a los navegadores cuáles son las interacciones que debería esperar y cómo se va a usar este objeto en nuestro proyecto. Se usan en situaciones muy específicas, es mejor depender del HTML semántico para comunicar los roles. Atributo:
role
.Propiedades: Comunican atributos que son esenciales para el comportamiento o significado de un elemento, pero que suelen comunicar visualmente. Atributo:
aria-label
.Estado: Comunican estados y cambios de estados en elementos que se suelen comunicar visualmente
aria-hidden="true"
para que el lector de pantalla solo lea los elementos visibles en el estado actual de la página.
Estilos
Para tener más empatía con las personas con discapacidades visuales podemos emular a través de las dev tools de Google Chrome a través de las siguientes opciones:
Customize and control DevTools > More tools > Rendering > Emulate deficiencies
Color y contraste
Podemos utilizar las herramientas de Google Chrome DevTools para ver el contraste con el background y ver si cumplen con las especificaciones AA y AAA.
Focus
El enfoque da una guía visual al usuario sobre los elementos interactivos. Si un usuario solo navega con el teclado (tab y shift+tab) es importante que todos los elementos interactivos tengan un enfoque para guiar al usuario.
Selecciona ->
Skip Links
Es una técnica que permite navegar directamente al contenido principal. El primer elemento de la página sería este enlace. Con esto se logra que con cada cambio de página al navegar con el teclado no tener que pasar de nuevo por contenido repetitivo.
<style>
.skip-link {
display: block;
line-height: 0;
height: 0;
width: 0;
}
.skip-link:focus,
.skip-link:active {
height: auto;
width: auto;
}
</style>
<a href="#main" className="skip-link">Saltar al contenido</a>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<main id="main"></main>
Tabindex
Es un atributo que indica si un elemento puede ser enfocado, y si participa en la navegación secuencial del teclado. Acepta tres valores:
Valor negativo(-1): El elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación, puede ser usado en carruseles donde elementos no son visibles.
Valor positivo (>0): Debe poder ser enfocado y su orden relativo es definido por el valor del atributo.
Valor de 0: Debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, sigue el orden de la estructura del HTML.
Añadir acciones con el teclado
Podemos añadir acciones con el teclado escuchando las teclas. Guía de códigos
Existen teclas intuitivas como por ejemplo al entrar en modales y salir con la tecla esc. Esto añade una característica más a nuestro sitio.
const listenKeys = (e) => {
switch (e.keyCode) {
case 32:
togglePlay();
break;
case 77:
mute();
break;
default:
break;
}
};
document.body.addEventListener("keyup", (e) => listenKeys(e));
Test de accesibilidad
Los test de accesibilidad ayudan a resolver problemas comunes. Se pueden hacer a través de devtools con lighthouse o a través de otras plataformas.
Conclusiones
La accesibilidad mejora la calidad de nuestro sitio web y la experiencia de los usuarios. Es importante tener en mente la accesibilidad a la hora de estar desarrollando un sitio web para asegurarnos que todos puedan tener acceso al contenido.