> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Accessibility Types

## Article: Accessibility Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/accessibility-types.md

## Article Content:

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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#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](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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)
- [Complex Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md)