Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: closed Component: Forms| Version: dev Severity: Normal | Resolution: fixed Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 1 Easy pickings: 0|UI/UX: 1 -+- Changes (by Carlton Gibson): * status: assigned => closed * resolution: => fixed Comment: Fixed by ec5659382a5f5fc2daf0c87ccc89d0fb07534874 for #32339. It may be possible to followup improving the `p`, `table`, and `ul` templates but see https://code.djangoproject.com/ticket/32339#comment:3. -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:27> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/010701809438015b-e1a84ed1-806a-42af-92d9-c2e41ca672e4-00%40eu-central-1.amazonses.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 1 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * needs_better_patch: 0 => 1 -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:26> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.13e665ecf16c969a2103ca0b8e15f1c3%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by David Smith): * has_patch: 0 => 1 -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:25> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.23ea90791bb8910671494d1069a4092a%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * has_patch: 1 => 0 * stage: Ready for checkin => Accepted -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:24> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.23d3dba05c7fb22cb872cae71e497f1b%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Ready for
forms, wcag| checkin
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Comment (by Mariusz Felisiak ):
In [changeset:"eba9a9b7f72995206af867600d6685b5405f172a" eba9a9b]:
{{{
#!CommitTicketReference repository=""
revision="eba9a9b7f72995206af867600d6685b5405f172a"
Refs #32338 -- Added Boundfield.legend_tag().
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:23>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.98b5657765cd475f1359f1d8e5b7a8d8%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Ready for forms, wcag| checkin Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * needs_better_patch: 1 => 0 * stage: Accepted => Ready for checkin -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:22> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.d2ca0c6d774d15c311f9f8a73a673199%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 1 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * needs_better_patch: 0 => 1 -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:21> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.f53bac313f9925478613cb0fc8620f10%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by David Smith): * has_patch: 0 => 1 -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:20> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.b81aa64d6495b045901659fa8023746b%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * has_patch: 1 => 0 * stage: Ready for checkin => Accepted Old description: > In the Forms API, there are issues with the default rendering of fields > that rely on widgets based on multiple radio or checkbox inputs: > `RadioSelect` and `CheckboxSelectMultiple`. This is with the default > rendering of those widgets, and with the custom rendering examples in the > official documentation. Here is a form I set up for my testing of the > default rendering: > > - Live form: http://django-admin- > tests.herokuapp.com/forms/example_form/p/ > - Form fields definitions: > https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py > - Template: > https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html > > == RadioSelect issues > > 1. The fields aren’t semantically grouped, only visually, so the grouping > isn’t apparent to assistive technlogies. It’s important that related > fields are grouped, and that the group has a label attached to it. If I > was auditing this professionally I would classify this as a fail for > [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html > SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label > are somewhat there, just not done with the appropriate semantics. > 2. (**fixed in b9e872b59329393f615c440c54f632a49ab05b78**) Speaking of > label – currently the group of fields is labeled by preceding it with > `Radio choice required:`. > This overrides the label of the first field within the group (and only > labels the first field, not the whole group). This is a fail for > [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html > 3.3.2: Labels or Instructions] and/or SC 1.3.1. > 3. Wrapping the fields each in their own list item makes the navigation > more tedious, as screen readers will first announce list items numbering, > and only then their content. > > Here is a screenshot demonstrating the label issue with macOS VoiceOver’s > rotor. Note how the first field has the wrong label due to the markup. > > [[Image(https://code.djangoproject.com/raw-attachment/ticket/32338/radio- > select-first-input-label.png)]] > > == CheckboxSelectMultiple issues > > Almost identical to the above, > > - Lack of a fieldset means no semantic grouping. > - The label isn’t associated with anything for this widget, so is less > problematic but no more correct. > - Wrapping the fields in list items also makes the form more verbose than > it should be (and the semantics issues are the same). > > == Documentation issues (fixed in > d8c17aa10c7f41e692fb6f5d0bf2fab7a90b9374) > > Additionally to the above, there are a few occurences of custom > radio/checkbox markup in the documentation that will lead to the same > issues: > > - https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#radioselect > - https://docs.djangoproject.com/en/3.1/intro/tutorial04/#write-a > -minimal-form > > == Proposed solution > > Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique > H71] of WCAG. The ideal solution is identical for both widgets, and also > for documentation code snippets: > > 1. Wrap the group of fields in a `fieldset`, including the group’s label, > the inputs, the help text, and any errors. > 2. Use a `legend` as the first item in the `fieldset` for the group’s > label, rather than a `label`. > 3. Replace the list markup with un-semantic div, or remove altogether. If > the list markup is needed for backwards compatibility, it could also use > `role="presentation"` so assistive technologies ignore the list & > listitem semantics, but I would only recommend that as a temporary > workaround. > > Here is sample markup to implement the above. The `div` aren’t needed, > I’ve only added t
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Ready for
forms, wcag| checkin
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Comment (by Mariusz Felisiak ):
In [changeset:"5942ab5eb165ee2e759174e297148a40dd855920" 5942ab5]:
{{{
#!CommitTicketReference repository=""
revision="5942ab5eb165ee2e759174e297148a40dd855920"
Refs #32338 -- Made RadioSelect/CheckboxSelectMultiple render in
tags.
This improves accessibility for screen reader users.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:18>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.f837cf35e58460ad185313faa36f3e7c%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Ready for forms, wcag| checkin Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * stage: Accepted => Ready for checkin -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:17> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.d002b5c77d938f8d11f303084f21736d%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
forms, wcag|
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Description changed by Mariusz Felisiak:
Old description:
> In the Forms API, there are issues with the default rendering of fields
> that rely on widgets based on multiple radio or checkbox inputs:
> `RadioSelect` and `CheckboxSelectMultiple`. This is with the default
> rendering of those widgets, and with the custom rendering examples in the
> official documentation. Here is a form I set up for my testing of the
> default rendering:
>
> - Live form: http://django-admin-
> tests.herokuapp.com/forms/example_form/p/
> - Form fields definitions:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
> - Template:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
>
> == RadioSelect issues
>
> 1. The fields aren’t semantically grouped, only visually, so the grouping
> isn’t apparent to assistive technlogies. It’s important that related
> fields are grouped, and that the group has a label attached to it. If I
> was auditing this professionally I would classify this as a fail for
> [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
> SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
> are somewhat there, just not done with the appropriate semantics.
> 2. Speaking of label – currently the group of fields is labeled by
> preceding it with `Radio choice
> required:`. This overrides the label of the first field within
> the group (and only labels the first field, not the whole group). This is
> a fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
> instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
> 3. Wrapping the fields each in their own list item makes the navigation
> more tedious, as screen readers will first announce list items numbering,
> and only then their content.
>
> Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
> rotor. Note how the first field has the wrong label due to the markup.
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/32338/radio-
> select-first-input-label.png)]]
>
> == CheckboxSelectMultiple issues
>
> Almost identical to the above,
>
> - Lack of a fieldset means no semantic grouping.
> - The label isn’t associated with anything for this widget, so is less
> problematic but no more correct.
> - Wrapping the fields in list items also makes the form more verbose than
> it should be (and the semantics issues are the same).
>
> == Documentation issues (fixed in
> d8c17aa10c7f41e692fb6f5d0bf2fab7a90b9374)
>
> Additionally to the above, there are a few occurences of custom
> radio/checkbox markup in the documentation that will lead to the same
> issues:
>
> - https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#radioselect
> - https://docs.djangoproject.com/en/3.1/intro/tutorial04/#write-a
> -minimal-form
>
> == Proposed solution
>
> Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
> H71] of WCAG. The ideal solution is identical for both widgets, and also
> for documentation code snippets:
>
> 1. Wrap the group of fields in a `fieldset`, including the group’s label,
> the inputs, the help text, and any errors.
> 2. Use a `legend` as the first item in the `fieldset` for the group’s
> label, rather than a `label`.
> 3. Replace the list markup with un-semantic div, or remove altogether. If
> the list markup is needed for backwards compatibility, it could also use
> `role="presentation"` so assistive technologies ignore the list &
> listitem semantics, but I would only recommend that as a temporary
> workaround.
>
> Here is sample markup to implement the above. The `div` aren’t needed,
> I’ve only added them to preserve the vertical layout of the current
> implementation:
>
> {{{
>
> Radio choice required:
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
forms, wcag|
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Comment (by Mariusz Felisiak ):
In [changeset:"b9e872b59329393f615c440c54f632a49ab05b78" b9e872b5]:
{{{
#!CommitTicketReference repository=""
revision="b9e872b59329393f615c440c54f632a49ab05b78"
Refs #32338 -- Removed 'for ="..."' from RadioSelect's .
This improves accessibility for screen reader users.
Co-authored-by: Thibaud Colas
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:15>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.73cf7999235cb2e88db8a2c99ee7b540%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
forms, wcag|
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Description changed by Mariusz Felisiak:
Old description:
> In the Forms API, there are issues with the default rendering of fields
> that rely on widgets based on multiple radio or checkbox inputs:
> `RadioSelect` and `CheckboxSelectMultiple`. This is with the default
> rendering of those widgets, and with the custom rendering examples in the
> official documentation. Here is a form I set up for my testing of the
> default rendering:
>
> - Live form: http://django-admin-
> tests.herokuapp.com/forms/example_form/p/
> - Form fields definitions:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
> - Template:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
>
> == RadioSelect issues
>
> 1. The fields aren’t semantically grouped, only visually, so the grouping
> isn’t apparent to assistive technlogies. It’s important that related
> fields are grouped, and that the group has a label attached to it. If I
> was auditing this professionally I would classify this as a fail for
> [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
> SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
> are somewhat there, just not done with the appropriate semantics.
> 2. Speaking of label – currently the group of fields is labeled by
> preceding it with `Radio choice
> required:`. This overrides the label of the first field within
> the group (and only labels the first field, not the whole group). This is
> a fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
> instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
> 3. Wrapping the fields each in their own list item makes the navigation
> more tedious, as screen readers will first announce list items numbering,
> and only then their content.
>
> Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
> rotor. Note how the first field has the wrong label due to the markup.
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/32338/radio-
> select-first-input-label.png)]]
>
> == CheckboxSelectMultiple issues
>
> Almost identical to the above,
>
> - Lack of a fieldset means no semantic grouping.
> - The label isn’t associated with anything for this widget, so is less
> problematic but no more correct.
> - Wrapping the fields in list items also makes the form more verbose than
> it should be (and the semantics issues are the same).
>
> == Documentation issues
>
> Additionally to the above, there are a few occurences of custom
> radio/checkbox markup in the documentation that will lead to the same
> issues:
>
> - https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#radioselect
> - https://docs.djangoproject.com/en/3.1/intro/tutorial04/#write-a
> -minimal-form
>
> == Proposed solution
>
> Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
> H71] of WCAG. The ideal solution is identical for both widgets, and also
> for documentation code snippets:
>
> 1. Wrap the group of fields in a `fieldset`, including the group’s label,
> the inputs, the help text, and any errors.
> 2. Use a `legend` as the first item in the `fieldset` for the group’s
> label, rather than a `label`.
> 3. Replace the list markup with un-semantic div, or remove altogether. If
> the list markup is needed for backwards compatibility, it could also use
> `role="presentation"` so assistive technologies ignore the list &
> listitem semantics, but I would only recommend that as a temporary
> workaround.
>
> Here is sample markup to implement the above. The `div` aren’t needed,
> I’ve only added them to preserve the vertical layout of the current
> implementation:
>
> {{{
>
> Radio choice required:
> name="radio_choice_required"
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
forms, wcag|
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Comment (by Mariusz Felisiak ):
In [changeset:"d8c17aa10c7f41e692fb6f5d0bf2fab7a90b9374" d8c17aa]:
{{{
#!CommitTicketReference repository=""
revision="d8c17aa10c7f41e692fb6f5d0bf2fab7a90b9374"
Refs #32338 -- Improved accessibility of RadioSelect examples in docs.
Co-authored-by: Thibaud Colas
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:13>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.6631f67882fafc627e9d101d771128a0%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: David
| Smith
Type: Bug | Status: assigned
Component: Forms| Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
forms, wcag|
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Comment (by Mariusz Felisiak ):
In [changeset:"32b366a86482b06db417aec67e42ca23d69da48a" 32b366a8]:
{{{
#!CommitTicketReference repository=""
revision="32b366a86482b06db417aec67e42ca23d69da48a"
[3.2.x] Refs #32338 -- Improved accessibility of RadioSelect examples in
docs.
Co-authored-by: Thibaud Colas
Backport of d8c17aa10c7f41e692fb6f5d0bf2fab7a90b9374 from main
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:12>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.7d014d03d2c49bc58271044ff30f2c7f%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by David Smith): * has_patch: 0 => 1 -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:11> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.c294ba824131811563eec5f23aa77cdf%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: David | Smith Type: Bug | Status: assigned Component: Forms| Version: dev Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by David Smith): * owner: (none) => David Smith * status: new => assigned -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:10> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.fef9f534ac7b1d1305138192023efea7%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: (none) Type: Bug | Status: new Component: Forms| Version: master Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by jcoombes): * owner: jcoombes => (none) * status: assigned => new -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:9> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.d49e15db7ad9b4892593bf5af525c0ad%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: jcoombes Type: Bug | Status: assigned Component: Forms| Version: master Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Comment (by Claude Paroz): Note you should be aware of current work in #31026 (template-based rendering). -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:8> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.d6625d8a2f48676a9b1054f86b6c8480%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: jcoombes Type: Bug | Status: assigned Component: Forms| Version: master Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Comment (by jcoombes): 21/01/21 Okay, so I can reproduce this bug. I found the relevant template which fills the content of a relevant widget at: django/django/forms/templates/django/forms/widgets/multiple_input.html [The optional version of this template is at .../django/forms/input_option.html] This template is used to render the html form using: django/django/forms/forms.py BaseForm.as_p, BaseForm.as_ul, BaseForm.as_table. I got stuck today - as_p, as_ul and as_table call _html_output() with different parameters. Changing _html_output() is risky as it would be easy to break single- choice form fields. The code is already quite abstracted. Easier approach: Create and document a new method as_fieldset() for this new use case. Avoid _html_output() entirely. Harder approach: Rewrite _html_output() to include the html tags necessary to render RadioSelect and CheckboxSelectMultiple accessibly. Avoid breaking existing code. I think I will take the easier approach, but I'm open to feedback on how to do it the harder way without introducing regressions. -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:7> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.6b0375acc7f3c78306a0478a22b0012a%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: jcoombes Type: Bug | Status: assigned Component: Forms| Version: master Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by jcoombes): * owner: nobody => jcoombes * status: new => assigned -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:6> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.7a4490d40d6494760a672c817340c991%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: nobody Type: Bug | Status: new Component: Forms| Version: master Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: Accepted forms, wcag| Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * stage: Unreviewed => Accepted Comment: Thanks for detailed report. -- Ticket URL: <https://code.djangoproject.com/ticket/32338#comment:5> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.c5908ea4c3cd6a7ef311bf7b40ac47f6%40djangoproject.com.
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: nobody
Type: Bug | Status: new
Component: Forms| Version: master
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
forms, wcag| Unreviewed
Has patch: 0| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Description changed by Thibaud Colas:
Old description:
> In the Forms API, there are issues with the default rendering of fields
> that rely on widgets based on multiple radio or checkbox inputs:
> `RadioSelect` and `CheckboxSelectMultiple`. This is with the default
> rendering of those widgets. Here is a form I set up for my testing if it
> helps:
>
> - Live form: http://django-admin-
> tests.herokuapp.com/forms/example_form/p/
> - Form fields definitions:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
> - Template:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
>
> == RadioSelect issues
>
> 1. The fields aren’t semantically grouped, only visually, so the grouping
> isn’t apparent to assistive technlogies. It’s important that related
> fields are grouped, and that the group has a label attached to it. If I
> was auditing this professionally I would classify this as a fail for
> [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
> SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
> are somewhat there, just not done with the appropriate semantics.
> 2. Speaking of label – currently the group of fields is labeled by
> preceding it with `Radio choice
> required:`. This overrides the label of the first field within
> the group (and only labels the first field, not the whole group). This is
> a fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
> instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
> 3. Wrapping the fields each in their own list item makes the navigation
> more tedious, as screen readers will first announce list items numbering,
> and only then their content.
>
> Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
> rotor. Note how the first field has the wrong label due to the markup.
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/32338/radio-
> select-first-input-label.png)]]
>
> == CheckboxSelectMultiple issues
>
> Almost identical to the above,
>
> - Lack of a fieldset means no semantic grouping.
> - The label isn’t associated with anything for this widget, so is less
> problematic but no more correct.
> - Wrapping the fields in list items also makes the form more verbose than
> it should be (and the semantics issues are the same).
>
> == Documentation issues
>
> Additionally to the above, there are a few occurences of custom
> radio/checkbox markup in the documentation that will lead to the same
> issues:
>
> - https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#radioselect
> - https://docs.djangoproject.com/en/3.1/intro/tutorial04/#write-a
> -minimal-form
>
> == Proposed solution
>
> Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
> H71] of WCAG. The ideal solution is identical for both widgets, and also
> for documentation code snippets:
>
> 1. Wrap the group of fields in a `fieldset`, including the group’s label,
> the inputs, the help text, and any errors.
> 2. Use a `legend` as the first item in the `fieldset` for the group’s
> label, rather than a `label`.
> 3. Replace the list markup with un-semantic div, or remove altogether. If
> the list markup is needed for backwards compatibility, it could also use
> `role="presentation"` so assistive technologies ignore the list &
> listitem semantics, but I would only recommend that as a temporary
> workaround.
>
> Here is sample markup to implement the above. The `div` aren’t needed,
> I’ve only added them to preserve the vertical layout of the current
> implementation:
>
> {{{
>
> Radio choice required:
> name="radio_choice_required" value="one" required=""
> id="id_radio_choice_required_0">
> One
> name="radio_choice_requi
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: nobody
Type: Bug | Status: new
Component: Forms| Version: master
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
forms, wcag| Unreviewed
Has patch: 0| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Description changed by Thibaud Colas:
Old description:
> In the Forms API, there are issues with the default rendering of fields
> that rely on widgets based on multiple radio or checkbox inputs:
> `RadioSelect` and `CheckboxSelectMultiple`. This is with the default
> rendering of those widgets. Here is a form I set up for my testing if it
> helps:
>
> - Live form: http://django-admin-
> tests.herokuapp.com/forms/example_form/p/
> - Form fields definitions:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
> - Template:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
>
> == RadioSelect issues
>
> 1. The fields aren’t semantically grouped, only visually, so the grouping
> isn’t apparent to assistive technlogies. It’s important that related
> fields are grouped, and that the group has a label attached to it. If I
> was auditing this professionally I would classify this as a fail for
> [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
> SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
> are somewhat there, just not done with the appropriate semantics.
> 2. Speaking of label – currently the group of fields is labeled by
> preceding it with `Radio choice
> required:`. This overrides the label of the first field within
> the group (and only labels the first field, not the whole group). This is
> a fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
> instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
> 3. Wrapping the fields each in their own list item makes the navigation
> more tedious, as screen readers will first announce list items numbering,
> and only then their content.
>
> Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
> rotor. Note how the first field has the wrong label due to the markup.
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/32338/radio-
> select-first-input-label.png)]]
>
> == CheckboxSelectMultiple issues
>
> Almost identical to the above,
>
> - Lack of a fieldset means no semantic grouping.
> - The label isn’t associated with anything for this widget, so is less
> problematic but no more correct.
> - Wrapping the fields in list items also makes the form more verbose than
> it should be (and the semantics issues are the same).
>
> == Proposed solution
>
> Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
> H71] of WCAG. The ideal solution is identical for both:
>
> 1. Wrap the group of fields in a `fieldset`, including the group’s label,
> the inputs, the help text, and any errors.
> 2. Use a `legend` as the first item in the `fieldset` for the group’s
> label, rather than a `label`.
> 3. Replace the list markup with un-semantic div, or remove altogether. If
> the list markup is needed for backwards compatibility, it could also use
> `role="presentation"` so assistive technologies ignore the list &
> listitem semantics, but I would only recommend that as a temporary
> workaround.
>
> Here is sample markup to implement the above. The `div` aren’t needed,
> I’ve only added them to preserve the vertical layout of the current
> implementation:
>
> {{{
>
> Radio choice required:
> name="radio_choice_required" value="one" required=""
> id="id_radio_choice_required_0">
> One
> name="radio_choice_required" value="two" required=""
> id="id_radio_choice_required_1">
> Two
> name="radio_choice_required" value="three" required=""
> id="id_radio_choice_required_2">
> Three
> name="radio_choice_required" value="four" required=""
> id="id_radio_choice_required_3">
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: nobody
Type: Bug | Status: new
Component: Forms| Version: master
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
forms, wcag| Unreviewed
Has patch: 0| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Description changed by Thibaud Colas:
Old description:
> In the Forms API, there are issues with the default rendering of fields
> that rely on widgets based on multiple radio or checkbox inputs:
> `RadioSelect` and `CheckboxSelectMultiple`. This is with the default
> rendering of those widgets. Here is a form I set up for my testing if it
> helps:
>
> - Live form: http://django-admin-
> tests.herokuapp.com/forms/example_form/p/
> - Form fields definitions:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
> - Template:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
>
> == RadioSelect issues
>
> 1. The fields aren’t semantically grouped, only visually, so the grouping
> isn’t apparent to assistive technlogies. It’s important that related
> fields are grouped, and that the group has a label attached to it. If I
> was auditing this professionally I would classify this as a fail for
> [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
> SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
> are somewhat there, just not done with the appropriate semantics.
> 2. Speaking of label – currently the group of fields is labeled by
> preceding it with `Radio choice
> required:`. This overrides the label of the first field within
> the group (and only labels the first field, not the whole group). This is
> a fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
> instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
> 3. Wrapping the fields each in their own list item makes the navigation
> more tedious, as screen readers will first announce list items numbering,
> and only then their content.
>
> Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
> rotor. Note how the first field has the wrong label due to the markup.
>
> [[Image(https://code.djangoproject.com/attachment/ticket/32338/radio-
> select-first-input-label.png)]]
>
> == CheckboxSelectMultiple issues
>
> Almost identical to the above,
>
> - Lack of a fieldset means no semantic grouping.
> - The label isn’t associated with anything for this widget, so is less
> problematic but no more correct.
> - Wrapping the fields in list items also makes the form more verbose than
> it should be (and the semantics issues are the same).
>
> == Proposed solution
>
> Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
> H71] of WCAG. The ideal solution is identical for both:
>
> 1. Wrap the group of fields in a `fieldset`, including the group’s label,
> the inputs, the help text, and any errors.
> 2. Use a `legend` as the first item in the `fieldset` for the group’s
> label, rather than a `label`.
> 3. Replace the list markup with un-semantic div, or remove altogether. If
> the list markup is needed for backwards compatibility, it could also use
> `role="presentation"` so assistive technologies ignore the list &
> listitem semantics, but I would only recommend that as a temporary
> workaround.
>
> Here is sample markup to implement the above. The `div` aren’t needed,
> I’ve only added them to preserve the vertical layout of the current
> implementation:
>
> {{{#!html
>
> Radio choice required:
> name="radio_choice_required" value="one" required=""
> id="id_radio_choice_required_0">
> One
> name="radio_choice_required" value="two" required=""
> id="id_radio_choice_required_1">
> Two
> name="radio_choice_required" value="three" required=""
> id="id_radio_choice_required_2">
> Three
> name="radio_choice_required" value="four" required=""
> id="id_radio_choice_required_3"&
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud Colas|Owner: nobody
Type: Bug | Status: new
Component: Forms| Version: master
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
forms, wcag| Unreviewed
Has patch: 0| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Description changed by Thibaud Colas:
Old description:
> In the Forms API, there are issues with the default rendering of fields
> that rely on widgets based on multiple radio or checkbox inputs:
> `RadioSelect` and `CheckboxSelectMultiple`. This is with the default
> rendering of those widgets. Here is a form I set up for my testing if it
> helps:
>
> - Live form: http://django-admin-
> tests.herokuapp.com/forms/example_form/p/
> - Form fields definitions:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
> - Template:
> https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
>
> == RadioSelect issues
>
> 1. The fields aren’t semantically grouped, only visually, so the grouping
> isn’t apparent to assistive technlogies. It’s important that related
> fields are grouped, and that the group has a label attached to it. If I
> was auditing this professionally I would classify this as a fail for
> [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
> SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
> are somewhat there, just not done with the appropriate semantics.
> 2. Speaking of label – currently the group of fields is labeled by
> preceding it with `Radio choice
> required:`. This overrides the label of the first field within
> the group (and only labels the first field, not the whole group). This is
> a fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
> instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
> 3. Wrapping the fields each in their own list item makes the navigation
> more tedious, as screen readers will first announce list items numbering,
> and only then their content.
>
> Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
> rotor. Note how the first field has the wrong label due to the markup.
>
> radio-select-first-input-label.png
>
> [[Image()]]
>
> == CheckboxSelectMultiple issues
>
> Almost identical to the above,
>
> - Lack of a fieldset means no semantic grouping.
> - The label isn’t associated with anything for this widget, so is less
> problematic but no more correct.
> - Wrapping the fields in list items also makes the form more verbose than
> it should be (and the semantics issues are the same).
>
> == Proposed solution
>
> Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
> H71] of WCAG. The ideal solution is identical for both:
>
> 1. Wrap the group of fields in a `fieldset`, including the group’s label,
> the inputs, the help text, and any errors.
> 2. Use a `legend` as the first item in the `fieldset` for the group’s
> label, rather than a `label`.
> 3. Replace the list markup with un-semantic div, or remove altogether. If
> the list markup is needed for backwards compatibility, it could also use
> `role="presentation"` so assistive technologies ignore the list &
> listitem semantics, but I would only recommend that as a temporary
> workaround.
>
> Here is sample markup to implement the above. The `div` aren’t needed,
> I’ve only added them to preserve the vertical layout of the current
> implementation:
>
> {{{#!html
>
> Radio choice required:
> name="radio_choice_required" value="one" required=""
> id="id_radio_choice_required_0">
> One
> name="radio_choice_required" value="two" required=""
> id="id_radio_choice_required_1">
> Two
> name="radio_choice_required" value="three" required=""
> id="id_radio_choice_required_2">
> Three
> name="radio_choice_required" value="four" required=""
> id="id_radio_choice_required_3">
> Four
> Help
>
> }}}
New
Re: [Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple -+- Reporter: Thibaud Colas|Owner: nobody Type: Bug | Status: new Component: Forms| Version: master Severity: Normal | Resolution: Keywords: accessibility, | Triage Stage: forms, wcag| Unreviewed Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Thibaud Colas): * Attachment "radio-select-first-input-label.png" added. Screenshot of a RadioSelect widget, with DevTools open to see the markup, and VoiceOver rotor menu showing the Form Controls’ labels -- Ticket URL: <https://code.djangoproject.com/ticket/32338> 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 django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.7d5a0cad047ee3ddacaa3db62b4cdd8c%40djangoproject.com.
[Django] #32338: Accessibility issues with Django forms RadioSelect and CheckboxSelectMultiple
#32338: Accessibility issues with Django forms RadioSelect and
CheckboxSelectMultiple
-+-
Reporter: Thibaud| Owner: nobody
Colas |
Type: Bug| Status: new
Component: Forms |Version: master
Severity: Normal | Keywords: accessibility,
Triage Stage: | forms, wcag
Unreviewed | Has patch: 0
Needs documentation: 0 |Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-+-
In the Forms API, there are issues with the default rendering of fields
that rely on widgets based on multiple radio or checkbox inputs:
`RadioSelect` and `CheckboxSelectMultiple`. This is with the default
rendering of those widgets. Here is a form I set up for my testing if it
helps:
- Live form: http://django-admin-tests.herokuapp.com/forms/example_form/p/
- Form fields definitions:
https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/forms.py
- Template:
https://github.com/thibaudcolas/django_admin_tests/blob/main/django_admin_tests/templates/django_admin_tests/example_form.html
== RadioSelect issues
1. The fields aren’t semantically grouped, only visually, so the grouping
isn’t apparent to assistive technlogies. It’s important that related
fields are grouped, and that the group has a label attached to it. If I
was auditing this professionally I would classify this as a fail for
[https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
SC 1.3.1 - Info and Relationships] of WCAG 2.1, as the grouping and label
are somewhat there, just not done with the appropriate semantics.
2. Speaking of label – currently the group of fields is labeled by
preceding it with `Radio choice
required:`. This overrides the label of the first field within the
group (and only labels the first field, not the whole group). This is a
fail for [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-
instructions.html 3.3.2: Labels or Instructions] and/or SC 1.3.1.
3. Wrapping the fields each in their own list item makes the navigation
more tedious, as screen readers will first announce list items numbering,
and only then their content.
Here is a screenshot demonstrating the label issue with macOS VoiceOver’s
rotor. Note how the first field has the wrong label due to the markup.
radio-select-first-input-label.png
[[Image()]]
== CheckboxSelectMultiple issues
Almost identical to the above,
- Lack of a fieldset means no semantic grouping.
- The label isn’t associated with anything for this widget, so is less
problematic but no more correct.
- Wrapping the fields in list items also makes the form more verbose than
it should be (and the semantics issues are the same).
== Proposed solution
Essentially following [https://www.w3.org/TR/WCAG20-TECHS/H71 technique
H71] of WCAG. The ideal solution is identical for both:
1. Wrap the group of fields in a `fieldset`, including the group’s label,
the inputs, the help text, and any errors.
2. Use a `legend` as the first item in the `fieldset` for the group’s
label, rather than a `label`.
3. Replace the list markup with un-semantic div, or remove altogether. If
the list markup is needed for backwards compatibility, it could also use
`role="presentation"` so assistive technologies ignore the list & listitem
semantics, but I would only recommend that as a temporary workaround.
Here is sample markup to implement the above. The `div` aren’t needed,
I’ve only added them to preserve the vertical layout of the current
implementation:
{{{#!html
Radio choice required:
One
Two
Three
Four
Help
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32338>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/055.59f430d0a2b3ff3849e3112bb8e1b066%40djangoproject.com.
