Installation center -> Advanced options -> Blocks configurations

Add new aria attribute

Explanation:
Aria attribute is a value that can be set for the specified HTML elements to improve their accessibility (enhance for people with disabilities the web content/web apps and especially JavaScript code).
Aria attribute modifies incorrect or incomplete code to create a better experience for those using AT by changing, exposing, and augmenting parts of the accessibility tree.
Accessible Rich Internet Applications (ARIA) is a pack of attributes that modify imperfect or incomplete code to follow better experience for those using AT by changing/exposing/augmenting parts of the accessibility tree. Aria attributes communicate role, state, and property to assistive technologies via accessibility APIs through modern browsers. This communication happens through the accessibility tree.

Instructions:
Click on the plus button “+” next to the “Add new aria attribute” title. Input the element’s selector (this element will get a required aria attribute value) and define the aria attribute type by adding it to the “Set Attr” field. To complete the procedure, you must embed the attribute value to the field “Set value”.
There are several categories for aria attribute:

  • Widget attributes

aria-autocomplete
aria-checked
aria-disabled
aria-errormessage
aria-expanded
aria-haspopup
aria-hidden
aria-invalid
aria-label
aria-level
aria-modal
aria-multiline
aria-multiselectable
aria-orientation
aria-placeholder
aria-pressed
aria-readonly
aria-required
aria-selected
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext

  • Live region attributes
    aria-busy
    aria-live
    aria-relevant
    aria-atomic
  • Drag-and-Drop attributes

aria-dropeffect
aria-grabbed

  • Relationship attributes

aria-activedescendant
aria-colcount
aria-colindex
aria-colspan
aria-controls
aria-describedby
aria-description
aria-details
aria-errormessage
aria-flowto
aria-labelledby
aria-owns
aria-posinset
aria-rowcount
aria-rowindex
aria-rowspan
aria-setsize

Due to various aria attributes, we propose to use only global attributes that are unified and can be applied to all HTML elements regardless of whether an ARIA role is applied
These attributes are called “Global” and are correctly supported by all existing base markup elements.
aria-atomic
aria-busy
aria-controls
aria-current
aria-describedby
aria-description
aria-details
aria-disabled
aria-dropeffect
aria-errormessage
aria-flowto
aria-grabbed
aria-haspopup
aria-hidden
aria-invalid
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription