Examples
Documentation
Overview
Skip to content allows screen reader and keyboard users to bypass navigation rather than tabbing through it.
When using .pf-v5-c-skip-to-content you must provide an href attribute whose value corresponds to the id attribute of the primary content container for your application. In most cases this is the <main> element. For a demo of this, navigate to a page demo and note the use of tabindex="-1", which allows the element to receive focus programmatically.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
href="[id of main container]" | .pf-v5-c-skip-to-content | Sends focus to the primary content container. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-skip-to-content | <a> | initiates the skip to content link. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-skip-to-content | --pf-v5-c-skip-to-content--Top | 1rem | ||
--pf-v5-c-skip-to-content--Top --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-skip-to-content | --pf-v5-c-skip-to-content--ZIndex | 600 | ||
--pf-v5-c-skip-to-content--ZIndex --pf-v5-global--ZIndex--2xl $pf-v5-global--ZIndex--2xl 600 | ||||
| .pf-v5-c-skip-to-content | --pf-v5-c-skip-to-content--focus--Left | 1rem | ||
--pf-v5-c-skip-to-content--focus--Left --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
View source on GitHub