Altwise

Visible focus and skip links: the two keyboard fixes most small business sites need

How to check and fix the keyboard focus outline and add a skip link on a small business website: why outlines disappear, copyable :focus-visible CSS, sticky header fixes, a skip link that works, platform notes and a 10-minute test.

Many people move through websites with a keyboard instead of a mouse: people with tremors or limited hand movement, people using switch devices or voice control, screen reader users, and plenty of power users. They need two simple things from your site: a clear outline showing where they are (the focus indicator), and a quick way past the menu to the main content (a skip link). Both are small code changes, and both are often broken by a theme or a design tweak. This page shows how to check them and the CSS and HTML to fix them.

1. Check your focus outline in 2 minutes

Open your home page, click once in the address bar, then press Tab slowly. Each press should move a visible outline or highlight to the next link, button or field, in a sensible order. Watch for three problems: the outline disappears completely, it's so faint you can't find it, or it goes behind a sticky header, cookie banner or chat bubble. WCAG asks for a visible focus indicator (2.4.7 Focus Visible) and, since WCAG 2.2, that the focused item isn't completely hidden by other content (2.4.11 Focus Not Obscured). See the full keyboard navigation test.

2. Why the outline goes missing

Designers often remove the browser's default outline because it shows up when people click with a mouse. A line like outline: none or outline: 0 in a theme, a custom CSS box or a CSS reset, or a utility class such as outline-none, removes it for keyboard users too. Custom buttons built from a <div> may never receive focus at all. Search your custom CSS for "outline" first.

3. Put a clear outline back

The :focus-visible selector shows the outline to keyboard users while browsers usually skip it after a mouse click, so it answers the usual design objection. Make it thick enough to notice and give it enough contrast against the colours around it; a solid outline in a dark colour with a small offset works on most light sites, and a light outline on dark sections. WCAG asks for 3:1 contrast for parts of controls people need to see (1.4.11 Non-text Contrast), and its stricter 2.4.13 Focus Appearance describes a good target size for the outline.

/* Visible keyboard focus for links, buttons and form fields */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1d4ed8;   /* example colour: pick one with 3:1 contrast on your backgrounds */
  outline-offset: 2px;
}
/* On dark sections, switch to a light outline */
.dark-section a:focus-visible,
.dark-section button:focus-visible {
  outline-color: #ffffff;
}

Check the colour with our free colour contrast checker against each background it will sit on.

4. Keep focused items out from under sticky bars

A sticky header, cookie banner or chat launcher can cover the link a keyboard user just moved to. One CSS line tells the browser to leave room when it scrolls a focused item into view. Set it to about the height of your sticky header, and make sure cookie banners can be closed and don't cover the page forever. See cookie banners, pop-ups and chat widgets.

/* Leave room for an 80px sticky header when items scroll into view */
html {
  scroll-padding-top: 80px;   /* example value: match your header height */
}

5. Add a skip link

A skip link is the first thing a keyboard user reaches on each page. It jumps past the logo and menu straight to the main content, so they don't Tab through 20 menu links on every page. WCAG asks for a way to bypass repeated blocks like menus (2.4.1 Bypass Blocks); a skip link plus proper page regions is the common way to do it. Many themes include one already, so Tab once on your home page before you add another. If nothing appears, add this as the first item inside <body>:

<a class="skip-link" href="#main">Skip to main content</a>
<header>…logo and menu…</header>
<main id="main" tabindex="-1">
  …page content…
</main>
/* Hidden until it gets keyboard focus, then shown at the top */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #111827;
  color: #ffffff;
  text-decoration: underline;
}
.skip-link:focus {
  top: 1rem;
}

Don't hide the skip link with display: none; it then can't receive focus at all. The tabindex="-1" on <main> helps some browsers move keyboard focus, not just the scroll position, to the content. Test it: press Tab once, press Enter, then Tab again. The next item focused should be inside the main content, not the menu.

6. Where to put this on common platforms

Common mistakes

A 10-minute check you can do today

  1. On your home page, press Tab once. Does a "Skip to main content" link appear? Press Enter. Does the next Tab land in the content?
  2. Keep pressing Tab through the menu. Can you always see which item is focused?
  3. Tab to your main button (Book, Buy, Contact). Is its outline visible against the button colour?
  4. Scroll down and Shift+Tab back up. Does anything get hidden under the sticky header?
  5. Repeat on one inner page and on your contact or booking form.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. It can flag a skip link pointing to a missing target, a page with no main region, links and buttons with no name, and low-contrast text. It can't reliably see whether your focus outline is visible, whether it's hidden behind a sticky bar, or whether the Tab order makes sense, which is why the 10-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: keyboard navigation test, accessible navigation menus, link text and buttons, website accessibility checklist.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Checking how your site looks in dark mode or a high contrast setting? See dark mode and high contrast accessibility.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.