PEN BEAM / COPY-READY EXAMPLE
Accessible Skip Link and Focus Styles
Make keyboard navigation visible with a skip link and consistent focus indicators.
What this snippet does
Provides a skip link that appears when keyboard-focused and a clear focus outline for interactive controls. The link also needs a matching target in page HTML.
CSS / source code
/* HTML: <a class="skip-link" href="#main-content">Skip to content</a> */
.skip-link {
position: absolute;
z-index: 10000;
top: 0.75rem;
left: 0.75rem;
padding: 0.75rem 1rem;
color: #fff;
background: #17172d;
transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 3px solid #1c9176;
outline-offset: 3px;
}
#main-content { scroll-margin-top: 6rem; }
Where to place it
Add this to the main stylesheet. Ensure the HTML skip link points to a unique main landmark ID such as #main-content and sticky headers do not cover the focused target.
Back up the relevant file or settings first. Apply the change on staging, verify behavior, and retain a rollback path before production deployment.
What to check before deploying
- Use only the keyboard to tab through the page and confirm each interactive element has a visible focus state.
- Check contrast of focus indicators against all surfaces, including hover and dark sections.
- Test zoom, skip-link activation, reduced motion and pages with sticky headers; do not remove outlines without a visible replacement.