Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus skip link on navigation #21108

Open
wants to merge 10 commits into
base: master
from
Open

Focus skip link on navigation #21108

wants to merge 10 commits into from

Conversation

@madalynrose
Copy link
Contributor

madalynrose commented Jan 31, 2020

Description

Many users have difficulty orienting themselves on a new page if focus is set on too large of an element or an inoperable element (like our wrapper div). Sending focus directly to a smaller, interactive control like a skip link is ideal. Unfortunately, we're limited with what we can programmatically achieve at the framework level (we have no way of knowing if a skip link exists on site pages from our Router). Focus on a skip link on navigation (as recommended based on @marcysutton's research with Fable Tech Labs in #20540) must be achieved on the site level. Since we'll recommend developers do this on their end, it makes sense to implement it on Gatsby's .org site as well. We should also add an example of how to achieve this (#21107).

Because we're an organization and have to weigh the needs of all of our users, we'll have to weigh tradeoffs, specifically around the styling of the skip link. Default behavior both focuses and un-hides the skip link with every navigation, even when using a mouse. This is the recommended experience, since low-vision users who rely on magnification need this visual. It might be worth thinking about how to implement user preferences (e.g. saving in local storage) to toggle between showing on focus or keeping it visually hidden.

Feel free to test out this behavior here.

madalynrose and others added 10 commits Jan 29, 2020
Co-Authored-By: LB <barth.laurie@gmail.com>
also add descriptive text for issue #5581
@madalynrose madalynrose requested a review from gatsbyjs/website as a code owner Jan 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant
You can’t perform that action at this time.