---
title: HiddenForAccessibility
description: >-
  HiddenForAccessibility removes all of its children from the accessibility
  tree.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/hiddenforaccessibility
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/hiddenforaccessibility.md
---

# HiddenForAccessibility

HiddenForAccessibility removes all of its children from the accessibility tree. This can be used to improve the experience for assistive technology users by hiding purely decorative content, duplicated content and offscreen or collapsed content.

##### JS

```ts
import {extend, HiddenForAccessibility} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const hiddenForA11y = root.createComponent(
    HiddenForAccessibility,
    undefined,
    'Purely decorative content',
  );

  root.appendChild(hiddenForA11y);
});
```

##### React

```tsx
import {
  render,
  HiddenForAccessibility,
} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <HiddenForAccessibility>Purely decorative content</HiddenForAccessibility>
  );
}
```

***