Set your Publisher ID in src/config/ads.ts to display live ads.
Keyboard Navigation & Focus Management
:focus-visible styling, tabindex rules, skip links, and avoiding keyboard traps
Many users navigate the web exclusively via keyboards, switch devices, or sip-and-puff tubes. Every interactive element must be reachable and operatable via the keyboard.
Focus Indicators & Tabindex Rules
NEVER use outline: none without providing an alternative focus style! Doing so blinds keyboard users to their location on the page.
Use :focus-visible to show high-contrast focus rings when navigating via keyboard while hiding them on mouse clicks.
tabindex="0": Puts an element into natural keyboard tab order.
tabindex="-1": Removes element from tab order but allows programmatic focus via element.focus().
WARNING: Avoid tabindex="1+" (positive numbers) because it disrupts natural document tab order.
<!-- Skip Link at the very top of the page -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<style>
/* Skip link hidden until focused by keyboard */
.skip-link {
position: absolute;
top: -100px;
left: 10px;
background: #04AA6D;
color: white;
padding: 8px 16px;
z-index: 1000;
}
.skip-link:focus {
top: 10px;
}
/* Beautiful, accessible focus-visible ring */
button:focus-visible, a:focus-visible {
outline: 3px solid #0284c7;
outline-offset: 3px;
}
</style>Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
What is the purpose of a "Skip to main content" link placed at the very top of an accessible website?