wwwwwwwwwwwwwwwwwww

Visually Hidden

Hide content accessibly

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

)

Previous

Unspaced

Edit this page on GitHub.