Accessible description

Extra help attached to a control for assistive tech, such as format instructions or an error, without replacing its name.

extra instructions for the screen readerhelper text read after the field nameconnect the hint to the inputscreen reader form hintwhy does the hint not get readthe password rules are never announcedmake the error message belong to the fieldaria descibedby

See it

Live demo coming soon

What it is

An accessible description is supporting information attached to an element after its accessible name. The name answers 'what is this?'; the description adds help such as 'Use at least 12 characters', formatting guidance, or the reason a field is invalid. Assistive technology can retrieve that information without stuffing it into the control's name.

The usual HTML technique is aria-describedby pointing to the id of visible helper or error text. It can reference more than one id, and their text is combined in the listed order. Keep the instructions on screen as well, so people with cognitive disabilities and anyone who missed the announcement get the same help.

Gotcha: a description never repairs a missing name. An input described as 'Required' but lacking a label is still a nameless input. Also avoid turning a paragraph of policy into one giant description; attach only the information needed at that control and link to the longer material. The title attribute also feeds the description, which is exactly why it is a bad place to put help: it never appears on touch, never appears on keyboard focus, and cannot be styled or magnified.

Ask AI for it

Add accessible descriptions to this form with aria-describedby. Give each helper and error message a stable id, then put the relevant ids on the input in the order the information should be read. Preserve any existing description id when an error appears instead of overwriting it, and set aria-invalid='true' while the error is active. Keep every instruction visibly rendered, concise, and specific to its control. Verify in the Chrome DevTools accessibility panel that every field has a separate computed name and description, and fix missing names with a real label element rather than trying to use aria-describedby as the label.

You might have meant

accessible nameform label associationaria labelscreen readererror identification