Skip Links are the first focusable elements on a page that provide shortcuts to content further down the page for keyboard and other assistive tech users. Cigna’s standard is to provide a shortcut to the main navigation, the main content area and the page footer.

Skip Links are activated using the "tab" key, and they're the first elements within the Tab Order.

Implementation

  • Skip Links must be the first focusable elements on the page.
  • The links are hidden by default and hidden again as the user tabs to other focusable elements on the page.
    • If the user performs the "shift + tab" keyboard combination to navigate back up through the page, then the skip links will reveal based on their natural tab order.
  • Show the first Skip Link when the user enters the page using the tab key.
  • These are the Skip Links to provide in order:
    • If the page contains the main (global) navigation:
      • Skip to main navigation
      • Skip to main content
      • Skip to footer
    • For pages without the main (global) navigation:
      • Skip to main content
      • Skip to footer
  • Apply focus to the target area when the Skip Link is engaged:
    • "Skip to main navigation" puts the focus on the first link in the main global navigation.
    • "Skip to main content" puts the focus on the page’s main heading (h1).
    • "Skip to footer" puts the focus on the first heading (h2) in the page footer.
  • If a modal automatically opens on page load (like MFA) and gets dismissed, the tab order would behave as if the page just loaded, so the first item in the tab order upon dismissal of the modal would be the "skip to main navigation" link.
  • Skip Links might cover the Cigna logo depending on browser width, but this is intended behavior since the link is only temporarily shown.
  • The visual style of the links should adhere to the primary small button standard.