[Django] #36367: Improving the accessibility of the date_hierarchy layout in the admin.

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Type:
| Cleanup/optimization
Status: new | Component:
| contrib.admin
Version: 5.1 | Severity: Normal
Keywords: accessibility, | Triage Stage:
screen reader, date_hierarchy | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
When navigating to the date_hierarchy area in the admin page using a
screen reader, no specific description is provided for that section.
Currently, the only information announced is that it is a "navigation"
area.

[[Image(date_hierarchy_screenreader_example.png)]]

As a result, screen reader users may find it difficult to understand the
purpose of the links contained within this area when they access it. The
lack of context makes it unclear what role these links play.
--
Ticket URL: <https://code.djangoproject.com/ticket/36367>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------

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

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

Changes (by Antoliny):

* Attachment "date_hierarchy_screenreader_example.png" added.

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------

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

Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, date_hierarchy | 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/36367#comment:1>

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |

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

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

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: (none)
Type: | Status: new

Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antoliny):

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

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

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------

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

Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Chaitanya):

* owner: (none) => Chaitanya

* status: new => assigned

Comment:

in admin/date_hierarchy.html

aria is one way of fixing it like below
{{{
<nav class="toplinks" aria-label="Date filter">
}}}
now the screen reader says "Date filter navigation" instead of
"navigation".

or Else we can have a hidden <h> tag which also does the same thing but
will be announced while going through headings of the page like below.

{{{
<h3 class="visually-hidden">Date filter navigation</h3>
}}}


any other ways to fix??
--
Ticket URL: <https://code.djangoproject.com/ticket/36367#comment:4>

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Antoliny):

Replying to [comment:4 Chaitanya]:

> in admin/date_hierarchy.html
>
> aria is one way of fixing it like below
> {{{
> <nav class="toplinks" aria-label="Date filter">
> }}}
> now the screen reader says "Date filter navigation" instead of
"navigation".
>
> or Else we can have a hidden <h> tag which also does the same thing but
will be announced while going through headings of the page like below.

(definitely not the best way)

>
> {{{
> <h3 class="visually-hidden">Date filter navigation</h3>
> }}}
>
>
> any other ways to fix??

Great! I think the changes above are necessary.

In addition, I believe the biggest issue here is how to convey the sorted
order in the `date_hierarchy`.

Hmm... I've been thinking a lot about this recently as well, and I feel
like we might need to slightly restructure this part.
--
Ticket URL: <https://code.djangoproject.com/ticket/36367#comment:5>

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Chaitanya):

Do we need to really convey the sorted order?? if yes then we can have the
same aria label to say something like "sorted date filter navigation".
--
Ticket URL: <https://code.djangoproject.com/ticket/36367#comment:6>

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Antoliny):

Replying to [comment:6 Chaitanya]:

> Do we need to really convey the sorted order?? if yes then we can have
the same aria label to say something like "sorted date filter navigation".

> I don't think we need to announce the sorted order.

Yes, on second thought, since the date hierarchy already conveys its basic
meaning, there's no need to provide additional information.
I think just adding a label should be enough. --> nav, aria-labelledby
--
Ticket URL: <https://code.djangoproject.com/ticket/36367#comment:7>

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |

Has patch: 1 | Needs documentation: 0

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

Changes (by Chaitanya):

* has_patch: 0 => 1

Comment:

PR [https://github.com/django/django/pull/19688]
--
Ticket URL: <https://code.djangoproject.com/ticket/36367#comment:8>

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

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

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

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

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |

Has patch: 0 | Needs documentation: 0

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

Changes (by Chaitanya):

* has_patch: 1 => 0

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

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0

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

* has_patch: 0 => 1
* needs_better_patch: 1 => 0

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

[Django]

#36367: Improving the accessibility of the date_hierarchy layout in the admin.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Chaitanya
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, date_hierarchy |
Has patch: 1 | Needs documentation: 0

Needs tests: 1 | Patch needs improvement: 1

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

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

* needs_tests: 0 => 1

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