Disclaimer: The views expressed on this site are my own and do not necessarily reflect those of my employers. :) – Manning Krull

Add a "skip to main content" button to your website template!

Of all of the accessibility considerations for web development, this is the one I most often find developers don't know about. It's an ADA requirement that websites have a "skip to main content" button at the top, so that people navigating with the tab key can avoid having to tab through your entire navigation area every time they visit a new page. It's very easy to implement this in your website code. Check it out...

First, add this link in your website template, before the nav area:

<a href="#main-content" id="skip">Skip to main content</a>

Then, just above where your h1 starts for your page content, add this anchor. The link we added above will jump down to this.

Then add this stuff in your css file:

#skip {
  position: absolute;
  top: -100px;
  left: 0;
  background: #fff;
  border: 2px solid #000;
  padding: 10px 15px 10px 15px;
}
a#skip:focus {
  top: 0; }

The first bit styles the link and places it above the browser window, out of frame. The last bit here is for when you tab onto this link; it moves it into the browser window.

Easy!

Of course you can change the colors and text styles and stuff.

To see the Skip link in action on this site, navigate to any page and then press the tab key. The link is hiding above the browser window; when you press tab it comes into focus and moves down to the very top of the page. When you press tab again, the link is no longer in focus so it "disappears"; it moves back up above the browser window.

Remember, ADA requires that we make sure our websites can be navigated perfectly with the tab key alone, so that the user can tab through all links, in order, with visual feedback (usually an outline) to show which link is in focus. In any simple html page, this functionality exists by default, with the focus styling already in place! That's just how web browsers work, fortunately. However, some CMS platforms and frameworks might break this tab functionality, or they might hide the default styling that shows when a link is in focus. Make sure you test this on your own site and ensure that it's performing correctly.

– Manning

Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.