Skip to content
- In research
Alpha components have not been thoroughly tested by developers. Learn more about component maturity.
The skip to content component is an accessibility feature required on every page. It allows people to jump to the main content below the statewide header and the navigation.
Skip to content is used by people who tab through navigation or use screen readers. It does not appear for other users.
When and how to use it
Always use skip to content.
How not to use it
Do not modify skip to content when you install it.
Demo and sample markup
To preview this accessibility feature, try the following.
- Click on the above "Demo and sample markup" heading.
- Press the tab button on your keyboard.
- The "Skip to content" link should appear at the top of this preview.
- Click it.
The page will scroll to this paragraph.
<!-- Sample markup begins here. --> <div id="skip-to-content"> <a href="#body-content-demo">Skip to content</a> </div> <!-- Sample markup ends here. --> <!-- The following mark-up is strictly for demonstration purposes. --> <p>To preview this accessibility feature, try the following.</p> <ol> <li>Click on the above "Demo and sample markup" heading.</li> <li>Press the tab button on your keyboard.</li> <li>The "Skip to content" link should appear at the top of this preview.</li> <li>Click it.</li> </ol> <div id="body-content-demo"> <p>The page will scroll to this paragraph.</p> </div>
- Include SCSS in your compiler.
- Add the markup from the component's
template.htmlfile just after the opening body tag of your HTML.
id="body-content"to the HTML tag at the top of the main content of the page.
We recommend using a build system and bundling your CSS for faster performance. If you do not use a build system, you can include the code from our CDN with a link tag.
<link rel="stylesheet" href="https://cdn.designsystem.webstandards.ca.gov/components/ds-skip-to-content/v2.0.0/dist/index.css">
Component-specific accessibility review
- Make sure the skip to the content link is the first item to appear on focus when you tab through a webpage and has solid, 2px outline that uses
- Make sure that skip to content id reference
href=”#body-content”is matching actual
idattribute in main content div.
Standard accessibility review
As a component in Alpha status, this component must pass the following accessibility reviews every time a new version is published:
- Tested with the axe accessibility tool and passes all automated WCAG Level AA checks
- Reviewed with the VoiceOver screen reader on desktop
- Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only
- Reviewed component layout on a variety of screen sizes
This component uses the following data attributes. We provide this information to help with integrating the component into backend publishing systems or identifying content that may require translation.
|Name||Attribute name||Data type||Field type||Selector||Default value|
|Label||skip-to-content||string||Plain text||#skip-to-content a#body-content||Skip to content|