Relationships

Visual relationships between form elements should also be made programmatically, so that screen reader users get the same experience.

Form fields that have a label and input pairing will have a for and id attribute on each of those elements, but sometimes groupings can be more complex.

Hint/help text

This is some text to help you complete the form field successfully.

Fieldsets with hint/help text

With fieldsets, the aria-describedby attribute will normally be added to the <fieldset> tag if it applies to all options in the set.

Do you like Marmite?
You either like it or you don’t.

It’s still fine to add hint text on individual radio options though.

Do you like The Sopranos?
This is the correct answer.
You haven’t watched it, have you?

Sometimes it’s necessary to provide hint text on both the group and the input itself:

Do you like Return of the Jedi? This was the third film in the Star Wars franchise, released in 1983.
You were young enough to enjoy the Ewoks.
You were too old to enjoy the Ewoks.

Note adding the aria-describedby attribute to the <fieldset> would be more efficient than adding a second value to the <input> elements’ aria-describedby attributes. Unfortunately screen readers usually override, rather than add to this with the more specific aria-describedby attributes on the <input> elements.