sphinx-doc
fix: Add "skip to main content" a11y feature
Subject: Improve usability of core Sphinx themes for people who rely on Tab-based navigation
Feature or Bugfix
- Bugfix
Purpose
- Improve the accessibility of core Sphinx themes
Relates
- #12407 12407
Hi @chrisjsewell picking this back up. I addressed your first round of comments. LMK if you want to proceed with this and I will add the same a11y fix/feature to all the other builtin themes.
Hey @kaycebasques, thanks for pushing this forward. I left a question as the choice of the target seemed a tad unusual to me.
For reference, in PyData Sphinx theme, we use the main landmark as the target directly: https://github.com/pydata/pydata-sphinx-theme/blob/0d0154b30bc29ad96bb28bc5c8ae88fe7b00177d/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html#L39
Also, in the same line linked above, you will see that we use a d-print-none class in the skip-link itself.
I think you should add this here, too. Otherwise, the Skip to main content button will show when users print stuff.
OK, I've got this working with all built-in themes. See the attached screencast for verification.
@trallard thanks for the review, I updated the feature to jump directly to the main content container and made sure that the "skip to main content" node does not leak through when printing
@kaycebasques I was trying to check the tab order (building the documentation first) and it seems the skiplink is not working.
When inspecting the source I can the main id seems to be missing from <div class="body" role="main">
Further inspecting the outline of the webpage confirms the main target element is missing (see screenshot attached)
Is this something you are also seeing on your end?
Note I am only starting to familiarise with sphinx codebase so it is likely I am missing something on how layout/styles/themes relate to each other so thought I would check first.