Opened 3 years ago

Last modified 7 months ago

#32820 closed Bug

Django forms - fields’ errors should be programmatically associated with fields — at Version 1

Reported by: Thibaud Colas Owned by:
Component: Forms Version: dev
Severity: Normal Keywords: accessibility, ui, forms
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description (last modified by 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>
  <label for="id_duration_required">Duration required:</label>
  <input type="text" name="duration_required" required="" id="id_duration_required">
  <span class="helptext">Help</span>

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:

Change History (2)

by Thibaud Colas, 3 years ago

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

comment:1 by Thibaud Colas, 3 years ago

Description: modified (diff)
Note: See TracTickets for help on using tickets.
Back to Top