Validación HTML: El elemento "div" carece de uno o más de los siguientes atributos: "aria-expanded", "aria-valuemax", "aria-valuemin", "aria-valuenow", "role".

Acerca de este problema HTML

El atributo aria-required le dice a las tecnologías de asistencia que un campo de formulario debe ser completado antes de que el formulario pueda ser enviado. Sin embargo, este atributo solo es válido en elementos que funcionan como widgets interactivos. Un div simple no tiene un rol ARIA implícito, por lo que las tecnologías de asistencia no tienen contexto sobre qué tipo de entrada se espera. El validador marca esto porque un atributo aria-required en un div genérico es efectivamente insignificante sin atributos ARIA adicionales que definan el rol y comportamiento del elemento.

Esto importa por varias razones:

Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia dependen de los roles para entender cómo presentar un elemento a los usuarios. Sin un rol, aria-required proporciona información incompleta.
Cumplimiento de estándares: La especificación WAI-ARIA define qué atributos están permitidos en qué roles. Usar aria-required sin un rol establecido viola estas restricciones.
Comportamiento del navegador: Los navegadores pueden ignorar o malinterpretar los atributos ARIA cuando aparecen en elementos que carecen del contexto de rol adecuado.

Cómo solucionarlo

Opción 1: Usar HTML semántico nativo (preferido)

Siempre que sea posible, usa elementos de formulario HTML nativos. Vienen con semántica de accesibilidad incorporada, interacción de teclado y validación — no necesita ARIA.

Reemplaza un div con aria-required="true" con un control de formulario apropiado usando el atributo nativo required:

<input type="text" required>
<select required>
  <option value="">Elige uno</option>
  <option value="1">Opción 1</option>
</select>
<textarea required></textarea>

Opción 2: Añadir un atributo `role` apropiado

Cuando debas usar un div como widget personalizado (estilizado y mejorado con CSS y JavaScript), añade el atributo role correcto para darle significado semántico. Elige el rol que coincida con el comportamiento real del widget — no elijas uno arbitrariamente.

Roles comunes que soportan aria-required:

combobox — un dropdown personalizado con entrada de texto
listbox — una lista de selección personalizada
radiogroup — un grupo de opciones tipo radio
spinbutton — un stepper numérico (también requiere aria-valuemax, aria-valuemin, y aria-valuenow)
textbox — una entrada de texto personalizada

Opción 3: Añadir otros atributos ARIA calificadores

Para ciertos widgets como deslizadores o spinbuttons, puedes necesitar aria-valuemax, aria-valuemin, y aria-valuenow además de (o como parte de) definir el rol. Estos atributos inherentemente establecen un contexto de widget.

Ejemplos

❌ Inválido: `aria-required` en un `div` simple

<div aria-required="true">
  <div data-value="One">1</div>
  <div data-value="Two">2</div>
  <div data-value="Three">3</div>
</div>

Esto dispara el error de validación porque el div no tiene rol u otros atributos ARIA para definir qué tipo de widget es.

✅ Corregido: Añadiendo el `role` apropiado

<div aria-required="true" role="radiogroup" aria-label="Elige un número">
  <div role="radio" aria-checked="false" tabindex="0">1</div>
  <div role="radio" aria-checked="false" tabindex="0">2</div>
  <div role="radio" aria-checked="false" tabindex="0">3</div>
</div>

Añadir role="radiogroup" le da al div una identidad semántica. Ten en cuenta que los elementos hijos también necesitan roles y atributos apropiados para que el widget sea completamente accesible.

✅ Corregido: Usando HTML nativo en su lugar

<fieldset>
  <legend>Elige un número</legend>
  <label><input type="radio" name="number" value="1" required> 1</label>
  <label><input type="radio" name="number" value="2"> 2</label>
  <label><input type="radio" name="number" value="3"> 3</label>
</fieldset>

Este enfoque usa botones radio nativos con el atributo required, eliminando la necesidad de ARIA completamente. El navegador maneja automáticamente la accesibilidad, navegación con teclado y validación de formulario.

✅ Corregido: Un spinbutton personalizado con atributos de valor

<div role="spinbutton"
  aria-required="true"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="50"
  aria-label="Cantidad"
  tabindex="0">
  50
</div>

Para un rol spinbutton, también debes proporcionar aria-valuemin, aria-valuemax, y aria-valuenow para describir completamente el estado del widget.