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'

## Code examples

```jsx
<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>

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

ScreenReaderOnly