Skip navigation links: reach the main content and continue in the right place

Identify what is repeated and what should come next

For the archive, the logo, primary navigation and collection links repeat on every article. The individual history story is the main content. On a search template, the main task may instead begin with a results heading and search controls. Write that distinction down before choosing the shortcut destination.

WCAG’s Bypass Blocks explanation describes a Level A requirement for a mechanism to bypass repeated blocks. Suitable landmarks, headings and links can serve relevant approaches; the criterion is not a demand for one exact phrase on every page.

An early skip link is nevertheless a direct, discoverable route for many keyboard journeys. Decide what it bypasses and where the visitor should continue. A link that merely jumps to another large navigation region does not fulfill the archive’s intended shortcut.

Make the first encounter usable

WAI’s G1 technique describes a link at the beginning of the page leading to the main content, visible at least when focused. Put the control early in the keyboard sequence and give it a meaningful label, such as “Skip to main content.”

Start a fresh public-page visit and press Tab without using the pointer first. Observe which control appears and whether its outline and label are readable. Check that it is not clipped by an overflow boundary, placed behind the header or rendered in the same color as its background.

Do not require the reader to open the full menu before finding the bypass. If a cookie interface or another overlay interrupts the first visit, inspect that interaction separately and then confirm the page’s normal shortcut remains usable. One passing state does not establish every returning-visitor state.

Distinguish movement from focus

Activate the bypass with Enter, then inspect where focus went and press Tab again. A scroll position can look correct while the next Tab returns to a navigation item above the story. Record those as separate observations: destination visible, focused element and next sequential control.

The tabindex reference explains that a negative value permits programmatic focus without adding an ordinary sequential stop; zero includes an element in sequential navigation. Positive values change ordering and are generally discouraged. These are tools to use deliberately, not attributes to scatter throughout the page.

Do not add JavaScript or tabindex to every fragment target by habit. Ask whether the current supported browsers give the intended continuation. If a repair is needed, the maintainer should use a focused approach and retest both activation and subsequent navigation rather than making the entire article tabbable.

Diagnose the first failed observation

If nothing happens, compare the link’s fragment with the actual target identifier. If the wrong section appears, check for duplicates and the destination’s location. If the viewport moves but keyboard navigation remains in the header, investigate focus handling. Those defects need different repairs.

If focus reaches the target but the heading sits under fixed chrome, the bypass route and layout offset need to agree. The sticky-header guide explains scroll containment and destination clearance. Do not compensate by moving the main region into an illogical place in the document.

For an intermittent report, record the page, viewport, zoom, menu state and steps before activation. “Article page, menu closed, first Tab, Enter, next Tab returns to Collections” provides a reproducible journey. “Skip link broken” does not identify which part failed.

Keep visibility through responsive and open states

Repeat the check with the narrow layout and increased text size. A shortcut correctly positioned above a desktop header may disappear under a mobile overlay or move outside a clipped container. Long translated labels and a wrapping header are useful layout cases to inspect if those variations exist on the site.

Check the normal, focused and activated presentation over the actual background. Use the contrast-state workflow if the control is visible but unreadable. Do not remove its focus indication after activation merely to improve a screenshot.

Test an open navigation overlay according to its own design. A modal overlay may intentionally keep focus inside until closed; a page-level skip link is not a reason to escape that model unexpectedly. After closing the overlay, confirm the ordinary bypass journey still works.

Review backward movement and later navigation

After reaching the main region, try Shift + Tab and continue forward again. The sequence should be explainable without custom positive tab order. Then follow an article link and use Back, checking whether the restored page leaves the visitor in a coherent position.

If the website swaps page content without a full navigation, include that route in the review. Confirm the target still belongs to the current main content rather than a removed or hidden instance. A shortcut tested only on the first full page load cannot establish the later template state.

Keep the broader menu-accessibility review separate. The bypass offers an efficient alternative to repeated navigation; it does not excuse inaccessible controls for readers who choose to use that navigation.

Retain evidence that explains the result

For each shared template, keep the starting control, label, unique destination, focused result and next Tab destination. Record browser and input method, plus any responsive or overlay state checked. Include a meaningful assistive-technology review where available, without describing a keyboard-only inspection as a screen-reader test.

An automated scan can help find a duplicate identifier or missing name, but cannot prove the entire continuation journey. Accept the shortcut when a reader can discover it, activate it and continue with the actual main task. Recheck that contract when headers or templates change.