[Django] #34832: Use `banner` landmark or `<header>` element for the admin header area
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: New | Status: new
feature |
Component: | Version: 4.2
contrib.admin | Keywords: accessibility,
Severity: Normal | screen reader, landmarks
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
The Django admin uses a `<div id="header"></div>` for its header area.
Switching this to a `<header>` tag or adding a `role="banner"` attribute
to the div would help screen reader users navigate the interface – they
would have an easier time bypassing the whole area when going through the
page sequentially, and would also be able to jump straight to the header
from any point on the page.
Usage of the correct HTML header tag is ideal, but might prove problematic
if CSS was written with overly specific HTML elements. We can get the same
benefits for screen reader users with `role="banner"`.
--
Ticket URL: <https://code.djangoproject.com/ticket/34832>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
Type: New feature | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
screen reader, landmarks | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> The Django admin uses a `<div id="header"></div>` for its header area.
> Switching this to a `<header>` tag or adding a `role="banner"` attribute
> to the div would help screen reader users navigate the interface – they
> would have an easier time bypassing the whole area when going through the
> page sequentially, and would also be able to jump straight to the header
> from any point on the page.
>
> Usage of the correct HTML header tag is ideal, but might prove
> problematic if CSS was written with overly specific HTML elements. We can
> get the same benefits for screen reader users with `role="banner"`.
New description:
Related: [https://code.djangoproject.com/ticket/34833 #34833]. The Django
admin uses a `<div id="header"></div>` for its header area. Switching this
to a `<header>` tag or adding a `role="banner"` attribute to the div would
help screen reader users navigate the interface – they would have an
easier time bypassing the whole area when going through the page
sequentially, and would also be able to jump straight to the header from
any point on the page.
Usage of the correct HTML header tag is ideal, but might prove problematic
if CSS was written with overly specific HTML elements. We can get the same
benefits for screen reader users with `role="banner"`.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
screen reader, landmarks |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* type: New feature => Cleanup/optimization
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, landmarks |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> Related: [https://code.djangoproject.com/ticket/34833 #34833]. The Django
> admin uses a `<div id="header"></div>` for its header area. Switching
> this to a `<header>` tag or adding a `role="banner"` attribute to the div
> would help screen reader users navigate the interface – they would have
> an easier time bypassing the whole area when going through the page
> sequentially, and would also be able to jump straight to the header from
> any point on the page.
>
> Usage of the correct HTML header tag is ideal, but might prove
> problematic if CSS was written with overly specific HTML elements. We can
> get the same benefits for screen reader users with `role="banner"`.
New description:
Related: [https://code.djangoproject.com/ticket/34833 #34833]. The Django
admin uses a `<div id="header"></div>` for its header area. Switching this
to a `<header>` tag or adding a `role="banner"` attribute to the div would
help screen reader users navigate the interface – they would have an
easier time bypassing the whole area when going through the page
sequentially, and would also be able to jump straight to the header from
any point on the page.
Usage of the correct HTML header tag is ideal, but might prove problematic
if CSS was written with overly specific HTML elements. We can get the same
benefits for screen reader users with `role="banner"`.
---
See also
[https://dequeuniversity.com/rules/axe/4.8/region?application=RuleDescription
recommendations to have all content in landmarks] that this will help us
address.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, landmarks |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* easy: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, landmarks |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by faizan2700):
Please assign me this issue.
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:5>
Django
-------------------------------------+-------------------------------------
Type: | Abderemane
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, landmarks |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => Sarah Abderemane
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sarah
Type: | Abderemane
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, landmarks |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Sarah Abderemane):
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/17258 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sarah
Type: | Abderemane
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
screen reader, landmarks |
Needs tests: 1 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_docs: 0 => 1
* needs_tests: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sarah
Type: | Abderemane
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
screen reader, landmarks | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* needs_docs: 1 => 0
* needs_tests: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:9>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sarah
Type: | Abderemane
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
screen reader, landmarks | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"814e7bc22062eeae4be9f189e89027e28d5dd290" 814e7bc]:
{{{
#!CommitTicketReference repository=""
revision="814e7bc22062eeae4be9f189e89027e28d5dd290"
Fixed #34832 -- Made admin's header content render in <header> tag.
Header tag was changed to <header> get the landmark banner for
accessibility.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34832#comment:10>