[Django] #36630: Semantic structure and accessibility improvements for the admin navigation sidebar.

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+-----------------------------------------
Reporter: Antoliny | Type: Bug
Status: new | Component: contrib.admin
Version: 5.2 | Severity: Normal
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+-----------------------------------------
Currently, the admin navigation sidebar is built using `<table>` tags.
I don’t think this structure is appropriate from an accessibility
perspective.
It has the following issues:

- Currently, when accessing the table (app) element, it is described as
having three columns, but I’m not sure exactly what columns exist in the
current structure.
I feel that it was designed with a flawed structure from the start,
providing an inaccurate description.
(For reference, the current columns are "model name", "add link" and
"change or view list".
On the admin index page, this description is somewhat accurate, but in the
sidebar, the change or view list link does not exist, so I believe it is
definitely an incorrect description.)

[[Image(table_wrong_description.png)]]

- When accessing a row element, the table structure provides a description
of which column each item is in. However, since the sidebar does not have
the last column, users expect three items in a row, but in reality, only
two items are accessible.

[[Image(table_wrong_description_2.png)]]

- When navigating elements with a screen reader, they are traversed in the
wrong order.

Currently, when using the standard element navigation of a screen reader,
it moves to the end of the table without accessing the internal elements.
I suspect this issue might be caused by the `<a>` tag being placed
directly under the table.

- Incorrect navigation order during tab navigation.

When using tab navigation, we would expect to navigate from the app to the
models under it, but in reality, the models are navigated first, and the
apps for those models are navigated last.

To resolve this issue, I believe the structure of `app_list`(sidebar,
index, app index), should be changed to `<h>`, `<ul>`, `<li>`.
--
Ticket URL: <https://code.djangoproject.com/ticket/36630>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+--------------------------------------

Reporter: Antoliny | Owner: (none)

Type: Bug | Status: new
Component: contrib.admin | Version: 5.2

Severity: Normal | Resolution:

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

Changes (by Antoliny):

* Attachment "table_wrong_description.png" added.

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+--------------------------------------
Changes (by Antoliny):

* Attachment "table_wrong_description_2.png" added.

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+--------------------------------------

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

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: 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/36630#comment:1>

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: 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:

Currently, the admin navigation sidebar is built using `<table>` tags.
I don’t think this structure is appropriate from an accessibility
perspective.
It has the following issues:

- When accessing the table (app) element, it is described as having three

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

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: 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:

> Currently, the admin navigation sidebar is built using `<table>` tags.
> I don’t think this structure is appropriate from an accessibility
> perspective.
> It has the following issues:
>

- When accessing the sidebar, it is described as a table, but I’m not sure
if the structure that users imagine when they hear “table” matches the
actual structure of the sidebar.

[[Image(table_wrong_description.png)]]

- When accessing a row element, the table structure provides a description
of which column each item is in. However, since the sidebar does not have
the last column, users expect three items in a row, but in reality, only
two items are accessible.

[[Image(table_wrong_description_2.png)]]

- When navigating elements with a screen reader, they are traversed in the
wrong order.

Currently, when using the standard element navigation of a screen reader,
it moves to the end of the table without accessing the internal elements.
I suspect this issue might be caused by the `<a>` tag being placed
directly under the table.

- Incorrect navigation order during tab navigation.

When using tab navigation, we would expect to navigate from the app to the
models under it, but in reality, the models are navigated first, and the
apps for those models are navigated last.

To resolve this issue, I believe the structure of `app_list`(sidebar,
index, app index), should be changed to `<h>`, `<ul>`, `<li>`.

--
--

Ticket URL: <https://code.djangoproject.com/ticket/36630#comment:3>

[Django]

#36630: Semantic structure and accessibility improvements for the admin navigation
sidebar.
-------------------------------+------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Accepted

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:

I saw an agreement that this should be improved within #accessibility in
the Discord channel. It may make sense to agree the semantic
structure/design before this is picked up
--
Ticket URL: <https://code.djangoproject.com/ticket/36630#comment:4>