# Skip Links to Navigation, Search and Footer

> Adds a small set of keyboard skip links (main content, main menu, search and footer) that appear on the first Tab press. Links whose target is missing on a page are removed automatically.

- Type: Universal
- Runs: Site-wide body
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: skip-links, keyboard, navigation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-skip-links-menu/

## Code

```php
<nav class="wpide-skiplinks" aria-label="<?php echo esc_attr__( 'Skip links' ); ?>">
    <a href="#" data-target="main, #main, .site-main, #content">Skip to main content</a>
    <a href="#" data-target="#site-navigation, nav.main-navigation, header nav, .wp-block-navigation">Skip to main menu</a>
    <a href="#" data-target="form[role=search] input[type=search], .search-field, .wp-block-search__input">Skip to search</a>
    <a href="#" data-target="footer, #colophon, .site-footer">Skip to footer</a>
</nav>
<style>
.wpide-skiplinks a{position:absolute;left:-9999px;top:8px;z-index:100002;padding:10px 16px;background:#111;color:#fff;font-size:16px;text-decoration:underline;border-radius:4px;}
.wpide-skiplinks a:focus{left:8px;outline:3px solid #fff;outline-offset:-6px;}
</style>
<script>
(function () {
    document.querySelectorAll('.wpide-skiplinks a').forEach(function (link, i) {
        var target = document.querySelector(link.getAttribute('data-target'));
        if (!target) { link.remove(); return; }
        if (!target.id) { target.id = 'wpide-skip-target-' + i; }
        if (!/^(A|BUTTON|INPUT|SELECT|TEXTAREA)$/.test(target.tagName) && !target.hasAttribute('tabindex')) {
            target.setAttribute('tabindex', '-1');
        }
        link.setAttribute('href', '#' + target.id);
        link.addEventListener('click', function () { setTimeout(function () { target.focus(); }, 0); });
    });
})();
</script>
```

## Notes

Adjust the CSS selectors in the data-target attributes to match your theme's header, menu, search and footer.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Skip Links to Navigation, Search and Footer" in its snippet library and add it in one click; or create a new Universal snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/