Skip to content

Conversation

@JPrevost
Copy link
Contributor

@JPrevost JPrevost commented Sep 2, 2022

Why are these changes being introduced:

  • The current tab order requires keyboard or screenreader users to tab
    though all of the navigation links before they get to the main content
    of the page

Relevant ticket(s):

How does this address that need:

  • Introduces an off screen link as the first element in the tab order
    that will display when it has focus but remain off screen for users
    not using tab to navigate the document.
  • Introduces a new scss file with the required style elements and uses
    colors variables to ensure both light and dark mode are respected.

Background information on this technique:

Why are these changes being introduced:

* The current tab order requires keyboard or screenreader users to tab
  though all of the navigation links before they get to the main content
  of the page

Relevant ticket(s):

* Discussed as part of larger WCAG ticket just-the-docs#566

How does this address that need:

* Introduces an off screen link as the first element in the tab order
  that will display when it has focus but remain off screen for users
  not using tab to navigate the document.
* Introduces a new scss file with the required style elements and uses
  colors variables to ensure both light and dark mode are respected.

Background information on this technique:

- https://www.w3.org/TR/WCAG20-TECHS/G1.html
- https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
@mattxwang
Copy link
Member

Leaving a comment to note that I haven't forgotten about this PR - will get to reviewing this in-depth when I have a chance. On first glance, it looks good!

Copy link
Member

@mattxwang mattxwang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Getting back to this now - thanks for your patience @JPrevost. I also have no constructive feedback here, appreciate you taking the time to implement this PR + adding the relevant links!

I manually tested this on the latest Chrome / Firefox and this works as expected. Great job as well in making this work with the dark theme. Good to merge!

@mattxwang mattxwang merged commit 8333ece into just-the-docs:main Sep 10, 2022
@mattxwang
Copy link
Member

Changelog:

Given the importance of your changes, going to cut a new release candidate today :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants