How To: Create 'Skip Navigation' Link

• Sep 22, 2023
• 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.

See the following articles for information on related accessibility regulations:

• Creating “Skip Navigation” Links
• Section 508 1194.22(o): A method shall be provided that permits users to skip repetitive navigation links.
• Web Content Accessibility Guidelines (WCAG) 2.0 - Section 2.4.1 Bypass Blocks

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.

ASPX

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

JS

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.

PseudoMarkup

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