Please support “skip to main content” on your docs site#
2024 Jun 3
Last month I embarked on a journey to get comfortable with keyboard-based computer navigation. In other words, when using my computer I don’t want to move my right hand from my keyboard to my mouse hundreds or thousands of times per day just to do basic navigation tasks like changing tabs, scrolling the screen, etc.
Background# I personally am learning keyboard-based navigation for “power user” reasons: I’ve heard that keyboard-only navigation is faster. But more importantly, keyboard compatibility is a P0 website accessibility feature.
How it works# On day 1 of this journey I realized how important the Tab key is for website navigation. Tab lets you jump between focusable elements such as links and buttons. If you’re viewing this page from a computer with a keyboard you can try it now: Press Tab on this page. You should see a Skip to main content link pop up. This is the thing that most docs sites are missing. More on this in a moment. Press Tab again. The focus moves to the Home link. The link gets a colored border around it; that’s how you know it’s focused. Keep pressing Tab and notice how the focus moves from link to link. (To actually navigate to a focused link you press Enter .)
The problem# On day 2 of my journey I realized that a lot of docs sites suck at Tab -based navigation, including the one I work on, pigweed.dev . They don’t give you a Skip to main content link, like the one you just saw. You have to tab through the header, site nav, and searchbox before focus lands on the main content. In practice, the link/button/etc. that you actually want to interact with is probably in the main content. Big docs sites often have hundreds of links in the site nav, which means you have to tab hundreds of times before the main content is in focus! ༼ ༎ຶ ෴ ༎ຶ༽
Keyboard-friendly sites# Here are examples of professional sites that implement this feature. These sites probably “have their shit together” when it comes to accessibility: https://www.google.com/search?q=accessibility
https://en.wikipedia.org/wiki/Accessibility
https://www.w3.org/WAI/fundamentals/accessibility-intro/