Skip to content

Add "skip to main content" a11y feature #12407

@kaycebasques

Description

@kaycebasques

Describe the bug

Core Sphinx themes (alabaster, basic, etc.) are missing a simple but important a11y feature - easy Tab based navigation

How to Reproduce

  1. Go to https://www.sphinx-doc.org/en/master/index.html
  2. Keep pressing Tab. Notice how focus goes from the logo to the breadcrumbs, then the searchbox, then the site nav, etc. This is very unfriendly to people who rely on Tab-based keyboard navigation of Sphinx docs sites

(This is just one concrete example. You can try out the workflow on other sites based off alabaster, basic, sphinx_rtd_theme, etc.)

Compare this with a Google SERP:

  1. Go to https://www.google.com/search?q=sphinx-doc
  2. Press Tab. Notice that the first option is a link that says "skip to main content". Pressing Enter jumps focus to the main content so that you don't have to tab through all the boilerplate links

Wikipedia uses the same pattern as Google SERP: https://en.wikipedia.org/wiki/Sphinx_(documentation_generator)

Environment Information

This feature is missing at least from basic, alabaster, and sphinx_rtd_theme... and probably lots more

Sphinx extensions

N/A

Additional context

I will push up a PR in a bit demonstrating the fix. I'm happy to take it on and try to fix this across all the core themes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions