Lessons · HTML and CSS · past the navigation, every page
Past the navigation, every page
A link, first on the page, pointing at the id of the main content.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
A mouse user's eye skips twenty navigation links for free. A keyboard user Tabs through all of them again on every single page until somebody gives them a way past.
How to think about it
First focusable thing, or it has already failed. Hide it with a visually-hidden class that becomes visible on :focus -- not display:none, which takes it out of the tab order so it can never be focused to appear.
Worked example
<a href="#main" id="skip">Skip to content</a>…<main id="main">…</main>One Tab on this page and focus is on skip -- it is genuinely first, which is the only thing that makes it work.
Your turn
A skip link must be the first ____ thing on the page.
Write a page and watch it render
The trap
A skip link hidden with display:none is a link that exists only in the source. It cannot be focused, so it can never be shown.