Skip navigation

A “skip navigation” link is used to create efficient access for users with certain disabilities.

Example

Example

Use the tab key to show this example.

HTML

                                    <p>Use the tab key to show this example.</p>
<nav class="coop-c-skip-nav">
    <ul class="coop-c-skip-nav__list">
        <li><a href="#main" title="Skip to main content" class="coop-c-skip-nav__link">Skip to content</a></li>
        <li><a href="#navigation" title="Skip to main navigation" class="coop-c-skip-nav__link">Skip to main navigation</a></li>
    </ul>
</nav>

                                    

Design and content

All Co-op websites should have skip navigation in the header.

Some people navigate websites using their keyboard and skip navigation gives them and easy way to bypass areas such as the main navigation that might otherwise take them a long time to navigate through.

You should give people links to the key content areas of the website these are usually the main navigation, main content area and footer.

The skip link component is visually hidden until a keyboard press activates it.