Los atributos ARIA requeridos deben proporcionarse

Por qué esto es un problema de accesibilidad

Los roles ARIA describen qué es un elemento y cómo se comporta. Muchos roles dependen de atributos específicos de estado o propiedad para transmitir información crítica sobre el elemento. Por ejemplo, un role checkbox requiere aria-checked para que los usuarios sepan si la casilla de verificación está seleccionada. Sin él, un usuario de lector de pantalla escucha “checkbox” pero no tiene idea de si está marcada o no.

Este problema afecta a usuarios que son ciegos, sordociegos o tienen discapacidades motoras y dependen de tecnologías de asistencia para interactuar con el contenido web. Cuando faltan atributos requeridos, estos usuarios pierden contexto esencial sobre el estado de los widgets interactivos.

Esta regla se relaciona con el Criterio de Éxito 4.1.2 de WCAG 2.0, 2.1 y 2.2: Nombre, Función, Valor (Nivel A), que requiere que para todos los componentes de interfaz de usuario, el nombre, función y estados puedan determinarse programáticamente. Los atributos ARIA requeridos faltantes violan directamente este criterio porque el estado del elemento no puede comunicarse a las tecnologías de asistencia.

Cómo funcionan los atributos requeridos

Cada role ARIA tiene un conjunto de estados y propiedades requeridos definidos en la especificación WAI-ARIA. Estos atributos son esenciales para que el role funcione correctamente. Algunos ejemplos comunes:

Algunos roles heredan requisitos de roles ancestro. Cuando un role hereda de múltiples ancestros y un ancestro marca una propiedad como compatible mientras otro la marca como requerida, la propiedad se vuelve requerida en el role que hereda.

En algunos casos, los valores por defecto definidos en la especificación satisfacen el requisito automáticamente, por lo que no siempre necesitas establecer explícitamente cada atributo. Sin embargo, proporcionar explícitamente los atributos requeridos es el enfoque más seguro.

Cómo solucionar el problema

1. Identifica el role ARIA en el elemento.
2. Busca el role en la documentación de Roles WAI-ARIA para encontrar sus estados y propiedades requeridos.
3. Añade cualquier atributo requerido faltante con valores apropiados.
4. Asegúrate de que los valores de los atributos se actualicen dinámicamente cuando cambie el estado del widget (por ejemplo, alternando aria-checked entre true y false cuando se hace clic en una casilla de verificación).

Alternativamente, considera si un elemento HTML nativo podría reemplazar el widget ARIA personalizado. Los elementos nativos como <input type="checkbox">, <input type="range"> y <select> manejan la gestión de estado automáticamente sin necesidad de atributos ARIA.

Ejemplos

Incorrecto: Checkbox sin aria-checked

<div role="checkbox" tabindex="0">
  Accept terms and conditions
</div>

Un lector de pantalla anuncia esto como una casilla de verificación, pero el usuario no tiene forma de saber si está marcada o no.

Correcto: Checkbox con aria-checked

<div role="checkbox" tabindex="0" aria-checked="false">
  Accept terms and conditions
</div>

Mejor: Usar una casilla de verificación HTML nativa

<label>
  <input type="checkbox">
  Accept terms and conditions
</label>

Incorrecto: Slider sin atributos de valor requeridos

<div role="slider" tabindex="0">
  Volume
</div>

Sin aria-valuenow, las tecnologías de asistencia no pueden informar el valor actual del slider.

Correcto: Slider con atributos requeridos

<div role="slider" tabindex="0"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Volume">
</div>

Incorrecto: Combobox sin aria-expanded y aria-controls

<input role="combobox" type="text" aria-label="Search">

Correcto: Combobox con atributos requeridos

<input role="combobox" type="text"
  aria-label="Search"
  aria-expanded="false"
  aria-controls="search-listbox">
<ul id="search-listbox" role="listbox" hidden>
  <li role="option">Option 1</li>
  <li role="option">Option 2</li>
</ul>

Incorrecto: Heading sin aria-level

<div role="heading">Section Title</div>

Correcto: Heading con aria-level

<div role="heading" aria-level="2">Section Title</div>

Mejor: Usar un elemento de encabezado nativo

<h2>Section Title</h2>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - Taxonomy of WAI-ARIA States and Properties

→