Django forms - fields’ errors should be programmatically associated with fields

[Thibaud Colas]

Related: #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 ​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 ​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:

[Thibaud Colas]

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