Visually hidden component hides content visually while retaining readability by screen readers for accessibility.

Open in new tab 
import { VisuallyHidden } from "@kesko/components";

export default () => (
  <p>
    The text below is visually hidden but accessible to screen readers:
    <VisuallyHidden>This text is only visible to assistive technology.</VisuallyHidden>
  </p>
);

Accessibility #

Visually hidden text stays in the accessibility tree while taking no space on screen, so screen readers and other assistive technology read it as if it were visible.

  • Hide text sighted users already get from context. A link that opens in a new tab shows an external link icon; a screen reader user needs the words “opens in a new tab” instead. Add them as visually hidden text inside the link, and keep the visible design unchanged.
  • Do not hide focusable content. A link or button inside the component can still receive keyboard focus, but a sighted keyboard user sees nothing move. Keep interactive elements visible; the component has no focusable variant on purpose.
  • Do not use it to hide content from everyone. It hides text visually only. To remove content for every user, use the hidden attribute or do not render it.
  • Keep it short. Hidden text cannot be skimmed, and it is set to a single line so that screen readers read it as one phrase. Write a few words, not a paragraph.
  • Prefer aria-label on controls. For an icon-only button, set aria-label on the Button instead of nesting hidden text. Hidden text is the better choice when the words should also be translatable, selectable or searchable.
  • Keep status regions in place. With role="status" the component becomes a live region. Render it before the message is needed and change its text, as the Button does with loadingLabel; a live region inserted together with its text often goes unannounced.

See the accessibility guidelines and the A11Y checklist for more details.

Usage #

There are two necessary parts to using the Visually hidden component. The @kesko/components package and the CSS Framework are required. Everything else is optional:

npm install @kesko/components @kesko/css

Once installed, load the CSS Framework in your app’s entry point or root layout:

import "@kesko/css";

Then, you can import the Visually hidden:

import { VisuallyHidden } from "@kesko/components";

Projects without React can get the same styles from @kesko/css by importing the components stylesheet as well:

@import "@kesko/css";
@import "@kesko/css/components";

Resources #