Visually Hidden

Hide content accessibly

yarnnpmbunpnpm

VisuallyHidden hides an item but ensures it remains visible to accessibility readers.

Features

  • Keeps content hidden on screen but visible to assistive tech.

  • Works with "space" prop to not disturb spacing.

Usage

Simply wrap the content you want hidden in VisuallyHidden:

import { Text, VisuallyHidden } from 'tamagui'
export default () => (
<VisuallyHidden>
<Text>Add annotations here</Text>
</VisuallyHidden>
)

When using with the space property, it will avoid double-spacing:

import { H1, Text, VisuallyHidden, YStack } from 'tamagui'
export default () => (
<YStack space>
<H1>Title</H1>
<VisuallyHidden>
<Text>Add annotations here</Text>
</VisuallyHidden>
</YStack>
)