New Components

Skip Links

Skip links are a web accessibility feature that allows users, especially those using keyboards or screen readers, to quickly bypass repetitive content like navigation menus and jump directly to the main content of a page. These links are typically hidden from sight but become visible when focused using the keyboard, offering an efficient way to navigate and improve the browsing experience for users with disabilities. Skip links enhance the usability of a website by providing a shortcut to the most relevant content, reducing the need for excessive tabbing or navigation through every page element.

When to Use

  • Direct Access to Main Content: Implement skip links to enable users to quickly jump to the main content of the page, bypassing repetitive navigation links.
  • Enhanced Accessibility: Use skip links as a tool for enhancing website accessibility, particularly for keyboard and screen reader users.

When Not to Use

  • Minimalistic Pages: Avoid skip links on very minimalistic pages or single-page applications where there is little to no repetitive content or navigation.

Behaviors

  • Keyboard Visibility: Skip links should become visible when focused via keyboard navigation, typically appearing at the top of the page.
  • Mouse Interaction: Although primarily for keyboard users, ensure skip links are also accessible and functional with mouse clicks.

Screen Reader Accessibility

  • Clear Labeling: Label skip links clearly, like "Skip to Content" or "Skip to Navigation," so screen reader users understand their purpose.
  • ARIA Landmarks: Use ARIA landmarks to define the destination of the skip link, ensuring that it navigates to the intended section of the page.

Content

  • Concise and Clear: Keep skip link text concise yet descriptive enough to convey its function.
  • Visibility and Accessibility: Ensure skip links are easily accessible and visible when focused, but unobtrusive when not in use.
  • Positioning and Style: Position skip links at the top of the page, and style them to be clearly visible when focused, blending with the site’s design when not active.

On this page

Keywords

  • Skip links: shortcuts enabling users to bypass repetitive content and directly access main page areas.

Breakdown of Components

  • HTML Structure: Skip links are usually implemented as anchor <a> tags placed at the beginning of the page content. They point to the ID of the main content area, allowing users to skip over repetitive elements like navigation menus.
  • Visibility: By default, skip links are hidden off-screen but become visible when focused, typically through keyboard navigation. This ensures they are unobtrusive to the general browsing experience but accessible to those who need them.
  • CSS Styling: The styling of skip links is crucial. They are positioned off-screen using CSS and brought into view when receiving focus. The styling should ensure high contrast for visibility when they appear.
  • Focus Management: Skip links come into focus before any other interactive element on the page. This is achieved by placing them at the top of the HTML document and using the tabindex attribute if necessary.
  • Target Area: The destination for skip links, usually the main content area, should have an ID that matches the skip link's href attribute. This area should also be focusable (often using tabindex="-1") to ensure the focus shifts correctly when the skip link is activated.

On this page

Accordion keyboard navigation function table
Key Function
Tab
  • Pressing the Tab key upon landing on a webpage will usually focus on the skip link first before any other navigable elements.
Enter
  • Once the skip link is focused, pressing the Enter key activates the link, which jumps the focus to the specified main content or section of the page.