Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Accessibility Types
Accessibility data types allow users to customize ARIA attributes and semantic HTML for better screen reader support and keyboard navigation.

## A11y

The `a11y` data type lets you configure which accessibility attributes are available for users to customize in the editor.

> **Note:** Specify these additional configurations under an `a11y` field in your [data item](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview#data-item-fields).

<PropertyList bordered>
  <Property
    name="attributes"
    type="A11yAttributes[]"
    description="List of accessibility attributes users can configure in the editor. If omitted, all attributes are available. Specify only relevant ones for better UX."
  >
    <ExpandableSection name="A11yAttributes values">
      For detailed information on possible values for each ARIA attribute, see the [MDN ARIA documentation](fallback::https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes).

      <PropertyList>
        <Property name="tabIndex" description="Controls keyboard focus order." />
        <Property name="ariaLevel" description="Indicates hierarchical level." />
        <Property name="ariaExpanded" description="Indicates if an expandable element is currently expanded or collapsed." />
        <Property name="ariaDisabled" description="Indicates the element is disabled but still visible." />
        <Property name="ariaAtomic" description="Indicates if screen readers should present the entire changed region or only parts." />
        <Property name="ariaHidden" description="Removes element from accessibility tree." />
        <Property name="ariaBusy" description="Indicates an element is being modified and screen readers should wait." />
        <Property name="multiline" description="Adds multiline instructions to aria-label." />
        <Property name="ariaAutocomplete" description="Indicates whether to add Autocomplete instructions to aria-label." />
        <Property name="ariaPressed" description="Indicates toggle button state." />
        <Property name="ariaHaspopup" description="Indicates element triggers a popup." />
        <Property name="ariaRelevant" description="Defines what changes should be announced in live regions." />
        <Property name="role" description="Defines the element's purpose." />
        <Property name="ariaLive" description="Announces dynamic content changes." />
        <Property name="ariaCurrent" description="Indicates the current item in a set." />
        <Property name="ariaLabel" description="Provides accessible label for screen readers." />
        <Property name="ariaRoledescription" description="Provides human-readable description of role." />
        <Property name="ariaDescribedby" description="References elements that describe this element." />
        <Property name="ariaLabelledby" description="References elements that label this element." />
        <Property name="ariaErrormessage" description="References element containing error message." />
        <Property name="ariaOwns" description="Defines parent-child relationships not clear from DOM." />
        <Property name="ariaControls" description="References elements controlled by this element." />
        <Property name="tag" description="The HTML tag to use for the element." />
        <Property name="ariaMultiline" description="Indicates textarea or textbox accepts multiple lines." />
        <Property name="ariaInvalid" description="Indicates validation state." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

## Example

Accessibility settings for a close button:

In the manifest:

```typescript
editorElement: {
  data: {
    accessibility: {
      dataType: "a11y",
      displayName: "Accessibility Settings",
      defaultValue: {
        ariaLabel: "Close dialog",
        role: "button",
        tabIndex: 0,
        ariaExpanded: false,
      },
      a11y: {
        attributes: ["ariaLabel", "ariaDescribedby", "role", "tabIndex"],
      },
    },
  },
}
```

In the component:

```tsx
import type { A11y } from '@wix/editor-react-types';

interface CloseButtonProps {
  accessibility?: A11y;
}

const CloseButton = ({ accessibility }: CloseButtonProps) => (
  <button
    aria-label={accessibility?.ariaLabel}
    role={accessibility?.role}
    tabIndex={accessibility?.tabIndex}
  >
    ×
  </button>
);
```

## See also

- [Data Overview](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview)
- [Complex Data Types](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types)