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
32820	Django forms - fields’ errors should be programmatically associated with fields	Thibaud Colas		"Related: [https://code.djangoproject.com/ticket/32819 #32819]. This could be worth fixing at the same time, although I would expect this issue shouldn’t require as breaking of a change to fix.

Django currently displays errors above fields in its forms rendering:


{{{
<ul class=""errorlist"">
  <li>This field is required.</li>
</ul>
<p>
  <label for=""id_duration_required"">Duration required:</label>
  <input type=""text"" name=""duration_required"" required="""" id=""id_duration_required"">
  <span class=""helptext"">Help</span>
</p>
}}}

One thing this is missing is a way to programmatically indicate the field is in error – currently this can only be inferred visually because the error messages are displayed above the field. This is fail of WCAG 2.1 level A [https://www.w3.org/WAI/WCAG21/Understanding/error-identification 3.3.1: Error Identification]. The most common way to do this programmatically is to use `aria-invalid=""true""` on the field, as demonstrated in the non-normative [https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21 technique ARIA21]:

{{{
  <input type=""text"" name=""duration_required"" required="""" id=""id_duration_required"" aria-invalid=""true"">
}}}

Here is the result in VoiceOver on Safari – announcing ""invalid data"" after the field label and required state:

Screenshot of the VoiceOver text-to-speech output, announcing ""Email required: required invalid data edit text""

"	Bug	new	Forms	3.2	Normal		accessibility, ui, forms		Unreviewed	0	0	0	0	0	0