Visually Hidden

Hide content accessibly

VisuallyHidden removes content from the visual layout while keeping it available to assistive technology.

Features

Visually hidden content available to assistive technology
Spacing preserved with the space prop

Installation

VisuallyHidden is already installed in tamagui, or you can install it independently:

yarnnpmbunpnpm
yarn add @tamagui/visually-hidden

Usage

Simply wrap the content you want hidden in VisuallyHidden:

import { VisuallyHidden, html } from 'tamagui'

export default () => (
  <VisuallyHidden>
    <html.span>Add annotations here</html.span>
  </VisuallyHidden>
)

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

import { H1, VisuallyHidden, YStack, html } from 'tamagui'

export default () => (
  <YStack space>
    <H1>Title</H1>

    <VisuallyHidden>
      <html.span>Add annotations here</html.span>
    </VisuallyHidden>
  </YStack>
)

Edit this page on GitHub.