A11y

Accessibility attributes the Wix user configures for a component, mapping to ARIA attributes and related HTML. Use it for a field that carries a component's role, labels, states, and the tag it renders as. At runtime it's an object whose fields you spread onto the rendered element. Every field is optional, so read only the ones your component applies.

Component

In your component code, import the A11y type from @wix/editor-react-types:

Copy

An A11y object has the following properties:

ariaAtomicboolean | 'false' | 'true'

The aria-atomic attribute. Indicates whether assistive technologies should present the entire region as a whole.

ariaAutocomplete'none' | 'inline' | 'list' | 'both'

The aria-autocomplete attribute. Indicates the type of autocomplete behavior for an input.

ariaBusyboolean | 'false' | 'true'

The aria-busy attribute. Indicates the component is being modified and assistive technologies should wait.

ariaControlsstring

The aria-controls attribute. Identifies the element whose contents or presence are controlled by this component.

ariaCurrentboolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time'

The aria-current attribute. Indicates the component that represents the current item within a container or set.

ariaDescribedbystring

The aria-describedby attribute. Identifies the element that describes this component.

ariaDisabledboolean | 'false' | 'true'

The aria-disabled attribute. Indicates that the component is perceivable but disabled.

ariaErrormessagestring

The aria-errormessage attribute. Identifies the element that provides an error message for this component.

ariaExpandedboolean | 'false' | 'true'

The aria-expanded attribute. Indicates whether a collapsible component is expanded or collapsed.

ariaHaspopupboolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'

The aria-haspopup attribute. Indicates the availability and type of an interactive popup component.

ariaHiddenboolean | 'false' | 'true'

The aria-hidden attribute. Hides the component from assistive technologies.

ariaInvalidboolean | 'false' | 'true' | 'grammar' | 'spelling'

The aria-invalid attribute. Indicates the entered value does not conform to the expected format.

ariaLabelstring

The aria-label attribute. Defines a string value that labels the component.

ariaLabelledbystring

The aria-labelledby attribute. Identifies the element that labels this component.

ariaLevelnumber

The aria-level attribute. Defines the hierarchical level of a component within a structure.

ariaLive'off' | 'assertive' | 'polite'

The aria-live attribute. Indicates that the component will be updated and describes the types of updates.

ariaMultilineboolean | 'false' | 'true'

The aria-multiline attribute. Indicates whether a text box accepts multiple lines of input.

ariaOwnsstring

The aria-owns attribute. Identifies a component to define a visual, functional, or contextual parent/child relationship.

ariaPressedboolean | 'false' | 'mixed' | 'true'

The aria-pressed attribute. Indicates the current pressed state of a toggle button.

ariaRelevant'additions' | 'additions text' | 'all' | 'removals' | 'text'

The aria-relevant attribute. Indicates what notifications the user agent triggers when the accessibility tree is modified.

ariaRoledescriptionstring

The aria-roledescription attribute. Defines a human-readable description for the role of the component.

multilineboolean

Whether the component supports multiline input.

rolestring

The role attribute. Defines the semantic role of the component.

tabIndexnumber

The tabindex attribute. Controls the component's position in keyboard focus order.

tagstring

The HTML tag to render the component as, such as 'h1' or 'button'.

Usage

Your code either consumes a value of type A11y or produces one:

Manifest

In your manifest, declare the field with the a11y dataType:

Copy

Declaration

Declare an a11y field in one of these ways, depending on where the value comes from:

Last updated: 2 November 2026

Did this help?