Django admin needs a skip link

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

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

[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.

[Fabian Jarrett]

Input being focused

[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?

[Carlton Gibson]

​PR

[Carlton Gibson]

Small issues remaining on PR

[Marcelo Galigniana]

Changes applied!

[Mariusz Felisiak]

Per Thibaud's ​review.

[Carlton Gibson]

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

[Carlton Gibson <carlton@…>]

In 564437f7:

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