Newskit Logo
Newskit Logo
View Github

Components

Visible, Hidden & ScreenReaderOnly

The collection of these three components can be used to show and hide content at different breakpoints.

Status

Supported

Introduced

v0.2.0

View code

Status

Supported

Introduced

v0.2.0

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:

Focus order

When used 'Hidden’ excludes content from focus order when the screen size matches the applied breakpoint.

WAI-ARIA

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

‘Visible’ has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
Hidden Component Props

‘Hidden’ has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
ScreenReaderOnly Component Props

‘ScreenReaderOnly’ has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

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.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?