Visually Hidden

Examples

Basic

According to The A11Y Project, “there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field’s label as a common magnifying glass icon is used in its stead.”

Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboard user won’t be able to determine where the focus indicator is without it.

<div style="min-height: 1.875rem;">
  <ods-visually-hidden>
    <a href="#">Skip to main content</a>
  </ods-visually-hidden>
</div>

import { OdsVisuallyHidden } from '@ods/components/react.visually-hidden';

const Example = () => {
  return (
    <div>
      <OdsVisuallyHidden>
        <a href="#">Skip to main content</a>
      </OdsVisuallyHidden>
    </div>
  )
}

export default Example;

Links That Open in New Windows

In this example, the link will open a new window. Screen readers will announce “opens in a new window” even though the text content isn’t visible to sighted users.

<a href="https://example.com/" target="_blank">
  Visit External Page
  <ods-icon name="box-arrow-up-right"></ods-icon>
  <ods-visually-hidden>opens in a new window</ods-visually-hidden>
</a>

import { OdsVisuallyHidden } from '@ods/components/react.visually-hidden';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <div>
      <a href="https://example.com/" target="_blank">
        Visit External Page
        <OdsIcon name="arrow-up-right"></OdsIcon>
        <OdsVisuallyHidden>opens in a new window</OdsVisuallyHidden>
      </a>
    </div>
  )
}

export default Example;

Content Conveyed By Context

Adding a label may seem redundant at times, but they’re very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.

<ods-card style="width: 100%; max-width: 360px;">
  <header>
    <ods-visually-hidden>Personal Info</ods-visually-hidden>
  </header>
  <ods-input label="Name" style="margin-bottom: .5rem;"></ods-input>
  <ods-input label="Email" type="email"></ods-input>
</ods-card>

import { OdsVisuallyHidden } from '@ods/components/react.visually-hidden';
import { OdsInput } from '@ods/components/react.input';
import { OdsCard } from '@ods/components/react.card';

const css = `
  /* Only used for documentation */
  .card-example {
    width: 100%;
    max-width: 360px;
  }

  .input-example {
    margin-bottom: .5rem;
  }
`;

const Example = () => {
  return (
    <div>
      <OdsCard className="card-example">
        <header>
          <OdsVisuallyHidden>Personal Info</OdsVisuallyHidden>
        </header>
        <OdsInput label="Name" className="input-example"></OdsInput>
        <OdsInput label="Email" type="email"></OdsInput>
      </OdsCard>

      <style>{css}</style>
    </div>
  )
}

export default Example;

Importing

import '@ods/components/web.visually-hidden';

import { OdsVisuallyHidden } from '@ods/components/react.visually-hidden';

import { OdsVisuallyHidden } from '@ods/components/react.visually-hidden';