Skip to content

To implement an accessible PatternFly skip to content:

• Render the skip to content as the first focusable element on the page.
• Ensure that the skip to content href is properly linked to the main content of the page. You may have to add context to the href if there are any query parameters in the URL.

At a minimum, a skip to content should meet the following criteria:

• The skip to content is the first focusable element on the page.When content is repeated on several pages - such as actions in a header or navigation links in a sidebar - users navigating via keyboard or other assistive technologies would need to navigate through that content every time. Placing a skip to content as the first focusable element helps users avoid this repeated content.
• The skip to content's href is linked to the main content of the page.
• Standard keyboard navigation can be used to navigate between the skip to content and other focusable elements.Depending on where focus is on the page, Tab navigates to the skip to content or the next focusable element, and Shift + Tab navigates to the previous focusable element or the skip to content. Since the skip to content should be the first focusable element on a page, the previous focusable element may typically be an item in the browser toolbar.
• Standard keyboard interaction can be used to activate the skip to content.Enter is typically the only key that activates links.

The following React props have been provided for more fine-tuned control over accessibility.

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.