Code

Usage

import { VisuallyHidden } from "@twilio-labs/match/components";
const Component = () => (
<VisuallyHidden as="p">Visually hidden text</VisuallyHidden>
);

Props

PropTypeDefaultDescription
as?asTags'span''h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'p', 'span', 'th', 'thead', 'tr'

Examples

Instructional Cues

When location or presentation provide context to sighted users, visually hidden content can offer cues for assistive technology. Breadcrumbs are an example of a commonly understood user interface that may be unclear when encountered by a screen reader. The text “You are here:” provides context for assistive technology, but is visually hidden to prevent redundancy.

Because screen readers do not convey any visual information, regions of a page layout must be explicitly defined. In this example, the h2 element refines our page outline which can assist sightless users with navigation.

Composition

Use the Visually Hidden component to provide additional or contextual information to users of assistive technology which may be inferred by sighted users and which you cannot provide with semantic HTML.

Don't Do This

Don’t hide interactive elements.

Do This

Provide additional context to screen readers.

Accessibility

  • Because “sightless” users may have some limited vision, Visually Hidden content should be complimentary
  • In page browser searches will find visually hidden content which may confuse sighted users