## VisuallyHidden

Use the `<VisuallyHidden />` component to hide content that should remain accessible to assistive technologies, such as screen readers. This is particularly useful in situations where certain visual information or cues (icon or colour e.g.) need to also be conveyed to non-visual users.

In this example a visual user would interpret the red text colour as a "dangerous" message, whilst a non-visual user would hear "Danger" before the message:

```tsx live open
<Text color="critical">
  <VisuallyHidden>Danger: </VisuallyHidden>
  This action cannot be undone.
</Text>
```

## LiveRegion

Use the `<LiveRegion />` component to create ARIA live regions that announce dynamic content changes to screen readers. This is useful for notifications, status updates, and other content that appears or changes dynamically.

**Important:** LiveRegion components should never be unmounted. The LiveRegion container stays in the DOM while only the content appears and disappears. This ensures screen readers can detect and announce changes properly.

### Basic Usage

```tsx live
const [message, setMessage] = useState('');

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle
        label="Toggle message"
        onClick={() => setMessage(message ? '' : 'Timesheet submitted successfully!')}
        size="small"
        toggled={!!message}
      />
    </PlaygroundCard>

    <LiveRegion>{message}</LiveRegion>
  </Flex>
);
```

### When to use LiveRegion

**Use LiveRegion for:**

- Important status updates
- Dynamic content that appears and disappears
- Critical alerts that must be announced immediately

**Don't use LiveRegion for:**

- Static content that doesn't change
- Decorative or informational content

### Roles

The `role` prop determines how screen readers interpret and announce the content:

#### status (default)

Use for general updates, notifications, and informational messages that don't require immediate attention.

```tsx live
<LiveRegion role="status">Timesheet submitted successfully.</LiveRegion>
```

**Best for:** Success messages, progress updates, general notifications

#### alert

Use for important messages that require immediate attention, such as errors or critical warnings.

```tsx live
<LiveRegion role="alert">
  Error: Unable to submit timesheet. Please check your internet connection and try again.
</LiveRegion>
```

**Best for:** Error messages, critical warnings, important alerts

### Politeness Levels

The `aria-live` prop controls how urgently screen readers announce changes:

#### `polite` (default)

Announces changes when the screen reader finishes its current speech. Use for most updates.

```tsx live
<LiveRegion aria-live="polite">Leave request approved by your manager</LiveRegion>
```

**Best for:** General updates, success messages, progress notifications

#### `assertive`

Interrupts current speech to announce changes immediately. Use sparingly for critical information.

```tsx live
<LiveRegion aria-live="assertive">Critical: Your password will expire in 24 hours</LiveRegion>
```

**Best for:** Error messages, critical warnings, important alerts

### Common Combinations

```tsx live
<Flex flexDirection="column" gap="medium">
  {/* General status updates */}
  <LiveRegion role="status" aria-live="polite">
    Performance review submitted successfully
  </LiveRegion>

  {/* Important alerts */}
  <LiveRegion role="alert" aria-live="assertive">
    Error: Unable to save performance review. Please try again.
  </LiveRegion>

  {/* Polite alerts for less critical warnings */}
  <LiveRegion role="alert" aria-live="polite">
    Warning: Your session will expire in 5 minutes
  </LiveRegion>
</Flex>
```

## SkipTo

Use the `<SkipTo />` component to provide the ability for keyboard-only and screen reader users to jump to and over sections of the page. This prevents having to tab over a navigation full of links in order to get to the main content for example.

Include the SkipTo as the first element inside your `<body>`, so as to make it the first focusable element.

Try it in action on this docs site, by refreshing the page and pressing the TAB key once. Then press Enter/Return to see focus jump to the `<main>` element.

```tsx
<SkipTo
  links={[
    { label: 'Skip to main content', href: '#main-content' },
    { label: 'Skip to main nav', href: '#main-nav' },
  ]}
/>
```

Collection of components to help build accessible experiences.

a11y

Accessibility

Responsive layouts

Tokens

Foundations

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources