# Skip links — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-skip-links

> Let keyboard users skip repetitive content to reach main content.

## Why skip links matter

If every page loads a 50-item nav menu, keyboard users tab through all 50 to reach content. Skip link jumps them to main. It's also good UX for screen reader users.

## Implementation

Place skip link at the top of HTML, hide it off-screen, show on focus.

```html
<!-- At the very top of <body> -->
<a href="#main" class="skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .skip-link:focus {
    top: 0;
    left: 0;
    z-index: 9999;
    background: #000;
    color: white;
    padding: 10px;
  }
</style>
```

## Multiple skip links

Large sites may have multiple skip links: skip to main, skip to sidebar, skip to footer.

## Skip link best practices

Make skip links visible on focus. Use clear, action-oriented text. Test skip links work with screen readers too.
