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) 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.
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
SOCIAL SHARE CARD GENERATOR