# @leafygreen-ui/a11y

> leafyGreen UI Kit A11y

Latest version **3.0.5** (published 2025-09-25) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/a11y
pnpm add @leafygreen-ui/a11y
yarn add @leafygreen-ui/a11y
bun add @leafygreen-ui/a11y
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.5 |
| Published | 2025-09-25 |
| First published | 2021-02-22 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 142.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 272 |
| Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/a11y
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/a11y
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/a11y

## Dependencies (3)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.4.0
- [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.1.4
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.0.3

## Recent versions

- 3.0.5 (latest) — 2025-09-25
- 1.4.5 (beta) — 2023-07-26
- 2.0.0-alpha.1 (alpha) — 2023-07-20
- 1.4.5-next.4 (next) — 2023-05-25
- 1.3.2-test.0 (test) — 2022-09-22
- 3.0.4 — 2025-09-10
- 3.0.3 — 2025-09-03
- 3.0.2 — 2025-07-03
- 3.0.1 — 2025-06-30
- 3.0.0 — 2025-05-29
- 2.0.7 — 2025-04-22
- 2.0.6 — 2025-04-08
- 2.0.5 — 2025-04-02
- 2.0.4 — 2025-03-05
- 2.0.3 — 2025-03-03
- … 32 more at https://npm.io/package/@leafygreen-ui/a11y/versions

## README

# A11y

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/a11y.svg)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/a11y
```

### Yarn

```shell
yarn add @leafygreen-ui/a11y
```

### NPM

```shell
npm install @leafygreen-ui/a11y
```

## Example

```js
import { VisuallyHidden } from '@leafygreen-ui/a11y';

const Button = () => {
  return (
    <button>
      <svg role="presentation" aria-hidden />
      <VisuallyHidden>Click me</VisuallyHidden>
    </button>
  );
};
```

## VisuallyHidden

### Properties

| Prop       | Type     | Description                                                             | Default |
| ---------- | -------- | ----------------------------------------------------------------------- | ------- |
| `children` | `string` | Text that is announced to screen readers but is hidden from the screen. |         |

## useAccessibleFormField

Hook that returns two sets of props that accessibly associate a label and its respective input element

### Properties

| Parameter | Type     | Description                          | Default |
| --------- | -------- | ------------------------------------ | ------- |
| `id`      | `string` | id that describes the input element. |         |

## validateAriaLabelProps

Function that validates that either aria-label or aria-labelledby are present within props.

### Properties

| Parameter       | Type                  | Description                                   | Default |
| --------------- | --------------------- | --------------------------------------------- | ------- |
| `props`         | `Record<string, any>` | Object of component properties.               |         |
| `componentName` | `string`              | Name of component with props to be validated. |         |

## prefersReducedMotion

Returns an emotion CSS instance for rendering styles that respect
OS-level preferences for reduced motion.

Use this function to remove scale, size, and positional transitions
for users with that preference set.

### Properties

| Parameter | Type     | Description                                               | Default |
| --------- | -------- | --------------------------------------------------------- | ------- |
| `styles`  | `string` | String of styles to render within preference media query. |         |

---
_Source: https://npm.io/package/@leafygreen-ui/a11y · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._