追加情報に使う aria-describedby

Sometimes a control needs more than a name. aria-describedby attaches extra context that a screen reader reads after the name.

Like labelledby, aria-describedby holds the id of another element. The browser pulls that element text in as the description.

A screen reader speaks the name first, then a short pause, then the description. The order helps users grasp the control quickly.

Field hints like format rules belong in aria-describedby, so the guidance reads automatically when the field receives focus.

A description is supplementary. If an element has only aria-describedby and no name, it is still effectively unlabeled.

Give aria-describedby several space-separated ids, and the browser joins their text, which is handy for a hint plus an error.

Point aria-describedby at a validation message so the error reads aloud with the field, not stranded somewhere else on the page.

A description should be a short sentence. Long aria-describedby text gets read in full every time, which quickly turns tiresome.

Unlike a hidden label, the referenced hint usually stays visible on screen, helping sighted users at the same time as it helps others.

Most screen readers honor aria-describedby, but some announce it only in certain modes, so test the hint with a real reader.

Use aria-labelledby for what a control is called and aria-describedby for extra detail about it. They serve different jobs.

You want a password rule read after the field name. Which attribute fits?

You learned that aria-describedby references ids to read hints and errors after the name, supplementing it without ever replacing it. 💬