UX Patterns Guide
Back to compare picker

Skip link vs In-page anchor navigation vs Back link

Prefer a skip link when keyboard or assistive-technology users would otherwise encounter repeated header, navigation, breadcrumb, filter, or advertising blocks before the primary content.

Skip link live exampleIn-page anchor navigation live exampleBack link live example

Decision dimensions

Dimension Skip linkIn-page anchor navigationBack link
UI or UX UI + UX - Keyboard-visible bypass link to primary page contentUI + UX - Same-page section jump links for long contentUI + UX - Single previous-page return link for a transaction
UI guidance Render a real link before repeated page chrome, usually as the first focusable control after required cookie or service banners, with destination-oriented text such as Skip to main content.Render a labelled navigation landmark with links to major headings on the current page, using labels that match or clearly summarize the destination sections.Render one unobtrusive Back link near the top-left of a transaction page, before the main content, with a destination that returns to the previous service page.
UX guidance Use skip links to let keyboard, switch, screen-reader, and magnifier users bypass repeated navigation, headers, breadcrumbs, filter panels, or other repeated blocks before reaching the primary task or content.Use in-page anchor navigation to help users understand the contents of a long page and jump directly to the section they need without leaving the page.Use Back links to help users safely move one step back in a multi-page transaction without relying on browser history or losing previously entered information.
Good UI The first Tab on a service page reveals a high-contrast Skip to main content link above the header.An article starts with an 'On this page' nav linking to Eligibility, Documents, Fees, and After you apply, each matching an H2 on the same page.A question page shows a single 'Back' link above the H1, before the form, and the Continue button remains the only primary action after the fields.
Bad UI The skip link is hidden with display none and never receives keyboard focus.A short page with two paragraphs shows a table of contents that adds more navigation than content.A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time.
Good UX A keyboard user presses Tab once, activates Skip to main content, and reaches the page heading instead of tabbing through 18 header links.A user opens a long guidance page, chooses Fees, and lands at the Fees heading with the Fees link marked active.A user goes back from Review answers to Contact details and sees the email address and phone number they already entered.
Bad UX Users must tab through global navigation, service navigation, breadcrumbs, and account links on every page before content.Clicking a jump link scrolls visually but keyboard focus stays in the contents list.Clicking Back returns to the browser's previous marketing page instead of the last service page.
Best fit Pages include repeated navigation, headers, breadcrumbs, filters, or other content before the main content.A long content page has several meaningful sections users may want to jump to.A multi-page transaction or form asks users one thing per page.
Avoid when There is no repeated block before the main content and the first focusable control is already the content task.The page is short enough that the headings are already visible.The page is an informational content page with a stable hierarchy.
Required state Default hidden-but-focusable state before keyboard focus.Default state with a labelled same-page navigation list near or beside long content.Default transaction page with one Back link before main content.
Accessibility burden Use a real link and a real fragment target so browser and assistive-technology behavior is predictable.Wrap the jump links in a labelled navigation landmark so assistive technology users can find the page contents list.Keep the Back link in a predictable reading order before main content, so skip links can bypass repeated navigation.
Common misuse Placing the skip link inside the header or after the navigation it should bypass.Using in-page anchors as a substitute for side navigation across different pages.Using Back as a breadcrumb or parent-category link.

Skip link

UI or UX
UI + UX - Keyboard-visible bypass link to primary page content
UI guidance
Render a real link before repeated page chrome, usually as the first focusable control after required cookie or service banners, with destination-oriented text such as Skip to main content.
UX guidance
Use skip links to let keyboard, switch, screen-reader, and magnifier users bypass repeated navigation, headers, breadcrumbs, filter panels, or other repeated blocks before reaching the primary task or content.
Good UI
The first Tab on a service page reveals a high-contrast Skip to main content link above the header.
Bad UI
The skip link is hidden with display none and never receives keyboard focus.
Good UX
A keyboard user presses Tab once, activates Skip to main content, and reaches the page heading instead of tabbing through 18 header links.
Bad UX
Users must tab through global navigation, service navigation, breadcrumbs, and account links on every page before content.
Best fit
Pages include repeated navigation, headers, breadcrumbs, filters, or other content before the main content.
Avoid when
There is no repeated block before the main content and the first focusable control is already the content task.
Required state
Default hidden-but-focusable state before keyboard focus.
Accessibility burden
Use a real link and a real fragment target so browser and assistive-technology behavior is predictable.
Common misuse
Placing the skip link inside the header or after the navigation it should bypass.

