VisuallyHidden

VisuallyHidden is used to visually hide content while leaving it available for screen readers.

There are some common scenarios where you might need the VisuallyHidden primitive:

To provide an accessible alternative to icon only buttons
To provide additional context for screen reader users regarding interface interactions.
Combined with ARIA attributes such as aria-live, to announce context when a change in the interface occurs.

Since the VisuallyHidden element is hidden using the CSS clip property, and not display: none, the element is still available to assistive technologies.

Note

It's a good practice to consider if your VisuallyHidden content would be better served as visible for all; that way everyone benefits from the additional context.

Usage

Import the VisuallyHidden primitive.

import { Button, VisuallyHidden, Icon } from '@aws-amplify/ui-react';

const IconDone = () => {
  return (
    <Icon
      pathData="M9 16.2001L4.8 12.0001L3.4 13.4001L9 19.0001L21 7.0001L19.6 5.6001L9 16.2001Z"
      ariaLabel=""
    />
  );
};

export const DefaultVisuallyHiddenExample = () => {
  return (
    <Button variation="primary">
      <VisuallyHidden>Mark as complete</VisuallyHidden>
      <IconDone />
    </Button>
  );
};

CSS Styling

Target classes

Class	Description
`amplify-visually-hidden`	Top level element that wraps the VisuallyHidden primitive

No variables available for this component