Opened 4 months ago

Last modified 6 days ago

#32819 new Bug

Fields’ help text and errors should be associated with input

Reported by: Thibaud Colas Owned by:
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 4 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 (6)

Changed 4 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 4 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 4 months ago by Thibaud Colas

Component: contrib.adminForms

comment:3 Changed 3 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 3 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 6 days ago by Hasan Ramezani

Owner: Hasan Ramezani deleted
Status: assignednew
Note: See TracTickets for help on using tickets.
Back to Top