Hace algún tiempo me encontré con un reporte de accesibilidad analizando un millón de páginas web que publicó WebAIM (uno de los grandes referentes del tema en Estados Unidos) webaim.org/projects/million
En este reporte aparecen, entre otras cosas, los seis errores más comunes de accesibilidad y la verdad me sorprendió la lista… son cosas super simples que … porque olvidamos?
Si no tenemos tiempo de leernos la documentación de accesibilidad y sensibilizarnos con el tema, al menos podemos colaborar a la vida evitando caer en el mismo error una y otra vez.
Los errores más comunes que debemos evitar 🫡
Del millón de páginas revisadas, se ordenaron los errores que en porcentaje se repiten en su homepage
- Tener bajo contraste de texto (81.0%)
- Utilizar imágenes sin texto alternativo (54.5%)
- No etiquetar correctamente los campos de entrada (48.6%)
- Tener enlaces vacíos!! (44.6%)
- Tener botones vacíos! (28.2%)
- No agregar atributos de lenguaje al documento (17.1%)
1.Verificar el contraste del texto
Por lo general este error lo resuelve el equipo de diseño. Al seleccionar la paleta de color que utilizará el sitio o sistema de diseño, deberán asegurarse que el contraste sea apropiado para la lectura.
Al equipo de desarrollo simplemente nos pasan una lista de hexadecimales que utilizar… aun así… si notas algo raro, no olvides reportarlo a tu diseñadora favorita… que normalmente en el área de diseño no tienen QA, no se porque! de que privilegios gozan ?! u.u
2. Agregar texto alternativo a las imágenes
Si cuentas con un equipo de contenido (quienquiera que esté escribiendo la información que se verá en pantalla), debería de existir un documento en donde para cada imagen que se requiera poner en pantalla, se agrega el texto alternativo que ésta debe de tener, incluso si va vacío como el caso de las imágenes decorativas.
El equipo de desarrollo debe cerciorarse de que toda etiqueta de imagen lleve siempre el atributo alt con o sin contenido, como se haya especificado por el equipo.
<img alt="texto alternativo">
3. Etiquetar los campos de entrada
Dependiendo del diseño, hay distintas formas en las que se puede etiquetar un campo.
- Cuando el campo de entrada tiene visible la etiqueta de nombre, unicamente es importante recordar ligar ambos elementos con el
fordel<label>y eliddel<input>.
<label for="nombreunico">
Nombre completo
</label>
<input
id="nombreunico"
type="text"
placeholder="Ejemplo: Alma Leticia"
/>
- Cuando únicamente se ve el campo de entrada, puede utilizarse el atributo
aria-labelen la etiqueta del campo<input>, selector<select>o área de texto<textarea>para agregarle la información del nombre al campo.
<input
aria-label="Nombre completo"
type="text"
placeholder="Ejemplo: Alma Leticia"
/>
4. Agregar contenido a los enlaces
Parecido que con las imágenes, es un trabajo en equipo, es necesario que quien escriba el contenido siempre piense que texto significativo debe verse cuando se agrega un enlace, mientras que el equipo de desarrollo debe cerciorarse de que no se escriba nunca una etiqueta de enlace <a> ni sin enlace href=”” ni sin contenido > … <
<a href="enlace"> texto significativo </a>
5. Agregar contenido a los botones
Tanto el equipo de diseño como el equipo de contenido están envueltos en resolver que se verá y que se escuchará en un botón.
- Para un botón sencillo
<button>con texto, nada más es verificar que funcione y se vea como se debe leer, la acción a realizar por la persona usuaria.
<button type="button"> Acción a realizar </button>
- Cuando un botón contiene texto y pictograma, el texto debe decir qué acción se va a realizar, mientras que el pictograma debe ocultarse auditivamente mediante el atributo
aria-hiddenque se incluye en el elemento que contenga el pictograma, en éste ejemplo un<span>
<button type="button">
Acción a realizar
<span class="pictograma" aria-hidden="true"> :} </pictograma>
</button>
- Para un botón que contiene únicamente el pictograma, se mantiene el
aria-hiddenen el<span>del pictograma y se agrega unaria-labelal elemento botón<button>para especificar la acción a realizar.
<button
type="button"
aria-label="Acción a realizar"
>
<span class="pictograma" aria-hidden="true"> :} </pictograma>
</button>
6. Agregar atributo de lenguaje al documento HTML
Es un atributo que la mayoría de los frameworks ya traen siempre escrito, aunque como la mayoría están en inglés, habrá que cambiarle este atributo a la página al español.
El lenguaje general del documento se declara en la etiqueta raíz de HTML
<!DOCTYPE html>
<html lang="es-mx">
Cuando existen fragmentos de la página en otro idioma es necesario agregarle el atributo lang a la etiqueta que contenga el texto en particular.
<span lang="en">hello</span>
— Con esto solucionamos los errores más comunes. 🎉
Otras recomendaciones generales para mejorar accesibilidad mediante el código 🤓
- Utilizar HTML semántico.
- Agregar un enlace para ir al contenido principal, al inicio de la página antes de la navegación y cabecera.
- Agregar un título a cada página en el
<header> - Organizar la estructura principal del sitio con etiquetas de región como
<nav>,<header>,<main>,<footer>,<section>,<article>,<aside> - Verificar que solo exista un
<main>por vista. - Utilizar solo un
<h1>por página. - No brincar entre jerarquías de títulos, después del
<h1>el siguiente título que necesitemos debe ser un<h2> - Para formularios complejos, utilizar el
<fieldset>y<legend>para agrupar campos de información en secciones.
Escucha la página
El orden de la lectura es igual al orden de la estructura del código, puedes intentar escuchar la página una vez que esté terminada para verificar que se comprenda, también ayuda a corregir la ortografía y puede ayudar en general a mejorar la estructura.
Navega la página
Revisa que todos los elementos interactivos tengan estado de enfoque y que el orden en el que navegas entre uno y otro, utilizando el tabulador, sea el esperado. Puedes navegar el sitio con el teclado para verificarlo.
Verifica la accesibilidad básica con herramientas automáticas 🦇
Existen un montón de herramientas que se pueden instalar en el navegador para verificar la accesibilidad.
De mis favoritas serían las de IBM y la de Google Chrome
También me gusta mucho una enfocada particularmente los aria y landmarks, para ver la estructura del sitio.
Y para validación del código fuente durante la etapa de desarrollo, se puede agregar una extensión de Visual Studio Code
Descansa🌟
La mayor parte de los errores los cometemos cuando estamos desveladas, presionadas, sin comer, sin café (o lo que sea que te de pila) …. la vida no se trata solo del trabajo! pero si ya lo vamos a hacer hay que hacerlo bien :}
Respiren, tomen agüita
— flkt
Top comments (0)