Opened 3 months ago

Closed 2 weeks ago

#33726 closed New feature (fixed)

Django admin needs a skip link

Reported by: Thibaud Colas Owned by: Marcelo Galigniana
Component: contrib.admin Version: dev
Severity: Normal Keywords: accessibility, keyboard, ux
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Thibaud Colas)

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 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:

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):

https://code.djangoproject.com/raw-attachment/ticket/33726/2-tab-stops-one-enter.png

Attachments (3)

2-tab-stops-one-enter.png (74.5 KB) - added by Thibaud Colas 3 months ago.
32-tab-stops.png (143.3 KB) - added by Thibaud Colas 3 months ago.
input_focus.jpg (63.3 KB) - added by Fabian Jarrett 2 months ago.
Input being focused

Download all attachments as: .zip

Change History (18)

Changed 3 months ago by Thibaud Colas

Attachment: 2-tab-stops-one-enter.png added

Changed 3 months ago by Thibaud Colas

Attachment: 32-tab-stops.png added

comment:1 Changed 3 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 3 months ago by Mariusz Felisiak

Triage Stage: UnreviewedAccepted

comment:3 Changed 3 months ago 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 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.

comment:4 Changed 2 months ago by Fabian Jarrett

Owner: changed from nobody to Fabian Jarrett
Status: newassigned

Changed 2 months ago by Fabian Jarrett

Attachment: input_focus.jpg added

Input being focused

comment:5 Changed 2 months ago 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?
Input being focused

comment:6 Changed 2 months ago by Fabian Jarrett

Owner: Fabian Jarrett deleted
Status: assignednew

comment:7 Changed 5 weeks ago by Marcelo Galigniana

Owner: set to Marcelo Galigniana
Status: newassigned

comment:8 Changed 5 weeks ago by Carlton Gibson

Has patch: set
Patch needs improvement: set

comment:9 Changed 4 weeks ago by Marcelo Galigniana

Patch needs improvement: unset

comment:10 Changed 4 weeks ago by Carlton Gibson

Patch needs improvement: set

Small issues remaining on PR

comment:11 Changed 4 weeks ago by Marcelo Galigniana

Patch needs improvement: unset

Changes applied!

comment:12 Changed 4 weeks ago by Mariusz Felisiak

Patch needs improvement: set

Per Thibaud's review.

comment:13 Changed 4 weeks ago by Marcelo Galigniana

Patch needs improvement: unset

comment:14 Changed 3 weeks ago by Carlton Gibson

Triage Stage: AcceptedReady for checkin

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

comment:15 Changed 2 weeks ago by Carlton Gibson <carlton@…>

Resolution: fixed
Status: assignedclosed

In 564437f7:

Fixed #33726 -- Added skip-link to admin for keyboard navigation.

Note: See TracTickets for help on using tickets.
Back to Top