[Django] #33726: Django admin needs a skip link

Django

unread,

May 19, 2022, 6:38:05 PM5/19/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: New | Status: new
feature |
Component: | Version: dev
contrib.admin | Keywords: accessibility,
Severity: Normal | keyboard, ux
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
[https://www.a11yproject.com/posts/skip-nav-links/ Skip links] are a very
common pattern to help keyboard go straight to a page’s main content. They
aren’t technically a requirement to meet accessibility standards, but
they’re recommended as nice-to-have way to help with issues such as those
targeted by WCAG [https://www.w3.org/WAI/WCAG21/Understanding/bypass-
blocks.html SC 2.4.1: Bypass Blocks].

I think the Django admin should have a skip link on all of its pages, so
keyboard users can bypass:

- The header area
- The sidebar

Here is a simple example to illustrate the problem – it currently takes 32
tab stops to reach the page’s main content on my demo site:

With a skip link, this is reduced to 2 tab stops (and one press of Enter
to navigate):

--
Ticket URL: <https://code.djangoproject.com/ticket/33726>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

Django

unread,

May 19, 2022, 6:38:13 PM5/19/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------

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

Changes (by Thibaud Colas):

* Attachment "2-tab-stops-one-enter.png" added.

Django

unread,

May 19, 2022, 6:38:19 PM5/19/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
keyboard, ux | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "32-tab-stops.png" added.

Django

unread,

May 19, 2022, 6:38:50 PM5/19/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
keyboard, ux | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Description changed by Thibaud Colas:

Old description:

> [https://www.a11yproject.com/posts/skip-nav-links/ Skip links] are a very
> common pattern to help keyboard go straight to a page’s main content.
> They aren’t technically a requirement to meet accessibility standards,
> but they’re recommended as nice-to-have way to help with issues such as

> those targeted by WCAG [https://www.w3.org/WAI/WCAG21/Understanding
> /bypass-blocks.html SC 2.4.1: Bypass Blocks].

>
> I think the Django admin should have a skip link on all of its pages, so
> keyboard users can bypass:
>
> - The header area
> - The sidebar
>
> Here is a simple example to illustrate the problem – it currently takes
> 32 tab stops to reach the page’s main content on my demo site:
>

> With a skip link, this is reduced to 2 tab stops (and one press of Enter
> to navigate):

New description:

[https://www.a11yproject.com/posts/skip-nav-links/ Skip links] are a very
common pattern to help keyboard go straight to a page’s main content. They
aren’t technically a requirement to meet accessibility standards, but
they’re recommended as nice-to-have way to help with issues such as those
targeted by WCAG [https://www.w3.org/WAI/WCAG21/Understanding/bypass-
blocks.html SC 2.4.1: Bypass Blocks].

I think the Django admin should have a skip link on all of its pages, so
keyboard users can bypass:

- The header area
- The sidebar

Here is a simple example to illustrate the problem – it currently takes 32
tab stops to reach the page’s main content on my demo site:

[[Image(https://code.djangoproject.com/raw-attachment/ticket/33726/32-tab-
stops.png)]]

With a skip link, this is reduced to 2 tab stops (and one press of Enter
to navigate):

[[Image(https://code.djangoproject.com/raw-attachment/ticket/33726/2-tab-
stops-one-enter.png)]]

--

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

Django

unread,

May 20, 2022, 12:43:03 AM5/20/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Accepted
keyboard, ux |

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

Changes (by Mariusz Felisiak):

* stage: Unreviewed => Accepted

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

Django

unread,

May 25, 2022, 5:49:54 AM5/25/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
keyboard, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Thibaud Colas):

Here are reference acceptance criteria for a skip link, if someone is
interested in giving this a shot, as well as a reference implementation,
from [https://www.magentaa11y.com/checklist-web/skip-link/ MagentaA11y]:

{{{

How to test a skip link

1. Test keyboard only, then keyboard + screenreader
- Tab: Focus moves to the skip link
- Enter: Activates the link, focus/tabindex moves directly to the targeted
element

2. Test mobile screenreader gestures
- Swipe: Focus moves to the skip link
- Doubletap: Activates the link, focus/tabindex moves directly to the
targeted element
3. Listen to screenreader output on all devices
- Name: It describes which landmark it's targeting
- Role: It identifies itself as a link
- Group: It is typically the first element in the page

Full information: https://www.magentaa11y.com/checklist-web/skip-link/

}}}

For Django in particular,

- The skip link’s ("Skip to main content") text needs to be translate-
able.
- Screen reader tests can be done by our accessibility team if someone
wants to contribute to this and doesn’t know how to do this type of
testing (if you do, please test on either VoiceOver + Safari or NVDA +
Firefox for desktop, and either Android TalkBack or iOS VoiceOver on
mobile).
- Not sure if this is required but the keyboard support can likely be
demonstrated by writing an automated test for this with Selenium.

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

Django

unread,

Jun 3, 2022, 9:02:20 AM6/3/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Fab
Type: New feature | Status: assigned

Changes (by Fab):

* owner: nobody => Fab
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/33726#comment:4>

Django

unread,

Jun 3, 2022, 10:05:53 AM6/3/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Fabian
| Jarrett

Changes (by Fabian Jarrett):

* Attachment "input_focus.jpg" added.

Input being focused

--
Ticket URL: <https://code.djangoproject.com/ticket/33726>

Django

unread,

Jun 3, 2022, 10:11:17 AM6/3/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Fabian
| Jarrett
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
keyboard, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Fabian Jarrett):

When there is a search bar the focus already starts in the main content
area. Should skip links be hidden if they are not needed?
[[Image(input_focus.jpg)]]

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

Django

unread,

Jun 3, 2022, 1:07:09 PM6/3/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: (none)

Type: New feature | Status: new

Changes (by Fabian Jarrett):

* owner: Fabian Jarrett => (none)
* status: assigned => new

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

Django

unread,

Jul 10, 2022, 2:38:04 PM7/10/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Marcelo
| Galigniana

Type: New feature | Status: assigned

Changes (by Marcelo Galigniana):

* owner: (none) => Marcelo Galigniana

* status: new => assigned

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

Django

unread,

Jul 12, 2022, 5:41:36 AM7/12/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Marcelo
| Galigniana
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
keyboard, ux |

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

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

Changes (by Carlton Gibson):

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

Comment:

[https://github.com/django/django/pull/15837 PR]

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

Django

unread,

Jul 14, 2022, 4:14:43 AM7/14/22

to django-...@googlegroups.com

Needs tests: 0 | Patch needs improvement: 0

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

Changes (by Marcelo Galigniana):

* needs_better_patch: 1 => 0

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

Django

unread,

Jul 14, 2022, 5:57:54 AM7/14/22

to django-...@googlegroups.com

Needs tests: 0 | Patch needs improvement: 1

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

Changes (by Carlton Gibson):

* needs_better_patch: 0 => 1

Comment:

Small issues remaining on PR

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

Django

unread,

Jul 14, 2022, 10:45:55 AM7/14/22

to django-...@googlegroups.com

Needs tests: 0 | Patch needs improvement: 0

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

Changes (by Marcelo Galigniana):

* needs_better_patch: 1 => 0

Comment:

Changes applied!

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

Django

unread,

Jul 17, 2022, 1:11:46 AM7/17/22

to django-...@googlegroups.com

Needs tests: 0 | Patch needs improvement: 1

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

Changes (by Mariusz Felisiak):

* needs_better_patch: 0 => 1

Comment:

Per Thibaud's
[https://github.com/django/django/pull/15837#pullrequestreview-1041060646
review].

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

Django

unread,

Jul 18, 2022, 12:04:45 AM7/18/22

to django-...@googlegroups.com

Needs tests: 0 | Patch needs improvement: 0

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

Changes (by Marcelo Galigniana):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/33726#comment:13>

Django

unread,

Jul 21, 2022, 4:51:39 AM7/21/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Marcelo
| Galigniana
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Ready for
keyboard, ux | checkin

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

Changes (by Carlton Gibson):

* stage: Accepted => Ready for checkin

Comment:

I think this is good to go. Just waiting for a final review/OK from
Thibaud and a squash/rebase.

--
Ticket URL: <https://code.djangoproject.com/ticket/33726#comment:14>

Django

unread,

Jul 28, 2022, 5:53:41 AM7/28/22

to django-...@googlegroups.com

#33726: Django admin needs a skip link
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Marcelo
| Galigniana

Type: New feature | Status: closed
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed

Changes (by Carlton Gibson <carlton@…>):

* status: assigned => closed
* resolution: => fixed

Comment:

In [changeset:"564437f767eaa54bb6af86d2ebd2363e49a50421" 564437f7]:
{{{
#!CommitTicketReference repository=""
revision="564437f767eaa54bb6af86d2ebd2363e49a50421"
Fixed #33726 -- Added skip-link to admin for keyboard navigation.
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/33726#comment:15>

Reply all

Reply to author

Forward