Asociar errores a campos con aria-describedby

Un mensaje de error situado junto a un campo parece estar relacionado con él. Pero para un lector de pantalla solo es texto suelto que quizá el usuario nunca escuche. ⚠️

Debe vincular formalmente el mensaje con su campo de entrada. El atributo que lo hace es aria-describedby, y se coloca en el campo.

Asigne un id al elemento de error y, después, establezca el aria-describedby del campo de entrada con ese mismo id. Ahora ambos están vinculados oficialmente.

Cuando el foco llega al campo de entrada, el lector de pantalla lee la etiqueta, el tipo y después la descripción. El error ya no queda aislado.

aria-describedby no sustituye a la etiqueta. La etiqueta proporciona el nombre; describedby añade información adicional que se lee después.

Puede indicar varios ids separados por espacios. El navegador los lee en orden, de modo que puede combinar una indicación y un error.

Añada el id del error a aria-describedby solo mientras se muestre el error. Apuntar a un nodo vacío u oculto puede hacer que se lea nada o confundir a los usuarios.

El elemento descrito debe contener texto real y visible. aria-describedby lee su contenido, por lo que un span vacío no describe nada útil.

Si el destino tiene display none, la mayoría de los lectores de pantalla lo omiten. Mantenga el texto del error renderizado y visible para que la descripción se anuncie realmente.

Combine describedby con aria-invalid en el mismo campo. Uno indica que algo ha fallado; el otro explica el motivo. Juntos cuentan toda la historia.

El mismo atributo también transmite indicaciones sobre el formato, como las reglas de una contraseña. Los errores son un uso habitual, pero no el único.

¿Cómo consigue que un lector de pantalla lea un error junto con su campo?

Vincule los errores con los campos mediante aria-describedby, apuntando a un id real y visible. El lector de pantalla leerá entonces el campo y su error conjuntamente. ✅