Accessibility: Adding ARIA Attributes to Custom Web Applications
ARIA attributes provide additional information about the semantics of elements to assistive technologies like screen readers. You may want to add ARIA attributes to any custom elements or applications on your site.ARIA attributes are important, as they define ways custom elements and applications can be made accessible when it is not possible to do so with the element's native HTML. Important:This feature is intended for users who have custom applications / elements that require ARIA attributes. If you do not have these on your site, you do not need to edit the ARIA attributes.Adding ARIA attributesWe have already hardcoded ARIA attributes for most elements on a site. However, if you have created custom applications, then you may want to add your own ARIA attributes for accessibility purposes.Studio EditorWix EditorEditor XEnable developer mode (Velo by Wix) in the Studio Editor to add attributes to elements. Velo allows you to add coding, build databases, and more.
Select Code   on the left side of the editor. Select the relevant application or element, and click the More actions icon . Select Accessibility. Select Add Attribute. Select an attribute from the drop-down menu. Enter a label / select the level or value. Select Add.Enable dev tools in the Accessibility Wizard to add aria attributes to your custom elements. You can then add the attribute by right-clicking the element or application.
Select Settings in the top bar of your editor. Select Accessibility Wizard. Select the More actions icon  on the top bar of the Wizard. Select Advanced accessibility settings. Click the Accessibility Dev Tools toggle to enable it. Right-click the application or element you want to add the attributes to. Select Accessibility. Select Add Attribute. Select an attribute from the drop-down menu. Enter a label / select the level or value. Select Add.Important:You can turn the advanced accessibility settings off at any time, and the ARIA attributes will not be deleted.To add attributes to elements in Editor X, you need to ensure that Dev Mode is enabled on your site. After enabling dev mode, you can add the attribute by right-clicking the element or application.
﻿﻿Select Dev Mode on the top of Editor X. Select Turn On Dev Mode. Select the relevant application or element, and click the More actions icon . Select Accessibility. Select Add Attribute. Select an attribute from the drop-down menu. Enter a label / select the level or value. Select Add.You can add ARIA Attributes to the following elements:ElementPropertiesLightboxlabelText label, role [heading, status, alert], live, relevant, atomic, hidden, current, levelContainer Boxlabel, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hiddenStriplabel, tabindex, role [heading, status, alert], live, atomic, hidden, currentRepeaterlabel, role [heading, status, alert]Text Buttontabindex, pressed, expanded, haspopupWe are continually working on the ability to add ARIA attributes to more elements. Get in touch if you have any specific requests about ARIA attributes. Editing your ARIA attributesAfter adding attributes to custom applications, you can edit and update them whenever you like with the Accessibility icon . This icon is automatically added to elements you've connected attributes to.To edit the attribute:
Select the element / application in your editor. Select the Accessibility icon . Hover over the relevant attribute, and select the More Actions icon . Select Edit. Make the relevant changes and select Save.Types of ARIA AttributesAttribute NameCategoryTokenstabindex0, -1roletoken: according to definition in primitivearia-levelintaria-liveLivetoken: polite, assertivearia-multiline Descriptiontrue, falsearia-multiselectableDescriptiontrue, falsearia-pressedStatetrue, falsearia-relevantLivetoken: all, additions, removals, textaria-activedescendantRelationshipsID_REFaria-atomicLivetrue, falsearia-autocompleteDescriptiontrue, falsearia-controlsRelationshipsID_REFaria-currentStatestep, page, true, falsearia-describedbyRelationshipsID_REF (space separated items)aria-expandedtrue, falsearia-haspopupRelationshipsdialog, menu, true, falsearia-hiddentrue, falsearia-invalidStatetrue, falsearia-labelstringaria-labelledby RelationshipsID_REF (space separated items)