aria-required

Cuándo utilizarlo

Solo cuando el atributo HTML required no está disponible. Los campos de formulario nativos —<input>, <select>, <textarea>— deben usar required. El atributo HTML es anunciado por todos los lectores de pantalla, participa en la validación nativa del navegador y activa la pseudoclase CSS :required. aria-required no hace ninguna de estas cosas por sí solo; es puramente un anuncio.

Los casos legítimos para aria-required:

• Un role="combobox" personalizado construido sobre un <div> o un <input> con estilos propios donde se ha asumido el control de la validación.
• Un role="radiogroup" donde el grupo en su conjunto es obligatorio (no es posible colocar required en un <div>).
• Un selector de fecha, un selector de archivos o un widget de valoración personalizados que no son entradas nativas.

Si es posible usar HTML required, debe usarse.

Cómo se comporta

Es un valor booleano. aria-required="true" hace que la tecnología de asistencia anuncie «requerido» (o «debe completarse», según el lector de pantalla) junto al nombre y rol del campo. aria-required="false" equivale a omitir el atributo y raramente es necesario.

aria-required no impide el envío del formulario. No añade un asterisco rojo. No activa ninguna pseudoclase CSS. Es únicamente una señal para la tecnología de asistencia. La lógica de validación, los mensajes de error y el indicador visual de campo obligatorio siguen siendo responsabilidad del desarrollador.

El indicador visual de campo obligatorio (un *, la palabra «requerido», etc.) también debe transmitirse en el nombre accesible —ya sea en el texto de la etiqueta visible o mediante una descripción— para que tanto el usuario con visión como el usuario de tecnología de asistencia reciban la misma información.

Errores frecuentes

• Usar aria-required="true" en un <input> nativo en lugar del atributo HTML required. Funciona, pero se pierde la validación del navegador y el estilo :required sin ninguna razón.
• Establecer aria-required="true" en un elemento que no es un control de formulario: un botón, un encabezado o un div sin rol. El atributo se ignora.
• Omitir el indicador visual de campo obligatorio. Los usuarios con visión ven un campo sin marcar; los usuarios de tecnología de asistencia escuchan «requerido». Esto supone un problema con el criterio de éxito WCAG 1.3.3.
• Marcar un campo como obligatorio en ARIA pero omitirlo en la lógica de validación del envío del formulario. El anuncio dice que es obligatorio; el servidor acepta el campo en blanco sin problema.
• Combinar aria-required con aria-invalid="true" demasiado pronto. El campo es inválido solo después de que el usuario haya intentado enviar el formulario y lo haya dejado en blanco, no al cargar la página.
• Localizar el indicador visual «*» pero olvidar que el texto para el lector de pantalla en la etiqueta queda desincronizado.

Ejemplo

<!-- Entrada nativa: se debe usar el atributo HTML -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Combobox personalizado donde HTML required no está disponible -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>