Visually hidden

Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.

Always provide a heading for a major page section such as a card. In rare cases the heading is visually redundant and the meaning is conveyed by context. Rather than omit the heading, wrap the heading in the visually hidden component.

import {
  Card,
  VisuallyHidden,
  Heading,
  FormLayout,
  TextField,
} from '@shopify/polaris';
import React from 'react';

function VisuallyHiddenExample() {
  return (
    <Card sectioned>
      <VisuallyHidden>
        <Heading>Title and description</Heading>
      </VisuallyHidden>
      <FormLayout>
        <TextField
          label="Title"
          value="Artisanal Wooden Spoon"
          onChange={() => {}}
          autoComplete="off"
        />
        <TextField
          label="Description"
          multiline
          onChange={() => {}}
          autoComplete="off"
        />
      </FormLayout>
    </Card>
  );
}

Whenever one or more table columns has no need for a visible header, hide the header content rather than omitting it. Note that due to browser quirks the visually hidden component must go inside each <th>.

import {VisuallyHidden} from '@shopify/polaris';
import React from 'react';

function VisuallyHiddenExample() {
  return (
    <table>
      <thead>
        <tr>
          <th scope="col">
            <VisuallyHidden>Line item</VisuallyHidden>
          </th>
          <th scope="col">
            <VisuallyHidden>Value</VisuallyHidden>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Subtotal</th>
          <td>$184.13</td>
        </tr>
        <tr>
          <th scope="row">Tax</th>
          <td>$0.00</td>
        </tr>
        <tr>
          <th scope="row">Total</th>
          <td>$184.13</td>
        </tr>
      </tbody>
    </table>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface VisuallyHiddenProps

children?React.ReactNode: The content to be hidden visually.

Best practices

Visually hidden should:

Not be used if semantic markup can make content understandable to people using assistive technology
Be used to provide extra context when semantic markup isn’t enough
Be used on any content that is normally present but is being omitted
Make sense in context when used with a screen reader

Accessibility

The visually hidden component styles text so that it’s not visible, but it is available to assistive technologies like screen readers and other text to speech programs.

The component shouldn’t be used to hide interactive content.