# @commercetools-uikit/accessible-hidden
> Component to hide content offscreen while keeping it accessible. This is also helpful for testing purposes.
Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install @commercetools-uikit/accessible-hidden
pnpm add @commercetools-uikit/accessible-hidden
yarn add @commercetools-uikit/accessible-hidden
bun add @commercetools-uikit/accessible-hidden
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 20.6.7 |
| Published | 2026-07-17 |
| First published | 2020-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 154 |
| Maintainers | emmenko, commercetools-admin, tdeekens |
| Keywords | javascript, typescript, design-system, react, uikit |
## Links
- npm: https://www.npmjs.com/package/@commercetools-uikit/accessible-hidden
- Repository: https://github.com/commercetools/ui-kit
- Homepage: https://uikit.commercetools.com
- Issues: https://github.com/commercetools/ui-kit/issues
- npm.io page: https://npm.io/package/@commercetools-uikit/accessible-hidden
## Dependencies (3)
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 20.6.7 (latest) — 2026-07-17
- 0.0.0-canary-20260831181816 (canary) — 2026-08-31
- 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18
- 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13
- 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19
- 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28
- 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27
- 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09
- 0.0.0-main-20250115172531 (main) — 2025-01-15
- 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13
- 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12
- 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11
- 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10
- 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04
- 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24
- … 931 more at https://npm.io/package/@commercetools-uikit/accessible-hidden/versions
## README
# AccessibleHidden
## Description
This component is used to hide content offscreen, removing it from sighted users, while keeping it still accessible to screen readers and other assistive technology.
It can also be useful for testing with tools like react-testing-library and cypress, which requires querying elements through content which might not be intended to be visible on screen, such as querying for a input by its label while the label is visually hidden.
It's the logical opposite of [the `aria-hidden` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute).
## Installation
```
pnpm add @commercetools-uikit/accessible-hidden
```
```
npm --save install @commercetools-uikit/accessible-hidden
```
Additionally install the peer dependencies (if not present)
```
pnpm add react
```
```
npm --save install react
```
## Usage
```jsx
import AccessibleHidden from '@commercetools-uikit/accessible-hidden';
/**
* In this example, we're showing additional text specifically to be read only
* by screen readers, to make it more contextualized and easier to understand
* for non-sighted users (as well "translating" the numeronym which might confuse
* automatic screen-readers).
*/
const Example = () => (
An Article on A11y
A summary of the article
);
export default Example;
```
## Properties
| Props | Type | Required | Default | Description |
| ---------- | ----------- | :------: | ------- | ----------- |
| `children` | `ReactNode` | ✅ | | |
## Using the component for a11y testing
This is an example for when you would want to render an input without visually displaying a label. You still would want a label to be present so it can be used when testing with RTL as well as supporting a11y.
```js
const rendered = render(
<>
);
expect(rendered.getByLabelText('Enter your Maiden Name')).toBeInTheDocument();
// ✓ True
```
It is a common requirement to show inputs inside tables. In such a case a sighted user should be able to understand the context of the input through the column header. A label element taking space inside the cell is undesirable.
## References:
- [The A11Y Project - How-to: Hide Content](https://a11yproject.com/posts/how-to-hide-content/)
---
_Source: https://npm.io/package/@commercetools-uikit/accessible-hidden · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._