Skip Links

keyborad event, show option 'skip the navigation(directly go to the content)' then enter.

<a href="#maincontent" class="skip-link">Skip to main content</a>

<nav>
...
</nav>

<main id="maincontent" tabindex="-1"> //tabindex for old browsers
...
</main>
.skip-link {
    position: absolute;
    top: -40px;            // off screen
    left: 0;
    background: #bf1722;
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;                // on secreen
}

You can read more about skip links in this article on the Web AIM site.

https://developers.google.com/web/updates/2016/03/focus-start-point?hl=en

results matching ""

    No results matching ""