Only include text in the description

The HTML attribute aria-describedby, which you use to connect a description, must only contain text and no additional structure or interactive functionality like links, buttons, lists, headings or for example tooltips.

Screen readers don’t convey this information correctly or even skip it entirely in a description.

Demo of a description with a list, announced with VoiceOver in Safari

In this demo video, VoiceOver in Safari 18.6 skips the bulleted list from the description when a form field receives keyboard focus. NVDA 2024.4.1 in Firefox does the same. The codepen with the HTML/CSS of this demo: Demo rich text in a description.

What are the options for adding information and explanations to a form and its input fields? Follow the description decision tree.

Related WCAG Succes Criteria

• 1.3.1 Info and Relationships.
• 3.3.2 Labels or Instructions.

Resources

• NL Design System Guidelines for web forms (Dutch content).
• MDN: ARIA: aria-describedby attribute.
• W3C: Form Instructions.