Acerca de este problema HTML
El atributo aria-required es una propiedad WAI-ARIA que indica a las tecnologías de asistencia (como los lectores de pantalla) que un usuario debe proporcionar un valor para un control de formulario antes de que el formulario pueda ser enviado. Según la especificación ARIA, el valor del atributo debe ser "true" o "false". Cualquier otro valor — como "yes", "1", "", o una falta de ortografía — es inválido y producirá este error de validación.
Los errores comunes incluyen escribir aria-required="yes", aria-required="", aria-required="required", o incluso aria-required="True" (nota: el valor es sensible a mayúsculas y minúsculas y debe estar en minúsculas).
Por qué esto importa
Cuando se usa un valor inválido, las tecnologías de asistencia pueden no interpretar correctamente si el campo es obligatorio. Esto puede llevar a una experiencia confusa para los usuarios que dependen de lectores de pantalla, ya que puede que no se les informe que un campo es obligatorio antes de enviar un formulario. Usar valores de atributo válidos asegura un comportamiento consistente y predecible en todos los navegadores y tecnologías de asistencia.
Cuándo usar aria-required vs. required
Para elementos de formulario HTML nativos como <input>, <select> y <textarea>, debes usar el atributo HTML required incorporado. Proporciona tanto comportamiento de validación como información de accesibilidad de forma predeterminada, sin necesidad de ARIA.
El atributo aria-required está destinado para controles de formulario personalizados (no semánticos) — por ejemplo, un <div> con role="textbox" o role="combobox". En estos casos, el navegador no sabe que el elemento es un control de formulario, por lo que aria-required="true" comunica el requisito a las tecnologías de asistencia.
Ejemplos
❌ Valores inválidos para aria-required
<!-- "yes" no es un valor válido -->
<div
role="textbox"
contenteditable
aria-labelledby="name_label"
aria-required="yes">
</div>
<!-- Cadena vacía no es válida -->
<input type="text" aria-required="">
<!-- "required" no es válido -->
<input type="email" aria-required="required">
✅ Uso correcto con aria-required
<div id="email_label">Dirección de correo electrónico *</div>
<div
role="textbox"
contenteditable
aria-labelledby="email_label"
aria-required="true"
id="email">
</div>✅ Marcar explícitamente un campo como no obligatorio
<div id="notes_label">Notas (opcional)</div>
<div
role="textbox"
contenteditable
aria-labelledby="notes_label"
aria-required="false"
id="notes">
</div>✅ Enfoque preferido para elementos de formulario nativos
Cuando uses controles de formulario HTML estándar, omite aria-required y usa el atributo nativo required:
<label for="email">Dirección de correo electrónico *</label>
<input type="email" id="email" name="email" required>
<label for="country">País *</label>
<select id="country" name="country" required>
<option value="">Selecciona un país</option>
<option value="us">Estados Unidos</option>
<option value="uk">Reino Unido</option>
</select>
El atributo nativo required transmite automáticamente el estado requerido a las tecnologías de asistencia y también activa la validación incorporada del navegador, convirtiéndolo en la mejor opción cuando hay disponible un elemento de formulario nativo.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.