Opened 3 years ago

Closed 8 months ago

#32820 closed Bug (fixed)

Fields’ errors should be programmatically associated with fields.

Reported by: Thibaud Colas Owned by: David Smith
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>
</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 3 years ago.
Screenshot of the VoiceOver text-to-speech output, announcing "Email required: required invalid data edit text"

Download all attachments as: .zip

Change History (15)

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)

comment:2 by Mariusz Felisiak, 3 years ago

Triage Stage: UnreviewedAccepted

comment:3 by Mariusz Felisiak, 3 years ago

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

comment:4 by Chandra Kiran G, 3 years ago

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

Thanks,
Kiran

comment:5 by Tom Carrick, 3 years ago

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 by Kapil Bansal, 3 years ago

Owner: set to Kapil Bansal
Status: newassigned

comment:9 by Kapil Bansal, 3 years ago

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

comment:10 by Demetris Stavrou, 2 years ago

Owner: changed from Kapil Bansal to Demetris Stavrou

I will give this a try since there is inactivity.

comment:11 by Thibaud Colas, 2 years ago

Note based on recent research for PR #15036:

  • I still think this is a _Bug_ (WCAG 2.1 conformance fail) as Django stands currently, however if/when ticket #32819 is tackled, we should mark this ticket as a _New feature_, as contrary to what I thought aria-invalid="true" isn’t required for conformance when aria-describedby already points to an error message. If the error message can’t be identified as such, then the bug to fix would be to make the error messages unambiguous, which is a different issue.
  • Even though I would expect fixing this to be a straightforward improvement for almost all Django implementers, it’ll change how forms are announced to screen reader users, so it would be valid to consider this as a breaking change.
Last edited 2 years ago by Thibaud Colas (previous) (diff)

comment:12 by Jacob Walls, 15 months ago

Has patch: set
Patch needs improvement: set

comment:13 by Gregor Jerše, 10 months ago

Owner: changed from Demetris Stavrou to Gregor Jerše
Version: 3.2dev

comment:14 by Natalia Bidart, 10 months ago

There is a new PR here

comment:15 by David Smith, 8 months ago

Owner: changed from Gregor Jerše to David Smith
Patch needs improvement: unset

comment:16 by Mariusz Felisiak <felisiak.mariusz@…>, 8 months ago

Resolution: fixed
Status: assignedclosed

In 10725a3:

Fixed #32820 -- Added aria-invalid="true" to fields with errors.

Co-authored-by: Demetris Stavrou <demestav@…>
Co-authored-by: David Smith <smithdc@…>

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