[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Expand]Client-Side Functionality
  [Expand]Cookies Support
  [Expand]Appearance Customization - Theming
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Supported Document Types
  [Collapse]Accessibility Support
   [Collapse]Accessibility Best Practices
     How To: Divide a Page into Regions using ARIA Landmark Roles
     How To: Create 'Skip Navigation' Link
     How To: Provide a Screen Reader with Information About Changes on a Page
    Web Accessibility in DevExpress ASP.NET Controls and MVC Extensions
    Controls and Extensions Exposing the AccessibilityCompliant Property
   Right to Left Support
   HTML Encoding
   Binary Storage Configuration
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How To: Create 'Skip Navigation' Link

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

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:

Expanded Implementation Details

The implementation of this technique is illustrated by the example in the DevExpress accessibility demos.

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

Note

The DIV element should be the first meaningful element of the page.

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

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.

Note

Alternatively, the "Skip to main content" link can target the specified anchor in the main content container. Refer to the T382165: How to skip repetitive navigation links code central example for details on this technique.

Is this topic helpful?​​​​​​​