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 ARIA role=application is added to the body of each page by SAPUI5 Core to ensure that the page can be properly navigated using the keyboard. It this is not the case, the SAPUI5 JavaScript key handler code may get overridden by the screen reader and this will hinder keyboard handling.

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

Table 1: 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 1.0 role definitions, mapping to similar and existing ARIA base role concepts is applied. In special cases, custom role names can be added by the SAPUI5 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 SAPUI5 API:

• ariaLabelledBy - holds a reference to the control that has the aria-labelledby attribute set
• 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"

}