ScreenReaderOnly

How to use ScreenReaderOnly

• The ScreenReaderOnly wrapper will apply style to the element which moves it out of the viewport but not out of your pages context.
• Make sure child elements don't have overwriting positioning

Import

import { ScreenReaderOnly } from '@contentful/f36-components';
// or
import { ScreenReaderOnly } from '@contentful/f36-core';

Examples

Basic

Skip to main content
Main Content
When using a screenreader you will get offered a skip to main content link.
The navigation has a ScreenReaderOnly wrapped heading which it is labelled by, to help a screenreader user, to identify which kind of navigation they are on.
Hide code
function ScreenReaderOnlyExample() {
  return (
    <Stack flexDirection="column" spacing="spacingM">
      <ScreenReaderOnly>
        <TextLink href="#main-content">Skip to main content</TextLink>
      </ScreenReaderOnly>
      <nav aria-labelledby="main-navigation">
        <Stack flexDirection="row" spacing="spacingS">
          <ScreenReaderOnly>
            <SectionHeading as="h2" id="main-navigation">
              Main Navigation
            </SectionHeading>
          </ScreenReaderOnly>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
        </Stack>
      </nav>
      <div id="main-content">
        <SectionHeading as="h2">Main Content</SectionHeading>
        <p>
          When using a screenreader you will get offered a skip to main content
          link.
        </p>
        <p>
          The navigation has a ScreenReaderOnly wrapped heading which it is
          labelled by, to help a screenreader user, to identify which kind of
          navigation they are on.
        </p>
      </div>
    </Stack>
  );
}
function ScreenReaderOnlyExample() {
  return (
    <Stack flexDirection="column" spacing="spacingM">
      <ScreenReaderOnly>
        <TextLink href="#main-content">Skip to main content</TextLink>
      </ScreenReaderOnly>
      <nav aria-labelledby="main-navigation">
        <Stack flexDirection="row" spacing="spacingS">
          <ScreenReaderOnly>
            <SectionHeading as="h2" id="main-navigation">
              Main Navigation
            </SectionHeading>
          </ScreenReaderOnly>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
          <TextLink href="#">Menu Element</TextLink>
        </Stack>
      </nav>
      <div id="main-content">
        <SectionHeading as="h2">Main Content</SectionHeading>
        <p>
          When using a screenreader you will get offered a skip to main content
          link.
        </p>
        <p>
          The navigation has a ScreenReaderOnly wrapped heading which it is
          labelled by, to help a screenreader user, to identify which kind of
          navigation they are on.
        </p>
      </div>
    </Stack>
  );
}
Open in Playground

Content guidelines

• For links that help navigating views with many different feature areas e.g. header, footer and sidebars next to the main contnt
• Additional descriptive content like labelledby headlines for navigations
• Information dedicated to screen reader users e.g. specific keyboard commands to skip to the next unread blog post