Re: [Django] #36511: Optimize accessibility of filters in django admin (was: Optimize accessibility of filters in django admin console)

[Django]

#36511: Optimize accessibility of filters in django admin
-------------------------------------+-------------------------------------
Reporter: laurenherregodts | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
filtering |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* stage: Unreviewed => Accepted
* summary: Optimize accessibility of filters in django admin console =>
Optimize accessibility of filters in django admin


Old description:

> I'm not seeing any previously logged tickets for this, so adding a new
> ticket to report.
> When using tabs to navigate a page in the django admin console, the
> filter panel is only accessed as last part of the page. This means users
> will have to tab through entire tables. The issue was identified using
> AXE tab stops during accessibility testing.
> I believe there are no changes to the styles needed, just move the
> template so the DOM order is more correct and filter panel is accessed
> earlier.

New description:

When using keyboard tabs to navigate a page in the django admin interface,
the filter panel is only accessed as last part of the page. This means
users will have to tab through entire tables. The issue was identified
using [https://accessibilityinsights.io/docs/web/getstarted/fastpass
/#complete-the-assisted-test-for-tab-stops AXE tab stops] during
accessibility testing.

I believe there are no changes to the styles needed, just move the
template so the DOM order is more correct and filter panel is accessed
earlier.

--
Comment:

Thank you @laurenherregodts, makes sense based on our testing.

Sample page: [https://django-admin-
tests.netlify.app/django_admin_tests/latest/english/admin/demo/release/
django static demo releases changelist]. On this page, here are the
numbers of tab stops as-is, with 4 items in the changelist, each with
three fields

- Worst case: 78
- Skipping the sidebar: 43
- Using "skip to main content": 41

The target would be for the number of tab stops to be the same regardless
of the content of the table. Ideally:

- 3 or 5 tab stops. Placing the filters after the "Add" button in `object-
tools`, or after the search bar
- Or worst case after the `toplinks` (number of tab stops dependent on
number of top links)
--
Ticket URL: <https://code.djangoproject.com/ticket/36511#comment:1>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.