Skip to content
Development stage
- 1
- In research
- 2
- Alpha
- 3
- Beta
- 4
- Production
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.
HTML
<!-- 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>
Specs
Property | Value |
---|---|
Machine name | ds-skip-to-content |
JavaScript | no |
SCSS | ./src/index.scss |
Project installation
The instructions assume familiarity with npm package management tool and Sass.
- Include SCSS in your compiler.
- Add the markup from the component's
template.html
file just after the opening body tag of your HTML. - Add
id="body-content"
to the HTML tag at the top of the main content of the page.
CDN installation
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.
HTML
<link rel="stylesheet" href="https://cdn.designsystem.webstandards.ca.gov/components/ds-skip-to-content/v2.0.1/dist/index.css">
Accessibility
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
--accent2-500
variable. - Make sure that skip to content id reference
href=”#body-content”
is matching actualid
attribute 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
Progressive enhancement
This is an HTML- and CSS-only component. JavaScript is not required. It uses CSS variables to inherit design token values. Token definitions are not required because these style rules provide fallback values.
Content model
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 |