Components
Visibility is comprised of three components.
Visible
Content will be visible if the screen size matches the applied breakpoint.
Hidden
Content will be hidden if the screen size matches the applied breakpoint.
ScreenReaderOnly
Wraps an element making sure that it is not visible to the user, but still readable by a screen reader.
Code Example
Note
You can toggle on the breakpoint indicator at the top of the screen with the ~ key (above the Tab key).
Screen Reader Only
The 'ScreenReaderOnly' component wraps an element as the child of the component, making sure that it is not visible to the user but still readable by a screen reader, using the id to reference it.
Usage
The following guidance describes how and when to appropriately use Visible, Hidden, and ScreenReaderOnly.
Do
Use ‘Visible’ or ‘Hidden’ where SEO is a consideration, to avoid layout shift.
Don’t
Avoid hiding elements that are required by users across breakpoints. Have equivalent functionality for different breakpoints, eg a Drawer for top-level navigation items on xs or sm breakpoints where space is limited.
Accessibility Considerations
Visibility has the following accessibility considerations:
When used 'Hidden’ excludes content from focus order when the screen size matches the applied breakpoint.
When an id is provided, it can be used to reference this element, for example from an aria-describedby attribute.
Note
Be careful to test at all breakpoints when using ‘Hidden’ or ‘Visible’.
SEO Considerations
Use ‘Visible’ or ‘Hidden’ where SEO is a consideration, to avoid layout shift.
API
'Visible', 'Hidden' and 'ScreenReaderOnly' have a range of props that can be used to define an appropriate experience for different use cases.
‘Visible’ has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
‘Hidden’ has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
‘ScreenReaderOnly’ has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
Compliance
All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.
| Feature | Description | Status |
|---|