This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

ScreenReaderOnly

This is a helper component to add content and components which is only visible for screen readers. For example skip links, structural elements or additional information.

Table of contents

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 recommendations

  • 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

Props

ScreenReaderOnly

NameRequiredDefaultTypeDescription
asdivHTML Tag or React Component, e.g. div, span, etc.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-ScreenReaderOnlystringA [data-test-id] attribute used for testing purposes