How To: Create 'Skip Navigation' Link

  • 2 minutes to read

This topic illustrates how to implement a link that moves focus to the main content and skips over a web page’s navigation section (Section 508 1194.22(o), WCAG 2.0 2.4.1). The link is initially hidden, and it becomes visible only when a user presses the TAB key after the page loads. This helps end users who use a screen reader (or a keyboard) for navigation avoid repeated blocks. See the following help topic for a list of demos that implement this feature: Accessibility Best Practices.

The image bellow illustrates how the ‘skip’ link is displayed on a web page when a user focuses the link.

Accessibility-SkipLinks

See the following articles for information on related accessibility regulations:

Implementation Details

See the following help topic for more information about this technique: Accessibility Best Practices.

To implement this technique, create a DIV element that is hidden by default. Place the link inside the DIV’s A element.

<style>
.dxAIFE
{
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: polygon(0 0);  
    height: 1px;
    overflow: hidden;
    position: absolute !important;
}
</style>
...
<div>
    <a onfocus="DXDemo.toggleSkipLinks();" onblur="DXDemo.toggleSkipLinks();" 
    href="javascript:DXDemo.focusMainElement();" class="skipPanel dxAIFE">Skip to Main Content</a>
</div>
NOTE

The DIV element should be the page’s first meaningful element.

When the link gets or loses focus, it calls the toggleSkipLinks function, which switches the DIV element’s visibility. Press Tab again to ignore the “Skip to main content” link.

DXDemo.toggleSkipLinks = function() {
    document.getElementById('skipLinks').classList.toggle('dxAIFE');
}

This link calls a function that focuses a specific page element. In DevExpress accessibility demos, the first element in the container with the role=”main” is focused.

<SkipLinkArea>
    <a>Skip to Main Content</a>   
</SkipLinkArea>
<div role="navigation">
 <repetitiveLinks/>
 <repetitiveLinks/>
 ...
</div>
<div role="main">
 <targetFocusableElement/>
</div>
NOTE

Alternatively, the “Skip to main content” link can target the specified anchor in the main content container. Refer to the following Support Center Example for details on this technique: T382165: Accessibility - How to skip repetitive navigation links.