"Skip to Content" Link
Adds a hidden "Skip to content" link that appears when keyboard users press Tab, letting them jump past the header and menu, for themes that lack one.
Opens WPIDE on
Code
<a class="wpide-skip-link" href="#main">Skip to content</a>
<style>
.wpide-skip-link{position:absolute;left:-9999px;top:0;z-index:100001;padding:10px 16px;background:#1e1e1e;color:#fff;text-decoration:none;}
.wpide-skip-link:focus{left:10px;top:10px;}
</style>
<script>
(function () {
var link = document.querySelector('.wpide-skip-link');
var target = document.querySelector('#main, main, .site-main, #content');
if (!link || !target) { return; }
if (!target.id) { target.id = 'wpide-main'; }
if (!target.hasAttribute('tabindex')) { target.setAttribute('tabindex', '-1'); }
link.setAttribute('href', '#' + target.id);
})();
</script>Notes
The link targets #main, main or .site-main, whichever exists first. Your theme must call wp_body_open.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.