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

Try this: navigate to any page on this site, let it load, and then press the tab key. See that "Skip to main content" link that appears at the top left? It's an ADA requirement that websites provide a skip link like this, for two reasons: 1) so that people navigating with the keyboard can avoid having to tab through your entire header and navigation area every time they visit a new page, and 2) so that people using screen reader software don't have to listen to your entire header and navigation area every time they visit a new page.

This kind of "skip" link is probably present on most of the bigger sites you visit every day, but you haven't seen it because you weren't looking for it.

When creating a website, we should always make sure that someone on the creative side designs this link and includes it in their layout(s) for review. Then dev can implement it in the programming phase.

It's very easy to implement this kind of link in your website code. Check it out...

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

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

You can have that div just sit there empty, acting as your anchor, or the more efficient thing to do would be to put that id right in the <div> that actually contains your main content.

Then add this stuff in your css file:

That first bit styles the link and places it above the browser window, out of frame. The second bit is for when you press tab; the link 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.

Easy!

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

(I should mention: while it's common these days for this "Skip to main content link" to be invisible on page-load, it's also fine to just have it be the first visible link on the page, at the very top-left, before all other content. You'll occasionally see one like that out in the wild, especially on sites that are heavily focused on accessibility. But most companies prefer to hide it.)

Remember, ADA requires that we make sure our websites can be navigated perfectly with the keyboard 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

Back to top  |  Articles list

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.