Users need to be able to skip past the main navigation of your site and go directly to the unique content of your page. This is important for both keyboard only users as well as screen reader users as having to navigate through the same links that appear on every page of the site can be tedious. There are numerous ways to accomplish this, but the results need to be the same. The first focusable element on the page needs to be a link that takes the reader to the main content of the page. Most of the time, this link is hidden until focused upon, but it could also be visible all of the time.
A simple version of this can be done by moving the link off-screen (and making it not visible) until the element is in focus:
.skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip:focus { position: static; width: auto; height: auto; }
And then in the page, this appears at the top of the page (usually as the first element inside the <header> element).
<header>
<a href="#main" class="skip">Skip to main content</a>
<!-- rest of header goes here -->
</header>
There are other ways to accomplish this, but this is one of the simplest. It is possible to have multiple skip links to various portions of the page, but it is usually not necessary and may be confusing. For the top of the page, a single link is usually best.
Other times, you might want to add a secondary skip nav link to your page if you have a lot of links that are focusable, for example a secondary navigation or search feature like for a news or calendar page. In that case the technique is the same, but the skip link location may be right above the secondary navigation and takes you to the new content.
