Tying Errors to Fields With aria-describedby

An error message sitting near a field looks connected to you. But to a screen reader it is just loose text the user may never hear. ⚠️

You need to formally tie the message to its input. The attribute that does this is aria-describedby, and it lives on the field.

Give the error element an id, then set the input's aria-describedby to that same id. Now the two are officially linked.

When focus lands on the input, the screen reader reads the label, the type, and then the description. The error is no longer orphaned.

aria-describedby does not replace the label. The label gives the name; describedby adds extra info that is read after it.

You can list several ids, space-separated. The browser reads them in order, so you can join a hint and an error together.

Add the error id to aria-describedby only while the error is showing. Pointing at an empty or hidden node can read nothing or confuse users.

The described element must hold real, visible text. aria-describedby reads its content, so an empty span describes nothing useful.

If the target has display none, most screen readers skip it. Keep error text rendered and visible so the description is actually announced.

Pair describedby with aria-invalid on the same field. One says this failed; the other says here is why. Together they tell the full story.

The same attribute carries format hints too, like password rules. Errors are one common use, not the only one.

How do you make a screen reader read an error with its field?

Tie errors to fields with aria-describedby pointing at a real, visible id. The screen reader then reads the field and its error together. ✅