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
- 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?
- An initially hidden button will reveal when
tabkey is used.
- The user can then press this button, or continue tabbing when desired.
- When the user decides to continue using the
tabkey, the button will disappear again.
- When the button gets pressed, the focus will be set to another defined HTML class selector and the browser will scroll to the element.
The revealing button needs a clear message to let the user easily understand the intention.
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 +
<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>
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
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.
SkipContent with section
This table has many focusable elements
|Column A||Column B||Column C||Column D|
|Row 1||Row 1|
|Row 2||Row 2|
|Row 3||Row 3|
|Row 4||Row 4|
|Row 5||Row 5|
|Row 6||Row 6|
|Row 7||Row 7|
|Row 8||Row 8|
|Row 9||Row 9|
|Row 10||Row 10|