BRAID
Braid Logo
 

HiddenVisually

The next sentence is only available to screen readers. Hello world.
Open in Playroom

Alternatives

  • Hidden — For hiding content.

Accessibility

Provides content to assistive technologies while hiding it from the screen.

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<HiddenVisually
  data={{ testid: 'hidden-visually-1' }}
  // => data-testid="hidden-visually-1"
>
  ...
</HiddenVisually>
Open in Playroom