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.
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.
In order to ease the setting of ARIA attributes, we have introduced two new associations to the OpenUI5 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" }