Visually Hidden

The visually hidden component hides content from sighted users while keeping it accessible to screen readers, ensuring inclusivity.

Usage

Content to hide

<script>
	import { VisuallyHidden } from 'deskblocks';
</script>

<VisuallyHidden> Content to hide </VisuallyHidden>

The following are examples of various ways the `VisuallyHidden` component can be used to enhance accessibility.

<IconButton>
	<VisuallyHidden>Undo</VisuallyHidden>
	<Icon icon={IconUndo} />
</IconButton>

<Text tag="h1" align="left">
	<VisuallyHidden>
		<Link href="#">Skip to main content</Link>
	</VisuallyHidden>
	Heading 1
</Text>

<NumberInput value={15}>
	<VisuallyHidden>Flag Count</VisuallyHidden>
	<Icon slot="left" icon={IconFlag} />
</NumberInput>