Opened 18 months ago

Last modified 11 months ago

#32820 assigned Bug

Fields’ errors should be programmatically associated with fields.

Reported by: Thibaud Colas Owned by: Demetris Stavrou
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 18 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 (10)

Changed 18 months ago by Thibaud Colas

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

comment:1 Changed 18 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 18 months ago by Mariusz Felisiak

Triage Stage: UnreviewedAccepted

comment:3 Changed 18 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 18 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 17 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 15 months ago by Kapil Bansal

Owner: set to Kapil Bansal
Status: newassigned

comment:9 Changed 15 months ago by Kapil Bansal

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

comment:10 Changed 13 months ago by Demetris Stavrou

Owner: changed from Kapil Bansal to Demetris Stavrou

I will give this a try since there is inactivity.

comment:11 Changed 11 months ago by Thibaud Colas

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 11 months ago by Thibaud Colas (previous) (diff)
Note: See TracTickets for help on using tickets.
Back to Top