Es necesario que conozcas la wai-aria para validar accesibilidad. ¿Por qué? Porque la WAI-ARIA significa en inglés: «Web Accessibility Initiative – Accesible Rich Internet Applications». En otras palabras, es una iniciativa dentro de la W3C para mejorar el código HTML. En este post me gustaría revisar algunos puntos importantes de la misma.¿Quieres saber cuales son?
Índice de contenidos
Atributos explicativos de wai-aria para validar accesibilidad
Este conjunto de atributos nos permite etiquetar, dar nombre accesible, definir el estado o dar descripción a los elementos HTML que lo necesiten. Existen múltiples atributos «arias», aunque los más frecuentes son:
Aria-label
Proporciona al elemento de marcado una denominación reconocible siempre y cuando esa cadena de caracteres no esté disponible en el código. En otras palabras, siempre que no sea posible tener una etiqueta visible en la pantalla (porque esté identificado por un icono). En caso contrario, utilizamos "aria-labelledby". A continuación puedes ver un ejemplo:
<html> <button type="button" aria-label="Cerrar"> X </button> </html>
Aria-labelledby
Este atributo se utiliza para etiquetar al elemento deseado por referencia y concatenarlo con otras referencias. En todo momento se pretende ser concisos. En el siguiente ejemplo te muestro cómo se utiliza.
<label id="TextoPre" for="opcionSeleccionada">Prefiero horario</label> <select name="horario" id="horario" aria-labelledby="TextoPre horario textoPos"> <option value="1">De mañana</option> <option value="2">De tarde</option> </select> <span id="TextoPos">para realizar este curso</span>
Aria-describedby
Este es un atributo muy similar al anterior, con la diferencia que está pensado para referenciar uno a varios textos muy extenso, por ejemplo un párrafo o un conjunto de ellos, incluyendo una estructura de marcado. Por ejemplo:
<img src="LaMonalisa.jpg" alt="Cuadro La Gioconda de Leonardo Da Vinci" aria-describedby="det"> <details id="det"> <summary>Obra maestra del renacimiento.</summary> <p>Es una obra pictórica del polímata renacentista italiano Leonardo da Vinci. Fue adquirida por el rey
Francisco I Francia a comienzos del siglo xvi y desde entonces es propiedad del Estado francés. Se halla
expuesta en el Museo del Louvre de París, siendo, sin duda, la «joya» de sus colecciones. </p> <p>Se halla expuesta en el Museo del Louvre de París, siendo, sin duda, la «joya» de sus colecciones.</p> <p>Su nombre, La Gioconda (la Alegre, en castellano), deriva de la tesis más aceptada acerca de la identidad
de la modelo: la esposa de Francesco Bartolomeo de Giocondo, que realmente se llamaba Lisa Gherardini, de
donde viene su otro nombre: Monna (señora, en el italiano antiguo) Lisa. El Museo del Louvre acepta el título
completo indicado al principio como el título original de la obra, aunque no reconoce la identidad de la
modelo y tan solo la acepta como una hipótesis. </p> </details>
Zonas que se actualizan: Live regions
En este sentido, se dispone de unos atributos que nos permiten identificar los elementos que se actualizan automáticamente. En otras palabras, se consigue que las herramientas de apoyo anuncien las novedades de la página o app de estas áreas «vivas» de la aplicación. Para ello, se debe utilizar el atributo aria-live y se puede combinar con aria-atomic y aria-relevant en función de las necesidades.
Aria-live
En primer lugar, tenemos este atributo que puede tomar 3 valores. Por defecto, se le asigna el valor: assertive. El significado de cada uno de los valores que pueden tomar son:
- aria-live="off": Con este valor los cambios no se anunciarán.
- aria-live="polite" : De esta forma, los cambios se anunciarán al usuario, pero en ningún caso, interrumpen su acción actual. Si no que se anuncia a continuación.
- aria-live="assertive" : Aquí, los cambios se anuncian de inmediato, interrumpiendo lo que el usuario esté haciendo.
<div class="w3-panel w3-pale-green w3-border" aria-live="polite"> <h3>Success!</h3> <p>Green often indicates something successful or positive.</p> </div>
Aria-atomic
Gracias a esta propiedad, se pueden diferenciar eventos que permiten que las tecnologías de asistencia determina en áreas concretas.
Los valores que puede tomar son:
- aria-atomic="false": es el valor por defecto. De esta forma, las tecnologías de asistencia no buscan la cadena inicial y presentarán solo el modo modificado por el usuario.
- aria-atomic="true": en esta ocasión, muestra todo el contenido del elemento (incluida la etiqueta de la región definida). También puede optar por combinar los cambios y mostrar la información modificada a la vez.
En el siguiente ejemplo, se mostraría solo la cadena de texto modificada: La última actualización de resultados futbolísticos, no toda la región.
<div id="resultados-futbol"> <h2 id="titulo_actualidad">Últimos resultado de la semana</h2> <div id="actualidad" role="log" aria-labelledby="titulo_actualidad" aria-atomic="false"> <div class="entry"> <h3 class="postTitle"> <a class="storyLink" href="" tabindex="0">Sevilla - Betis</a></h3> <p class="date">01/06/2024, 17:56h</p> <div class="summary"><p class="description">1 - 1 (1ª parte)</p></div> </div> <div class="entry"> <h3 class="postTitle"> <a class="storyLink" href="" tabindex="0">Barcelona - Osasuna</a></h3> <p class="date">01/06/2024, 17:42h</p> <div class="summary"><p class="description">2 -0 (Terminado)</p></div> </div> <div class="entry"> <h3 class="postTitle"> <a class="storyLink" href="" tabindex="0">Málaga - Valencia</a></h3> <p class="date">01/06/2024, 17:38h</p> <div class="summary"><p class="description"> 2 - 1(2ª Parte)</p></div> </div> </div> </div>
Aria-relevant
Sin embargo, esta propiedad combinada con la anterior permite identificar qué notificaciones activará el agente de usuario cuando se modifique la accesibilidad de una región activa.
Su definición se realiza de varias formas:
- aria-relevant="additions": En este caso se anuncian los elementos del DOM que han sido añadidos. Tiene sentido incluirlo siempre que sea algo informativo.
- aria-relevant="removals": Con este valor notifica de los elementos relevantes eliminados del DOM.
- aria-relevant="text": informa cuando hay modificaciones de texto.
- aria-relevant="all" : En este caso notificará de todo lo anterior a la vez.
<div id="noticias"> <h2 id="titulo_actualidad">Últimas noticias</h2> <div id="actualidad" role="log" aria-labelledby="titulo_actualidad" aria-relevant="additions"> <div class="entry"> <h3 class="postTitle"> <a class="storyLink" href="" tabindex="0">Se ha reducido el consumo de plásticos un 30%</a></h3> <p class="date">12/12/2025</p> <div class="summary"><p class="description">Gracias a la concienciación de la sociedad...</p></div> </div> <div class="entry"> <h3 class="postTitle"> <a class="storyLink" href="" tabindex="0">El consumo de carne ahora es más sostenible</a></h3> <p class="date">12/12/2025</p> <div class="summary"><p class="description">Se han prohibido las macrogranjas...</p></div>
</div>
<div class="entry">
<h3 class="postTitle">
<a class="storyLink" href="" tabindex="0">Las emisiones de Co2 se han bajado al 25%.</a></h3>
<p class="date">12/12/2013</p>
<div class="summary"><p class="description">Gracias a las energías renobables...</p></div>
</div>
</div>
</div>
Actualización de Estados y propiedades
Los elementos que cambian de estado de forma dinámica, gracias a ARIA, se pueden definir unas propiedades y estado que permite notificar del estado de los mismos.
Aria-expanded (Estado)
Esta sentencia informa de si un elemento enfocable que agrupa otros elementos está expandido o no. Es común utilizarlo con "treeitem" o con un "button".
Su definición se realiza de varias formas:
- aria-expanded="true": El grupo de elementos de ese control está expandido.
- aria-expanded="false": Se especifica que el grupo de elementos al que agrupa está colapsado.
- aria-expanded="undefined": El elemento no controla, ni pose una agrupación expandible.
<li role="treeitem" aria-expanded="false" tabindex="0" onclick="a()" onkeypress="a()">Mi desplegable</li>
Para que se notifique que se ha cambiado el estado, cuando el usuario haga clic en el elemento, hay que modificar el aria-expanded a «TRUE».
Aria-disabled (Estado)
Esta sentencia informa de si un elemento "iteraccionable" es perceptible, pero no es operable, ni se puede editar.
Se suele usar para enlace, botones, y para los inputs. Es importante tener en cuenta, que además de cambiar su estado, es necesario modificar su apariencia.
Su definición se realiza de varias formas:
- aria-disabled="true": El elemento y todos los descendientes están deshabilitados.
- aria-disabled="false":: El elemento está habilidado..
<button aria-disabled="true">Mi boton</button>
Aria-hidden (Estado)
Informa si el elemento está disponible para una API de accesibilidad. De esta forma, se mejora la experiencia de usuario, ocultando elementos que pueden confundir al usuario o duplicar la información.
Su definición se realiza de varias formas:
- aria-hidden="true": El elemento está oculto para la API de accesibilidad.
- aria-hidden="false": El elemento está expuesto para su interpretación.
- aria-hidden="undefined": El estado oculto lo determina el agente de usuario.
<div id="recuadro">
<p>Resultados:
<span aria-hidden="true"> 2,13%</span>
<span aria-label"Los datos de sus intereses fiscales son del 2,13% TAE durante los 30 meses del prestamo">
30meses/TAE</span>
</p>
Roles de wai-aria para validar accesibilidad
Otro punto interesante, es definir los roles que adquieren los elementos HTML gracias a la WAI-ARIA. Para ello, se utiliza el atributo «role», y se asigna el valor adecuado. Se debe tener en cuenta, que el rol debe actualizarse en caso de ser necesario. Además, en consecuencia, el rol se aplica a todos los elementos de subclase de este. Por ello, se entiende que hay propiedades de rol que se le asignaran a unos y a sus “descendientes” se le debe aplicar el rol relacionado.
Ejemplo: un listado de elementos.
<ul rol="list">Mis Blog de interés:</button>
<li rol="listitem">El mínimo viable</li>
<li rol="listitem">Tristán Eloseguí</li>
<li rol="listitem">Accesibilidad en la web</li>
A continuación, os muestro un ejemplo de los roles más utilizados:
- alert:Notifica de que es una información importante, urgente.
- alertdialog: En este caso, son cuadro de diálogos, que alertan de mensajes que interrumpe el flujo del usuario.
- application: Cuando hay una aplicación integrada que no es interpretable por el HTML.
- article: Identifica una sección de la página, que normalmente está integrada. Puede ser un documento, un trozo de periódico, publicaciones en foro, etc.
- banner: Para identificar una parte principal de la web, donde se incluye logotipo, nombre de la entidad, slogan, etc.
- dialog: Se utiliza para mensajes en formato de diálogo o ventana emergente, que se separa de la ventana principal, normalmente suporponiendose.
- form: De esta forma identificamos un grupo de elementos que tienen una funcionalidad similar a la de un formulario.
- main: Identifica el contenido principal de la web.
- menu: Señala una lista de opciones a clicar por el usuario.
- navigation: En ese caso, se identifica los principales grupos de enlace de navegación de la página.
- search: Para identificar una funcionalidad o sección de búsqueda dentro de la página.
Para más información puedes consultar la siguiente web.
Tabindex
En relación con la navegación de teclado, es importante tener en cuenta que se pueden hacer navegables, elementos que inicialmente no lo son, incluyéndoles el atributo «tabindex». En función del valor que le asignemos, se comporta de una forma u otra.
- Tabindex=»0″: De esta informa indicamos que este elemento puede recibir foco, en el orden en el que está incorporado en la página web.
- Tabindex=»-1″: Para identificar elementos, que no podemos tabular a menos que estén en uso, como por ejemplo, un cuadro de diálogo. Una vez abierto, si tendrá foco dentro de esta ventana emergente, y al cerrarse el foco debe volver al elemento previo.
- Tabindex=»X»: Identificando el elemento como un número entero. De esta forma, tendremos un orden de tabulación explícito, identificado por los «tabindex» con valores; 1, 2, 3, … ¡OJO! Hay que tener especial cuidado al utilizarlo, porque puede crear confusión.
<div onclick="alert('Toda la información contenida en esa web, puede sufrir cambios debido a los precios de
externos');" tabindex="0">Consultar info</div>
<div id="cuadro-modal" tabindex="-1">
<h3>Guía de tallas:</h3>
<p>Puede consultar la información de la talla que se necesita en el siguiente enlace.<p>
</div> Referencias
Conclusión: Debes conocer la wai-aria para validar accesibilidad
Si conoces la WAI-ARIA podrás hacer un mejor desarrollo y testing de accesibilidad sobre páginas web. Gracias a esas propiedades, valores, estados y codificaciones, el código es más accesible para personas con capacidades especiales. Hoy hemos conocido elementos muy interesantes, estate atento a las novedades y repasaré más.
Si quieres puedes suscribirte en el blog, o dejar un comentario.
Quizás te puede interesar
