Comunicar estados usando ARIA. Parte 1

31/08/2021

Si bien es recomendado crear componentes con html como base, este tiene algunas limitaciones, y cuando estás creando un componente personalizado no siempre será suficiente. Un ejemplo de esto es el saliendo del sitio: patrón de diseño de divulgación donde escondes y muestras contenido. En este ejemplo estás cambiando el estado entre visible y escondido. Es importante poder comunicar dicho estado de manera programática para que personas usando tecnología de asistencia como un lector de pantalla puedan entender su función. Es además un requsito para no encontrarte con un fallo al criterio de conformidad saliendo del sitio: 4.1.2 - Nombre, función, valor . El html no nos permite hacer esto, y es aquí donde debemos recurrir a ARIA.

ARIA es un acrónimo que en inglés significa Accessible Rich Internet Applications y consiste de una serie de atributos que ayudan a hacer el contenido web más accesible. A través de roles, estados y propiedades te permite crear semántica que será comunicada a tecnología de asistencia. En el siguiente enlace puedes encontrar la saliendo del sitio: especificación de ARIA 1.1 .

En este artículo explicaremos cómo y cuándo usar los siguientes atributos que sirven para comunicar estados usando ARIA:

  • aria-expanded
  • aria-current
  • aria-invalid
  • aria-hidden

aria-expanded

Este atributo permite indicar al usuario que existe contenido colapsable, y comunica si dicho contenido se encuentra actualmente escondido o visible. La propiedad acepta los valores false y true. Si el valor es false se está indicando que el contenido está colapsado o oculto. Si el valor es true está expandido o visible.

En qué elementos usar aria-expanded?

Según la especificación de ARIA en su versión 1.1, la propiedad aria-expanded solo es permitida en los siguientes elementos con roles implícitos o explícitos:

  • button
  • combobox
  • document
  • link
  • section
  • sectionhead
  • window
section, sectionhead y windows son roles abstractos y no deben ser usados.

Su uso más común es en un botón. Ya sea para crear una sección de preguntas frecuentes, un menú de navegación o un componente listbox.

Si bien está permitido usar la propiedad en un enlace, esto no es recomendado puesto que puede resultar confuso para algunos usuarios. El propósito de un enlace es llevar al usuario a otra página o sección dentro de la página, un enlace colapsado no tiene mucho sentido.

Usar o no aria-controls?

La saliendo del sitio: especificación de aria-expanded recomienda usar la propiedad aria-controls cuando el elemento que usa aria-expanded controla la visibilidad de otro elemento. Esto creará una asociación programática entre ellos:

<button aria-expanded="false" aria-controls="pregunta-serie">Cuál es tu serie favorita?</button> <div id="pregunta-serie">Community, obviamente.</div>
El valor de aria-controls debe ser idéntico al valor del id del elemento que controla, y único en la página.

Sin embargo, el soporte de esta propiedad es prácticamente inexistente. El único lector de pantalla que anunciaba su existencia era JAWS, pero desde el 2019 eso ya no es así y dicha función debe ser activada por el usuario en la sección de ajustes.

Por tanto, actualmente no existe un gran beneficio al usuario, y su uso puede ser considerado opcional.

Ejemplo de aria-expanded

Para cambiar el estado es necesario usar Javascript, el valor de aria-expanded debe ser false cuando el contenido esté colapsado, y cambiado a true cuando esté extendido.

aria-current

Hay que recordar que las relaciones deben ser comunicadas no solo de manera visual, sino también programáticamente para que puedan ser entendidas por todas las personas. El atributo aria-current indica el elemento actual dentro de un grupo de elementos relacionados, y puede ser usado cuando dicho elemento está destacado visualmente. Esto permite a una persona usando un lector de pantalla entender dicha relación. Ejemplos de esto podría ser la página actual en la navegación principal, el paso actual en un proceso de compra o este saliendo del sitio: ejemplo de una navegación de migas .

Valores permitidos de aria-current

  • page: usado para indicar la página actual dentro de un conjunto de páginas.
  • step: usado para indicar el paso actual dentro de un proceso.
  • location: usado para indicar la ubicación actual dentro de un ambiente o contexto.
  • date: usado para indicar la fecha actual dentro de un conjunto de fechas.
  • time: usado para indicar la hora actual dentro de un conjunto horas.
  • true: usado para indicar el elemento actual dentro de un conjunto.
  • false: no representa el elemento actual dentro de un conjunto.

Ejemplo de aria-current

<nav> <ul> <li><href="#" aria-current="page">Inicio</a></li> <li><href="#">Servicios</a></li> <li><href="#">Nosotros</a></li> <li><href="#">Contacto</a></li> </ul> </nav>

aria-invalid

Este atributo permite indicar que un valor ingresado no corresponde al formato esperado, y es comúnmente utilizado en la validación de un formulario.

Valores permitidos de aria-invalid

  • grammar: usado para indicar que un error gramatical ha sido detectado.
  • spelling: usado para indicar que un error ortográfico ha sido detectado.
  • false: ningún error ha sido detectado.
  • true: usado para indicar que el valor ingresado por el usuario ha fallado la validación.

Donde usar aria-invalid?

En la versión 1.1 de la especificación de ARIA, el atributo aria-invalid es un estado global. Es decir, puede ser usado en cualquier elemento. Sin embargo, a partir de la versión 1.2 esto va a cambiar y solo será permitido en los elementos con los siguientes roles implícitos o explícitos:

  • application
  • checkbox
  • combobox
  • gridcell
  • listbox
  • radiogroup
  • slider
  • spinbutton
  • textbox
  • tree

Ejemplo de aria-invalid

<label for="nombre">Nombre</label> <input type="text" id="nombre" aria-invalid="false"> // Cuando exista un error de validación el valor de aria-invalid cambia a true <label for="nombre">Nombre</label> <input type="text" id="nombre" aria-invalid="true">

aria-hidden

Este atributo es usado para indicar si un elemento está expuesto al API de accesibilidad. Los valores permitidos son false y true. Cuando el valor es true, el elemento con dicho atributo y todos sus hijos serán removidos del árbol de accesibilidad y no podrán ser descubiertos por tecnologías de asistencia. Es importante destacar que esto no significa que el elemento quede visualmente escondido, seguirá siendo visible.

Cuándo usar aria-hidden?

Hay que tener en cuenta que no todas las personas que usan un lector de pantalla son ciegas. Un elemento con aria-hidden="true" no será anunciado por un lector de pantalla, pero seguirá siendo visible. Por tanto, algunos usuarios podrían preguntarse por qué hay contenido visible que no está siendo anunciado. Por eso hay que tener cuidado con utilizar este atributo, y es recomendado usarlo sólo en caso de tener contenido decorativo, duplicado o que no se encuentre visible en la pantalla.

<div aria-hidden="true"> Este contenido no será anunciado por un lector de pantalla, pero seguirá siendo visible. </div>

Si lo que deseas es esconder el contenido visualmente y también para tecnología de asistencia, una alternativa es usar display: none con CSS.

.escondido { display: none; } <div class="escondido"> Este contenido estará escondido visualmente y no será anunciado por un lector de pantalla. </div>

aria-hidden y elementos interactivos

Hay que tener cuidado de no usar aria-hidden="true" en elementos que contengan elementos interactivos. En el siguiente caso el atributo es usado en un elemento padre que contiene un botón:

<div aria-hidden="true"> <button>Soy un botón</button> </div>

El botón seguirá siendo visible y recibirá foco, pero nada será anunciado por un lector de pantalla porque el elemento ha sido removido del árbol de accesibilidad. Esto puede resultar confuso para algunos usuarios.