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';// orimport { ScreenReaderOnly } from '@contentful/f36-core';
Examples
Basic
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 contentlink.</p><p>The navigation has a ScreenReaderOnly wrapped heading which it islabelled by, to help a screenreader user, to identify which kind ofnavigation they are on.</p></div></Stack>);}
Props (API reference)
Open in StorybookName | Type | Default |
---|---|---|
as | HTML Tag or React Component (e.g. div, span, etc) | div |
children | ReactNode | |
className | string CSS class to be appended to the root element | |
testId | string A [data-test-id] attribute used for testing purposes | cf-ui-ScreenReaderOnly |
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