Opened 2 years ago

Closed 2 years 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 2 years ago.
32-tab-stops.png (143.3 KB ) - added by Thibaud Colas 2 years ago.
input_focus.jpg (63.3 KB ) - added by Fabian Jarrett 2 years ago.
Input being focused

Download all attachments as: .zip

Change History (18)

by Thibaud Colas, 2 years ago

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

by Thibaud Colas, 2 years ago

Attachment: 32-tab-stops.png added

comment:1 by Thibaud Colas, 2 years ago

Description: modified (diff)

comment:2 by Mariusz Felisiak, 2 years ago

Triage Stage: UnreviewedAccepted

comment:3 by Thibaud Colas, 2 years ago

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 by Fabian Jarrett, 2 years ago

Owner: changed from nobody to Fabian Jarrett
Status: newassigned

by Fabian Jarrett, 2 years ago

Attachment: input_focus.jpg added

Input being focused

comment:5 by Fabian Jarrett, 2 years ago

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 by Fabian Jarrett, 2 years ago

Owner: Fabian Jarrett removed
Status: assignednew

comment:7 by Marcelo Galigniana, 2 years ago

Owner: set to Marcelo Galigniana
Status: newassigned

comment:8 by Carlton Gibson, 2 years ago

Has patch: set
Patch needs improvement: set

comment:9 by Marcelo Galigniana, 2 years ago

Patch needs improvement: unset

comment:10 by Carlton Gibson, 2 years ago

Patch needs improvement: set

Small issues remaining on PR

comment:11 by Marcelo Galigniana, 2 years ago

Patch needs improvement: unset

Changes applied!

comment:12 by Mariusz Felisiak, 2 years ago

Patch needs improvement: set

Per Thibaud's review.

comment:13 by Marcelo Galigniana, 2 years ago

Patch needs improvement: unset

comment:14 by Carlton Gibson, 2 years ago

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 by Carlton Gibson <carlton@…>, 2 years ago

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