ARIA_Attribute_Mapping_3e9c010.md

loio
3e9c0104db864fbabc9fc786cbdf76a4

view on: demo kit nightly build | demo kit latest release

ARIA Attribute Mapping

Navigation with the keyboard and screen reader have to both work properly at the same time. In order for this to happen, you need to use the correct ARIA attributes and to map them to their HTML counterparts.

---

Attribute Mapping

The mapping of HTML attributes to ARIA attributes is described in the following table:

Attribute Mapping

HTML Attribute	ARIA Attribute
editable	aria-readonly
enabled	aria-disabled
visible	aria-hidden
required	aria-required
checked	aria-checked
selected	aria-selected

For custom controls, not part of the ARIA role definitions, mapping to similar and existing ARIA base role concepts is applied. In special cases, custom role names can be added by the OpenUI5 framework using aria-describedby or aria-labelledby references.

---

Additional API Associations

In order to ease the setting of ARIA attributes, we have introduced two new associations to the OpenUI5 API:

1. • ariaLabelledBy - holds a reference to the control that has the aria-labelledby attribute set

2. • ariaDescribedBy - holds a reference to the control that has the aria-describedby attribute set

These associations have the following structure:

Source Code:

ariaLabelledBy : {

type : "sap.ui.core.Control",

multiple : true,

singularName : "ariaLabelledBy"

}

Source Code:

ariaDescribedBy : {

type : "sap.ui.core.Control",

multiple : true,

singularName : "ariaDescribedBy"

}