#SkipContent

#Description

SkipContent gives users – using their keyboard for navigation – the option to skip over content which contains a large amount of interactive elements.

When is it desired?

Typical when an action button, such as a save button, is placed below the content.

What are interactive elements?

• Text links/Anchors
• Buttons
• Inputs and other form elements
• Basically every focusable element

What is considered as large contents?

• Tables with interactive elements
• Lists with interactive elements
• Articles with interactive elements
• Parts of a form

How does it work?

1. An initially hidden button will reveal when tab key is used.
2. The user can then press this button, or continue tabbing when desired.
3. When the user decides to continue using the tab key, the button will disappear again.
4. When the button gets pressed, the focus will be set to another defined HTML class selector and the browser will scroll to the element.

Good description

The revealing button needs a clear message to let the user easily understand the intention.

#Placement

Ensure you put a header or a section before the SkipContent component. It should describe the content, so the user understands the context.

#Example with a section landmark (section) and header + SkipContent.Return:

<section aria-labelledby="heading-id">
  <H2 id="heading-id">Description of table</H2>
   <SkipContent selector="#my-selector" text="Skip table content" />
   <Table aria-labelledby="heading-id">table content</Table>
</section>
<section id="my-selector" aria-label="Submit">
  <div id="submit-form" />
</section>

#Example using a section landmark (section) and table caption:

<section aria-labelledby="table-id">
  <SkipContent selector=".my-selector">Skip table content</SkipContent>

  <Table id="table-id">
    <caption>Description of table</caption>
  </Table>

  <div className="my-selector">
    <SkipContent.Return
      selector=".my-selector" // same as SkipContent
      text="Back to beginning of table"
    />

    <div id="submit-form" />
  </div>
</section>

#Return button

Optionally, you should consider to include the SkipContent.Return utility as well. It lets the user jump back to where they came from (before the large content). This button is only focusable when the enter action by the skip button was done.

#Screen readers and landmarks

The SkipContent helper component is mainly dedicated to keyboard navigation.

In order to let screen readers skip large parts of content, you need to ensure your HTML has logical landmarks and regions.

#Demos

#SkipContent with section