El atributo “aria-required” es innecesario para elementos que ya tienen el atributo “required”.

El atributo HTML required se introdujo en HTML5 y le dice tanto al navegador como a las tecnologías de asistencia que un campo de formulario debe rellenarse antes de que el formulario pueda enviarse. El atributo aria-required sirve para el mismo propósito pero proviene de la especificación WAI-ARIA, que fue diseñada para llenar vacíos de accesibilidad en HTML. Ahora que required tiene amplio soporte, usar ambos atributos en el mismo elemento es una duplicación innecesaria.

El validador de W3C genera esta advertencia porque los atributos ARIA redundantes añaden ruido a tu código sin proporcionar ningún beneficio. Uno de los principios fundamentales del uso de ARIA es la primera regla de ARIA: si puedes usar un elemento o atributo HTML nativo que ya tiene la semántica que necesitas, utiliza ese en lugar de añadir ARIA. El atributo nativo required proporciona validación integrada del navegador, señales visuales e información de accesibilidad todo a la vez — algo que aria-required por sí solo no puede hacer.

Los lectores de pantalla modernos como NVDA, JAWS y VoiceOver interpretan correctamente el atributo nativo required y anuncian el campo como obligatorio a los usuarios. Mantener ambos atributos no causa un problema funcional, pero crea sobrecarga de mantenimiento, desordena tu código y señala a otros desarrolladores que algo especial podría estar ocurriendo cuando no es así.

Cómo solucionarlo

1. Si tu elemento ya tiene el atributo required, elimina aria-required="true".
2. Si tu elemento solo tiene aria-required="true" y quieres validación nativa del navegador, reemplázalo con required.
3. En casos excepcionales donde necesites dar soporte a tecnologías de asistencia que no reconocen el atributo nativo required (algunas versiones muy antiguas de lectores de pantalla), mantener ambos es una decisión consciente — pero para la gran mayoría de proyectos, el atributo nativo por sí solo es suficiente.

Ejemplos

❌ aria-required redundante junto a required

<form action="/order">
  <label for="city">City</label>
  <input id="city" name="city" type="text" aria-required="true" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" aria-required="true" required>

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" aria-required="true" required></textarea>

  <button type="submit">Submit</button>
</form>

Esto activa la advertencia del validador en cada elemento donde aparecen ambos atributos.

✅ Usando solo el atributo nativo required

<form action="/order">
  <label for="city">City</label>
  <input id="city" name="city" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" required></textarea>

  <button type="submit">Submit</button>
</form>

✅ Usando aria-required en un elemento no nativo

Hay casos de uso válidos para aria-required — específicamente cuando construyes controles de formulario personalizados que no usan elementos de formulario nativos. En ese escenario, aria-required es la elección correcta porque el atributo nativo required no tiene efecto en elementos que no son de formulario.

<div role="combobox" aria-required="true" aria-expanded="false" aria-labelledby="color-label">
  <span id="color-label">Favorite color</span>
</div>

Aquí, aria-required="true" es necesario porque un <div> no admite el atributo nativo required.

Más información:

MDN Reference

MDN: aria-required

→

W3C Reference

W3C: aria-required

→