In-page anchor navigation

UI or UX
UI + UX - Same-page section jump links for long content
UI guidance
Render a labelled navigation landmark with links to major headings on the current page, using labels that match or clearly summarize the destination sections.
UX guidance
Use in-page anchor navigation to help users understand the contents of a long page and jump directly to the section they need without leaving the page.
Good UI
An article starts with an 'On this page' nav linking to Eligibility, Documents, Fees, and After you apply, each matching an H2 on the same page.
Bad UI
A short page with two paragraphs shows a table of contents that adds more navigation than content.
Good UX
A user opens a long guidance page, chooses Fees, and lands at the Fees heading with the Fees link marked active.
Bad UX
Clicking a jump link scrolls visually but keyboard focus stays in the contents list.
Best fit
A long content page has several meaningful sections users may want to jump to.
Avoid when
The page is short enough that the headings are already visible.
Required state
Default state with a labelled same-page navigation list near or beside long content.
Accessibility burden
Wrap the jump links in a labelled navigation landmark so assistive technology users can find the page contents list.
Common misuse
Using in-page anchors as a substitute for side navigation across different pages.

Back link

UI or UX
UI + UX - Single previous-page return link for a transaction
UI guidance
Render one unobtrusive Back link near the top-left of a transaction page, before the main content, with a destination that returns to the previous service page.
UX guidance
Use Back links to help users safely move one step back in a multi-page transaction without relying on browser history or losing previously entered information.
Good UI
A question page shows a single 'Back' link above the H1, before the form, and the Continue button remains the only primary action after the fields.
Bad UI
A page shows Back, breadcrumbs, a previous button, and pagination controls at the same time.
Good UX
A user goes back from Review answers to Contact details and sees the email address and phone number they already entered.
Bad UX
Clicking Back returns to the browser's previous marketing page instead of the last service page.
Best fit
A multi-page transaction or form asks users one thing per page.
Avoid when
The page is an informational content page with a stable hierarchy.
Required state
Default transaction page with one Back link before main content.
Accessibility burden
Keep the Back link in a predictable reading order before main content, so skip links can bypass repeated navigation.
Common misuse
Using Back as a breadcrumb or parent-category link.
Decision rules
  • Prefer a skip link when keyboard or assistive-technology users would otherwise encounter repeated header, navigation, breadcrumb, filter, or advertising blocks before the primary content.
  • Prefer in-page anchor navigation when users need a visible table of contents for several meaningful sections within the current page, not just a bypass around repeated chrome.
  • Prefer a back link when the task is returning to the previous transaction page in its last-seen state, not jumping forward to main content on the same page.
  • Place the primary skip link before repeated navigation in the focus order, usually immediately after the opening body tag or after required cookie/banner content.
  • Make skip links hidden by default only if they become prominent on keyboard focus; do not use display none, hidden, transparent-only, or zero-size techniques that remove or obscure keyboard access.
  • Point the skip link to the main content start or page heading and ensure activation moves focus or the browser focus position so the next Tab continues inside the primary content.
  • Keep the label destination-oriented, such as Skip to main content, instead of vague text like Skip or Continue.
  • Do not wrap the skip link in the header or a nav landmark when that makes it part of the repeated block users are trying to bypass.
  • Use additional bypass links only for genuinely large repeated blocks such as long filter panels; too many skip links create another block to skip.
  • Do not use a skip link as a replacement for landmarks, headings, sensible source order, visible navigation, or transaction Back behavior.
Inspect live examples
Skip linkIn-page anchor navigationBack link
Failure modes
  • The first keyboard Tab lands in a 20-item header menu because the skip link appears after the repeated navigation.
  • A skip link is hidden with display none, so screen-reader and keyboard users cannot focus it.
  • The link scrolls visually to main content but leaves keyboard focus in the header, so the next Tab continues through navigation.
  • The target ID is missing or duplicated, so activation changes the URL hash without reaching content.
  • A page adds Skip to footer, Skip to search, Skip to filters, Skip to nav, and Skip to content links before every page, creating link clutter.
  • A Back link is labelled Skip back even though it leaves the current page and loses the user's form context.