Opened 18 months ago

Last modified 8 weeks ago

#32819 assigned Bug

Fields’ help text and errors should be associated with input

Reported by: Thibaud Colas Owned by: Nimra
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: yes

Description (last modified by Thibaud Colas)

With Django’s default field rendering, all field errors are rendered as a list above the field’s label, and help text is rendered after the field’s form element. Example with as_p:

<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 problem for screen reader users is that the association between the errors and the field, and between the help text and the field, is only communicated visually. This is a failure of either WCAG 2.1 level A SC 1.3.1: Info and Relationships, or SC 3.3.2: Labels or Instructions. More importantly, it just makes it harder than necessary for screen reader users to make use of help text, and to identify error messages.

The fix is relatively straightforward – using aria-describedby, as documented in the (non-normative) ARIA1 Using the aria-describedby property to provide a descriptive label for user interface controls technique. Here is another well-known accessibility-oriented UI library that implements this technique: GOV.UK design system – text input with error message.

Here is what implementing aria-describedby would look like in the same example as above:

<div class="errorlist" id="id_duration_required_errorlist">
  <p>This field is required.</p>
</div>
<p>
  <label for="id_duration_required">Duration required:</label>
  <input type="text" name="duration_required" required="" id="id_duration_required" aria-describedby="id_duration_required_errorlist id_duration_required_helptext">
  <span class="helptext" id="id_duration_required_helptext">Help</span>
</p>

We have additional id attributes, aria-describedby, and errorlist is no longer a <ul>. Result in VoiceOver:

https://code.djangoproject.com/raw-attachment/ticket/32819/email-required-ariadescribedby.gif

Unfortunately I tried to have this with the errorlist kept as a ul, but it wasn’t announced by VoiceOver. I haven’t heard of this limitation before so am not sure why that might be the case – I’d appreciate others taking a look if possible.

Attachments (1)

email-required-ariadescribedby.gif (56.5 KB) - added by Thibaud Colas 18 months ago.
Screen recording of the VoiceOver text-to-speech output, announcing the field label, then error message, then help text.

Download all attachments as: .zip

Change History (8)

Changed 18 months ago by Thibaud Colas

Screen recording of the VoiceOver text-to-speech output, announcing the field label, then error message, then help text.

comment:1 Changed 18 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 18 months ago by Thibaud Colas

Component: contrib.adminForms

comment:3 Changed 18 months ago by Mariusz Felisiak

Summary: Django forms - fields’ help text and errors should be associated with inputFields’ help text and errors should be associated with input
Triage Stage: UnreviewedAccepted

Thanks. Ideally, we should avoid changing <ul> to <div>. Maybe <ul> could be wrapped by <div>.

comment:4 Changed 18 months ago by Hasan Ramezani

Owner: changed from nobody to Hasan Ramezani
Status: newassigned

I created a draft PR.

@Mariusz, Could you please check it and let me know if I choose the right direction to fix the problem? If so, I can continue with test adjustment.
@Thibaud, It would be great if you can if it will produce your desired output.

comment:5 Changed 15 months ago by Hasan Ramezani

Owner: Hasan Ramezani deleted
Status: assignednew

comment:6 Changed 12 months ago by PriyanshuGarg26

Owner: set to PriyanshuGarg26
Status: newassigned

comment:7 Changed 8 weeks ago by Nimra

Owner: changed from PriyanshuGarg26 to Nimra
Note: See TracTickets for help on using tickets.
Back to Top