#32820: Django forms - fields’ errors should be programmatically associated with
fields
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: Forms | Version: 3.2
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage:
forms | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Description changed by Thibaud Colas:
Old description:
> Related: [https://code.djangoproject.com/ticket/32819 #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 [https://www.w3.org/WAI/WCAG21/Understanding/error-identification
> 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
> [https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21 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:
>
> Screenshot of the VoiceOver text-to-speech output, announcing "Email
> required: required invalid data edit text"
New description:
Related: [https://code.djangoproject.com/ticket/32819 #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 [https://www.w3.org/WAI/WCAG21/Understanding/error-identification
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
[https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21 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:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/32820/email-
required-aria-invalid.png)]]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:1>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.4901e43ba32f2487a0aa0be22dcea567%40djangoproject.com.
