Skip to content
Telescope

Visually HiddenNew

A wrapper component used to visually hide content that is necessary to provide appropriate context to users utilising assistive technology.
You can't see me

Features

  • Visually hides content while preserving it for assistive technology.

When to use

Use to visually hide content that provides clarifying information to vision impaired users without adding redundancy to the visual design. This is useful for improving accessibility, when you cannot do so via semantic HTML or when the content's meaning is only communicated visually and not to assistive technology.

Where possible, VisuallyHidden should be used instead of aria-label.

Basic usage

First, import the component.

import {VisuallyHidden} from '@pleo-io/telescope'

Then use it, like so:

Where possible, VisuallyHidden should wrap the whole element.

API reference

The component accepts the following props.

PropTypeDefault
as
enum
'span'
children
any

When wrapping elements that are not phrasing content (e.g. h2, p) use as='div'.

Examples

Extra button context

Can be used to add extra context to buttons that may be obvious from surrounding context to visual users but not to non-sighted users. Show code or check the HTML to see the visually hidden content.

Hidden labels

Can be used to add labels to components where the purpose is obvious from the surrounding context to visual users but not to non-sighted users. For example, to select checkboxes on table rows. Show code or check the HTML to see the visually hidden content.

Best practices

Do
Use to hide static content.
Don't
Use for hiding interactive content.
Do
Use to hide content visually, but keep it accessible to assistive technology users.
Don't
Use to hide content both visually and from assistive technology users.

Accessibility

What about aria-label?

You may be wondering when you should use an aria-label, as this attribute also provides assistive technology users with content that is not visible. We recommend using Visually Hidden, as aria-label has some downsides:

  • Does not auto-translate well [1]
  • Does not work on every type of element [2]
  • Overrides the element’s content [3]
  • Isn’t announced consistently by screen readers [4]

Hiding content

The Visually Hidden component isn’t always the right option for hiding content. Here are some guidelines for choosing the right approach (source):

  • Use Visually Hidden when you need to hide something visually, but keep it accessible to assistive technology users
  • Use aria-hidden when you need to hide something from assistive technology users, but keep it visible (e.g. visual content that is merely decorative)
  • Use display: none or the hidden HTML attribute when you need to hide something both visually and from assistive technology users