Layout

Visually Hidden

Hide content visually and keep it available to assistive technology.

VisuallyHidden hides content visually while keeping it available to assistive technology. Use it for text labels behind icon-only controls, extra context for links, or status messages in live regions. The content can still be referenced by aria-labelledby or aria-describedby.

It renders a span by default.

Visually Hidden: Basic

Open in playground

Rated 4 out of 5 stars

import { VisuallyHidden } from '@luke-ui/react/visually-hidden';

export default () => {
	return (
		<p>
			<span aria-hidden="true">★★★★☆</span>
			<VisuallyHidden> Rated 4 out of 5 stars</VisuallyHidden>
		</p>
	);
};

Visually Hidden: Basic

Loading Visually Hidden: Basic example

Render a different element

Pass elementType to choose a supported semantic element without changing the hiding treatment.

<VisuallyHidden elementType="h2">Search results</VisuallyHidden>

Own the rendered element

Use renderRoot when the callback must own the element and its DOM attributes. The callback receives resolved children, className, style, focus-within handlers, and a callback ref as its first argument. Its second argument is an empty state object. Put element-specific attributes on the element the callback returns.

isFocusable removes the visually-hidden treatment while focus is within the root or a descendant. It does not make anything focusable. Pair it with an element that is already focusable, such as a skip link.

Do not combine renderRoot with elementType.

Visually Hidden: Skip link

Open in playground

Focus the button, then press Tab to reveal the skip link.

Main content

import { Button } from '@luke-ui/react/button';
import { Link } from '@luke-ui/react/link';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';
import { VisuallyHidden } from '@luke-ui/react/visually-hidden';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Stack alignItems="flex-start" gap="space.12">
			<Text color="secondary" elementType="p" typography="caption">
				Focus the button, then press Tab to reveal the skip link.
			</Text>
			<Button>Example button</Button>
			<VisuallyHidden
				isFocusable
				renderRoot={(domProps) => (
					<Link {...domProps} href="#example-main">
						Skip to main content
					</Link>
				)}
			/>
			<ExampleItem elementType="main" id="example-main" inlineSize="100%" tabIndex={-1}>
				Main content
			</ExampleItem>
		</Stack>
	);
};

Visually Hidden: Skip link

Loading Visually Hidden: Skip link example

Static escape hatch

Use visuallyHiddenStyle from @luke-ui/react/visually-hidden when application-owned markup must stay visually hidden without the component. It covers the static case only. Prefer <VisuallyHidden isFocusable> when hidden content needs to reveal on focus.

import { visuallyHiddenStyle } from '@luke-ui/react/visually-hidden';

<label>
	<input type="checkbox" />
	<span style={visuallyHiddenStyle}>Accept terms</span>
</label>;

API

VisuallyHiddenProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
isFocusable	boolean	`false`
When true, remove the visually-hidden treatment while focus is within the root or a descendant. Does not make anything focusable.