[Django] #36460: Improve accessibility of column sort buttons on admin changelist page

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Type:
| Cleanup/optimization
Status: new | Component:
| contrib.admin
Version: 5.1 | Severity: Normal
Keywords: accessibility, | Triage Stage:
column sort, changelist | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
The column sort functionality provided on the admin ChangeList page has
much room for accessibility improvement.

1. When accessing a button that can be sorted but is not currently active
for sorting

[[Image(not_sorted_column_access.png)]]

Currently, when accessing a button that can be sorted but sorting is not
yet active, no description is provided. It should inform users that the
field is sortable when they access the button.

2. The issue of the sort button being accessed before the field.

When accessing a column with sorting applied, the sort button is currently
focused before the column itself.
This is likely because screen readers tend to focus on interactive
elements first.
I believe the element that is positioned above the sort button should be
accessed first (and it may also need a description).

3. Cannot access the button to remove sorting.

Screen reader users cannot access the button to remove sorting in the
column sort feature (an element that appears on mouse hover). Naturally,
the button to remove sorting should also be accessible.

4. Provide more detailed descriptions for the sort buttons.

[[Image(sort_button_screen_reader.png)]]

When the sort button is accessed, the title attribute is read, but the
current description provided by the title is not sufficient for screen
reader users to understand the sort direction of the button. (Visual users
can understand it, but screen reader users cannot.)
A more detailed description should be provided for screen reader users on
the sort button.
--
Ticket URL: <https://code.djangoproject.com/ticket/36460>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage:
column sort, changelist | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* Attachment "not_sorted_column_access.png" added.

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
column sort, changelist | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "sort_button_screen_reader.png" added.

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned

Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
column sort, changelist | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* owner: (none) => Antoliny
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:1>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
column sort, changelist | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Description changed by Antoliny:

Old description:

New description:

The column sort functionality provided on the admin ChangeList page has
much room for accessibility improvement.

1. Insufficient description when accessing a button that can be sorted but
is not currently active for sorting.

[[Image(not_sorted_column_access.png)]]

Currently, when accessing a button that can be sorted but sorting is not
yet active, no description is provided. It should inform users that the
field is sortable when they access the button.

2. The issue of the sort button being accessed before the field.

When accessing a column with sorting applied, the sort button is currently
focused before the column itself.
This is likely because screen readers tend to focus on interactive
elements first.
I believe the element that is positioned above the sort button should be
accessed first (and it may also need a description).

3. Cannot access the button to remove sorting.

Screen reader users cannot access the button to remove sorting in the
column sort feature (an element that appears on mouse hover). Naturally,
the button to remove sorting should also be accessible.

4. Provide more detailed descriptions for the sort buttons.

[[Image(sort_button_screen_reader.png)]]

When the sort button is accessed, the title attribute is read, but the
current description provided by the title is not sufficient for screen
reader users to understand the sort direction of the button. (Visual users
can understand it, but screen reader users cannot.)
A more detailed description should be provided for screen reader users on
the sort button.

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:2>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* cc: Eliana Rosselli, Thibaud Colas, Sarah Abderemane, Tom Carrick
(added)
* stage: Unreviewed => Accepted

Comment:

Note that I think it's quite common to have a deactivated sort icon (arrow
up and down, a bit muted in color) to indicate that the column is sort-
able rather than having the header be a link
In which case there would always be an icon for sorting
--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:3>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* has_patch: 0 => 1

Comment:

[https://github.com/django/django/pull/19564 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:4>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* ui_ux: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:5>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 1 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1
* needs_tests: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:6>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* needs_better_patch: 1 => 0
* needs_tests: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:7>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:8>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:9>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:10>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:11>

[Django]

#36460: Improve accessibility of column sort buttons on admin changelist page
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
column sort, changelist |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36460#comment:12>