Identify the repeated obstacle

A site header may contain a logo, six navigation links, a theme control and a contact button. Repeating all those stops on every page makes a simple reading task unnecessarily slow. A skip link offers a direct route to the main content while leaving the regular navigation available when someone actually needs it.

Place a link near the beginning of the body and point it to the main region’s unique id. For example, an href of #main-content should resolve to a main element with that exact id. This works with ordinary browser navigation and does not require a click handler or an animation library to decide where the reader goes.

Make the destination useful

Moving the viewport is only part of the interaction. The keyboard journey should continue from the content after activation. A main element with tabindex="-1" can be a programmatic focus destination without adding an extra regular Tab stop. Verify behavior in the browsers and assistive technology combinations you support rather than assuming the fragment alone handles everything.

An always-visible skip link is straightforward. If the design initially places it offscreen, reveal it when focused and position it above sticky navigation. Use a strong foreground and background combination. Do not hide it with display:none, because that removes it from keyboard access instead of providing a shortcut that can be discovered.

Account for sticky headers

A fixed header can cover the destination’s first heading. Add an appropriate scroll offset through scroll-margin or the scrolling container’s scroll-padding. Test with the expanded header height on smaller screens. The skip action should expose the content title, not land halfway through a paragraph or underneath a floating navigation panel.

Verify the first interaction

Reload the page, press Tab once, and confirm the skip link is visible. Activate it, then press Tab again and inspect where focus moves. Repeat on an article, a tool and the contact page. Also check that the id is unique: duplicate fragment targets can make the shortcut depend on incidental markup order.

Further reading

Put the idea to work.

Explore free browser tools for images, text and developer workflows.

Try a free tool