Help keyboard and screen reader users jump past repeated navigation. Configure a skip link, check its contrast and copy production-ready HTML and CSS.
Runs entirely in your browser. Nothing is uploaded to any server.
Keyboard users otherwise have to tab through every header and menu link on every single page.
Success criterion 2.4.1 Bypass Blocks asks for a way to skip repeated content; a skip link is the classic solution.
The link stays out of sight for mouse users and appears only when it receives keyboard focus.
Place the skip link as the very first focusable element inside the body so it is the first thing a keyboard user reaches. Its href must match the id of your main content area, usually the main element. Adding tabindex="-1" to that target ensures focus actually moves there in every browser, so the next Tab continues from the main content rather than the top of the page.
Never hide a skip link with display:none or visibility:hidden, because hidden elements cannot receive focus. Both reveal styles here keep the link focusable: one moves it off-screen above the viewport, the other clips it to a single pixel until it is focused. Make sure it is clearly visible on focus with strong contrast and a focus outline.
Put the link before the header so it is the first Tab stop.
tabindex="-1" on main lets focus land there reliably.
High contrast and an outline make it obvious when it appears.
Immediately after the opening body tag, before your header, logo and navigation.
Some browsers scroll to the target but do not move keyboard focus to it unless it is focusable. tabindex="-1" makes it focusable by script and links without adding it to the Tab order.
Landmarks help screen reader users, but sighted keyboard users cannot jump between landmarks without extra tools. A skip link helps both groups.
Both are accessible. The slide-down style animates in; the visually hidden style appears instantly and avoids layout issues in some designs.
At least 4.5:1 between text and background for normal text, per WCAG AA.
More free tools from My Panda Toolbox.