aria-invalid

Cuándo usarlo

En un input, textarea, combobox, listbox u otro widget de formulario cuyo valor actual ha fallado la validación. Se debe establecer aria-invalid="true" después de que el usuario haya tenido la oportunidad de introducir un valor — normalmente al perder el foco o al enviar el formulario. Establecerlo en el primer renderizado, antes de que el usuario haya escrito nada, resulta molesto y anuncia los campos requeridos vacíos como inválidos antes de que el usuario haya hecho nada.

Debe combinarse con el mensaje de error real. El patrón es:

1. Renderizar un mensaje de error visible con su propio id.
2. Establecer aria-invalid="true" en el input.
3. Apuntar aria-describedby al id del mensaje de error.

Los lectores de pantalla anuncian entonces tanto el estado inválido como la explicación: «Correo electrónico, campo de texto, entrada no válida, introduzca una dirección de correo electrónico válida».

Cómo mantenerlo sincronizado

Los valores válidos son "true", "false", "grammar" y "spelling". En la práctica, los más habituales son "true" y "false". "grammar" y "spelling" los utilizan los editores de texto enriquecido para marcar un fragmento concreto; la mayoría de los flujos de trabajo de formularios no los necesitan.

El valor predeterminado es "false" (o se omite). Cuando la validación falla, se establece "true" y se muestra el mensaje de error. Cuando el usuario corrige el campo, se revierten ambos — aria-invalid vuelve a "false" y el mensaje de error se elimina u oculta — en el mismo instante.

El atributo HTML required y la pseudoclase CSS :invalid funcionan de forma independiente. aria-invalid es el indicador que consumen los lectores de pantalla; los demás son para navegadores y estilos. Conviene mantenerlos sincronizados.

Fallos habituales

• Establecer aria-invalid="true" antes de que el usuario haya tenido la oportunidad de interactuar con el campo.
• Marcar un campo como inválido sin aria-describedby y sin mensaje de error visible — el lector de pantalla anuncia «inválido» sin ninguna explicación.
• Dejar aria-invalid="true" después de que el usuario haya corregido el valor.
• Apuntar aria-describedby a un contenedor vacío, de modo que el anuncio del error queda en silencio.
• Usar aria-invalid en <fieldset> u otros contenedores que no son input — no tiene significado allí.
• Depender únicamente del color para indicar el estado de error — aria-invalid ayuda a los lectores de pantalla, pero sigue siendo necesaria una etiqueta visible o un icono para los usuarios videntes (WCAG 1.4.1).

Ejemplo

<label for="email">Dirección de correo electrónico</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Introduzca una dirección de correo electrónico válida.</p>