Opened 4 months ago

Last modified 10 days ago

#32820 assigned Bug

Fields’ errors should be programmatically associated with fields.

Reported by: Thibaud Colas Owned by: Kapil Bansal
Component: Forms Version: 3.2
Severity: Normal Keywords: accessibility, ui, forms
Cc: Triage Stage: Accepted
Has patch: no 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>
</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:

https://code.djangoproject.com/raw-attachment/ticket/32820/email-required-aria-invalid.png

Attachments (1)

email-required-aria-invalid.png (75.5 KB) - added by Thibaud Colas 4 months ago.
Screenshot of the VoiceOver text-to-speech output, announcing "Email required: required invalid data edit text"

Download all attachments as: .zip

Change History (8)

Changed 4 months ago by Thibaud Colas

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

comment:1 Changed 4 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 3 months ago by Mariusz Felisiak

Triage Stage: UnreviewedAccepted

comment:3 Changed 3 months ago by Mariusz Felisiak

Summary: Django forms - fields’ errors should be programmatically associated with fieldsFields’ errors should be programmatically associated with fields.

comment:4 Changed 3 months ago by Chandra Kiran G

Hey, can I work on this? I'm a beginner here, any kind of help would be greatly appreciated.

Thanks,
Kiran

comment:5 Changed 2 months ago by Tom Carrick

Kiran, assign yourself the ticket if you want to take it. If you need help, I would first read https://docs.djangoproject.com/en/3.2/internals/contributing/ and try to get the tests passing at least.

You would probably need to find where the HTML for these forms are generated. I think https://github.com/django/django/tree/main/django/forms/templates/django/forms/widgets might be a good place to start. Then find out the best way to tell if the field is invalid and the best place to add the attribute.

If you get stuck, you could try posting on the forum or the django-developers mailing list.

comment:8 Changed 10 days ago by Kapil Bansal

Owner: set to Kapil Bansal
Status: newassigned

comment:9 Changed 10 days ago by Kapil Bansal

If I am not wrong, we need to remove the errorlist and use aria_techniques instead?

Note: See TracTickets for help on using tickets.
Back to Top