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