Skip Link

Guidelines

As stated by the W3C in its WACG 2.1 guidelines on web accessibility, the intent of this component is “to allow people who navigate sequentially through content more direct access to the primary content of the Web page”.

At Mews, where we design complex web applications, we apply this principle by focusing on key structural areas, such as:

• App Bar: Persistent area with global tools like the search bar and shortcuts.
• Side Menu: The main navigation area.
• Content Area: The main operational section of the interface, containing the information users need to consult and interact with.

 

Benefits

• Direct access: Allows users to quickly reach the main content area or navigation.
• Efficiency: Saves time and effort for keyboard and screen reader users.
• Assistive tech support: Improves usability for screen readers, magnifiers, and users with cognitive limitations.

 

How it works

When a page loads, pressing the Tab key displays the Skip Link, allowing users to jump directly to key areas of the interface. The specific targets should be defined in the context of each product.

For example, in our PMS, users can skip straight to the Side Menu or Content Area without tabbing through all preceding elements.

1. The page loads.
2. The user presses the Tab key to activate focus.
1. The Skip Link overlay appears, with focus on Skip to navigation.
2. Pressing Enter confirms the target, and focus moves to the Side Menu.
3. While focus is still on the Skip Link overlay, the user presses Tab again.
1. The focus shifts to Skip to content, the second option on the overlay.
2. Pressing Enter confirms the target, and focus moves to the Content Area.
4. Pressing Tab after the Skip Link options resumes normal page flow, moving focus to the next element on the interface.

 

Best practices

• Positioning: Ensure that the Skip Link is the first focusable element on the page.
• Consistency: Use the Skip Link across similar pages for a consistent experience.
• Native features: Be mindful of built-in browser and user-agent accessibility features to avoid conflicts.

 

Implementation considerations

To ensure the Skip Link works correctly, please check:

• The Skip Link is the first focusable element on the page.
• It becomes visible and focusable when pressing Tab.
• Link texts clearly indicate their target areas.
• Screen readers correctly announce the text when the link is focused.
• After activation, keyboard focus moves to the intended destination (e.g., the main content area), and users can continue tabbing through the page content in a logical order.

All of the above should be true to meet accessibility expectations.