Skip Navigation

The <nys-skipnav> is an accessibility feature that allows keyboard and screen readers to bypass navigation items and jump directly to the main content of a webpage.

This skip link is visible for demo purposes. In our mockup of a real-world scenario further down this page, you'll see it's hidden until focused.

Copy Code
<nys-skipnav id="skipnav-demo" href="#main-content"></nys-skipnav>

Options

The <nys-skipnav> component adds a hidden "Skip to main content" link that appears on Tab, allowing keyboard and screen reader users to jump directly to the main content. By default, href is set to href="#main-content", but you can change it to match the id of your main content container.

IMPORTANT: To work correctly, <nys-skipnav> should be the first focusable element. Ideally right after the opening <body> tag, before any headers or nav elements.

Main Content

Press Tab to focus on the hidden "Skip to main content" link. This feature allows screen reader users and keyboard navigators to jump directly to the main content section, improving accessibility and usability.

Copy Code
<nys-skipnav href="#main-content1"></nys-skipnav>
<nys-unavheader hideTranslate hideSearch></nys-unavheader>
<div id="main-content1" style="padding:10px 30px; background-color: #f0f0f0;">
  <h1>Main Content</h1>
  <p style="display:flex; align-items:top; gap:10px;">
      <nys-icon name="info" size="2xl"></nys-icon>
      Press Tab to focus on the hidden "Skip to main content" link. This feature 
      allows screen reader users and keyboard navigators to jump directly to the 
      main content section, improving accessibility and usability.
  </p>
</div>
<nys-unavfooter></nys-unavfooter>

Usage

When to use this component

  • When your page has a large header or navigation before the main content
  • When you want to improve keyboard and screen reader accessibility

When to consider something else

  • If your layout already starts with the main content and has no navigation to skip

Do

  • Use on pages with navigation or repeated elements before the main content
  • Make sure the href matches the id of your main content container

Don't

  • Don’t use if there’s no content to skip over
  • Don’t forget to set the correct href or matching id

Accessibility

The <nys-skipnav> component includes the following accessibility-focused features:

  • First focusable element on page load for easy keyboard navigation
  • Visible only on focus, with a clear focus indicator that meets WCAG 2.2
  • Pressing Enter moves focus to the main content section
  • Screen readers correctly announce the link and shift focus on activation

Properties

Property Type
href String (URL)
id String

CSS Variables


Events

Suggest a New Component

Do you have an idea for a new NYSDS web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.