VisuallyHidden
VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.
<Button>
<VisuallyHidden>Checkmark</VisuallyHidden>
<CheckIcon />
</Button>
Usage
import { VisuallyHidden } from "@yamada-ui/react"
import { VisuallyHidden } from "@/components/ui"
import { VisuallyHidden } from "@workspaces/ui"
<VisuallyHidden>Hidden content</VisuallyHidden>
It is used to visually hide elements, but it is accessible in screen readers. By default, it renders a span element.