Skip Links to Navigation, Search and Footer

<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>