id summary reporter owner description type status component version severity resolution keywords cc stage has_patch needs_docs needs_tests needs_better_patch easy ui_ux 32819 Django forms - fields’ help text and errors should be associated with input Thibaud Colas nobody "With Django’s default field rendering, all field errors are rendered as a list above the field’s label, and help text is rendered after the field’s form element. Example with `as_p`: {{{

Help

}}} One problem for screen reader users is that the association between the errors and the field, and between the help text and the field, is only communicated visually. This is a failure of either WCAG 2.1 level A [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html SC 1.3.1: Info and Relationships], or [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions SC 3.3.2: Labels or Instructions]. More importantly, it just makes it harder than necessary for screen reader users to make use of help text, and to identify error messages. The fix is relatively straightforward – using `aria-describedby`, as documented in the (non-normative) [https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1.html ARIA1 Using the aria-describedby property to provide a descriptive label for user interface controls] technique. Here is another well-known accessibility-oriented UI library that implements this technique: [https://design-system.service.gov.uk/components/text-input/#error-messages GOV.UK design system – text input with error message]. Here is what implementing `aria-describedby` would look like in the same example as above: {{{

This field is required.

Help

}}} We have additional `id` attributes, `aria-describedby`, and `errorlist` is no longer a `