Aprendiendo la importancia de la accesibilidad web con WAI-ARIA.
Hola devs, en este artículo hablaremos sobre WAI-ARIA y como nos ayuda a mejorar la accesibilidad en nuestras páginas web, ¿comenzamos? 🚀.
Pero antes, ¿qué significa WAI-ARIA? 🤔, “Web Accessibility Initiative — Accesible Rich Internet Applications” , ARIA para lxs amigues 🙃, llegó cuando la web comenzó a modernizarse con AJAX (Asynchronous JavaScript And XML, o sea JavaScript asíncrono y XML), quien permite crear webs dinámicas pero menos accesibles y puede generar una mala experiencia para nuestros usuarios 😕, debido que no se brinda el suficiente contexto de lo que puede hacer algún elemento, por ejemplo, en un modal si solo usamos una “X” para indicar que de ahí se cierra, eso es funcional para personas con buena visión pero, ¿qué pasa con las demás personas?, esa “X” no dirá nada, lo idea sería indicar que objetivo cumple, y ¿cómo ARIA nos ayuda a lograr eso? 👀.
Bueno, ARIA cuenta con:
Roles: su misión es definir el papel que juega cada elemento dentro de nuestra página web. Para agregarlo, solo añadimos a la etiqueta del elemento lo siguiente: role="[nombre_del_role]" y listo 😎.
Algo a tener en cuenta es que el role no se debe cambiar dinámicamente en ningún elemento de nuestra pagina, si necesitamos hacer esto, deberíamos eliminar del DOM el elemento y crear uno nuevo con todo y surole.
Además, existen dos tipos de “roles”, aquellos que definen elementos de la interfaz ( alertas, sliders, etc.) y los que definen la estructura de la página (cabecera, navegación, footer), estos últimos llamados “Landmark roles” los cuales tratan de añadir características útiles de navegación global, que transmiten información de la estructura de la página e información semántica sobre estas zonas, sin embargo, si utilizas etiquetas semanticas en tus paginas web (que sería lo ideal 😬), no deberías de usar el atributo role, pues sería redundante, incluso también en aquellos elementos como <input type="checkbox"/> ,no lo necesitan. Visita esta página para conocer todos los roles .
Estados y propiedades: “determinan las características y los valores de cada elemento” — nosolousabilidad. Estos nos ayudan cuando tenemos elementos dinámicos que cambian de estado, por ejemplo, un componente accordion, donde debemos indicar cuándo esta expandido o colapsado.
Y gracias a ARIA podemos definir las propiedades y estados de los elementos, por ejemplo:
<li role="treeitem" aria-expanded="false" tabindex="0" onclick="a()" onkeypress="a()">Acordeón
el atributo aria-expanded="false" que tiene la etiqueta, esta indicando que el elemento “accordion” está colapsado y cuando el usuario lo despliegue debería de cambiar su estado dinámicamente a true(mediante javascript) indicando que ha sido desplegado, y así, herramientas como el voice over podrán notificar el estado actual del componente al usuario de manera correcta 🙌.
¿Cómo vamos hasta acá?, ¿se va entendiendo la importancia de nuestra amiga Aria?, pondré otro ejemplo para pulir dudas (si es que existen), aquí estamos usando un div para personalizarlo como un checkbox, y como lo menciono en mi artículo de Accesibilidad web, parte I, no solo hay que preocuparnos por los estilos, si no también por su accesibilidad y gracias a los atributos role y aria-checked podemos mejorar bastante su navegación.
Importante, el rol es fijo, no se cambia, los estados y propiedades sí, porque son dinámicos.
Me gustaría enfatizar en que los estado y propiedades en realidad son características similares, ambos son manejados como atributos y proporcionan información específica sobre un elemento, WAI-ARIA se refiere a las propiedades como aquellas que suelen cambiar menos (aunque no siempre) y los estados cambian con frecuencia según la interacción del usuario, (esto me recordó los conceptos de React, ¿a ti, no?).
Teniendo más claro que es ARIA, veamos algunos atributos:
Aria-label
Sirve para dar un nombre a un elemento HTML y nos ayuda a darle mas contexto al usuario cuando visualmente no lo estamos haciendo. Nan, un ejemplo por favor, ok, te daré 2; el primero, cuando hacemos un menú hamburguesa, visualmente es intuitivo, ¿cierto?, pero, ¿qué pasa con las personas con problemas visuales?, ¿cómo sabrán que eso es un menú?, es ahí la importancia de usar aria-label, quien con la ayuda de herramientas como el voice over leerán el texto que tiene este atributo y será más fácil para ellos saber que están seleccionando, en este caso le dirán que es un “menú”, ver imagen 1.
Segundo ejemplo, en la imagen 2 se puede apreciar este famoso icono de la ‘X’ que como estándar reconocemos que sirve para cerrar algún componente (dependiendo el contexto) como en un modal, alertas, etc. pero que pasa, nuevamente es intuitivo visualmente, sin embargo, no es tan accesible pero usando el atributo de ARIA este problema se solventa.
Algo a tener en cuenta con arial-label es que puede ser remplazada si al mismo tiempo usamos aria-labelledly y puede anular otras formas nativas de etiquetado como ALTen las imágenes o <label> en los campos de formulario, por eso es importante saber cuando usarla y básicamente es en etiquetas no semánticas que tengan una funcionalidad especifica.
Relationships
Un atributo de relationship crea una relación semántica entre los elementos de la página, independientemente de su relación en el DOM. La especificación de ARIA nos muestra ocho relationship attributes, los cuales seis de ellos son aria-activedescendant, aria-controls, aria-describedby, aria-labelledby, y aria-owns, aprendamos de qué tratan 🤓.
Aria-labelledly
Igual que aria-label , nos ayuda a nombrar un elemento HTML con la diferencia que no le indicamos directamente el texto, si no en los id/ids del elemento/s de la página que actúa/n como contenido, es decir aria-describedby permite asociar una descripción a un elemento indicando el id del mismo que proporciona la descripción,😫 o sea ¿cómo?, ok, en la imagen 3 se puede observar que nuestra etiqueta <div/> tiene el aria-labelldby y su valor es “rg-label”, el cual se obtiene del id que tiene el <span/> y el name es “Drink options” que es el contenido del <span/> , con esta explicación espero haya quedado más claro 🥺.
La ventaja de aria-labelledly es que al hacer la referencia por el id, no importa si los elementos están envueltos ni necesitan estar juntos para que funcione, ve la imagen 3.
✋ Una cosa importante a considerar es que aria-labelledly anula otro valor, es decir si en ese elemento llegarás a usar también el atributo de aria-label no lo tomará en cuenta, incluso labelledly tiene más peso que la misma etiqueta nativa de label en los formularios.
Como recordatorio amigable, ten en cuenta que no es necesario hacer uso de estos atributos en etiquetas semánticas, ¿ok? 🤝.
Aria-owns
Este atributo le permite a las tecnologías de asistencia como el voice over, saber cuando un elemento que está separado en el DOM debe tratarse como un elemento secundario del elemento actual, o reorganizar los elementos secundarios existentes en un orden diferente. Por ejemplo, si un submenú emergente se coloca visualmente cerca de su menú principal, pero no puede estar así en el DOM porque afectaría la presentación visual, usamos aria-owns para indicar que el submenú es un hijo de nuestro menú principal, y así mejoramos la navegación de nuestros usuarios, ya que auditivamente será comprensible como están relacionados estos componentes.
Una ventaja de aria-ownses que puede recibir una lista de id’s como referencia, ver imagen 6.
Aria-activedescendant
Este atributo recibe el id de un elemento de una lista y le pone foco cuando su padre esta seleccionado, es importante porque así el voice over le indicará al usuario que elemento esta seleccionado dentro de alguna lista.
Aria-describedby
Proporciona una descripción accesible al comportamiento de nuestros elementos y al igual que aria-labeledby, puede hacer referencia a elementos que no serán visibles, ya sea porque estén ocultos en el DOM.
Esta es una técnica útil cuando hay algún texto explicativo adicional que un usuario podría necesitar, un ejemplo común es validar el valor de entrada en nuestro input de tipo password, donde queremos indicarle a nuestros usuarios los requisitos mínimos para crear su contraseña.
En la imagen 8, el texto de “Password must be..” aparecerá solo cuando se de enter en el input (claramente, tenemos que validar cuando este caso aplica), y puede ser visible para todos los usuarios u ocultarla y que solo el voice over la detecte y lo notifique.
Aria-posinset & Aria-setsize
Estos atributos son un poco diferentes a los previos y para que funcionen deben ir juntos. Aria-posinsetes la posición del elemento dentro de un conjunto o lista y aria-setsize es el tamaño total del conjunto. Estos atributos se pueden usar perfectamente cuando tenemos un conjunto muy grande y no queremos pintarlo en nuestro DOM. Ejemplo, una lista con 1000 elementos, podríamos usar estos atributos y decirle que un elemento en particular tiene un aria-poinsetde 857 y que aparezca primero en el DOM y luego nosotros tendríamos que implementar la funcionalidad para que el usuario pueda explorar todo el contenido, pero con esto logramos indicar de manera correcta a través de herramientas de asistencia en que elemento estamos posicionados.
¿Cómo vas?, ¿todo bien? 👀, ya sé, es mucha info 😶 y alguna será más entendible hasta que la implementes 😊, por ahora terminaremos aquí pero en el siguiente articulo escribiré sobre otros tipos de aria que también son muy interesantes como aria-live , aria-atomic , aria-busy , etc.
Espero hayas disfrutado de este contenido, no te pierdas las demás publicaciones 😎.
Gracias por leerme 🫂.
