Labeling and Description
For best accessibility, the ui elements should have a calculated accessible name. This can be achieved in variety of ways for the different types of controls.
Proper labeling, describing, titling of all UI elements is needed in order to ensure that the screen reader announces everything correctly.
Providing labels for Input controls.
<Label text="First Name" labelFor="name" /> <Input id="name" />See Example
Other controls also allow labeling:
<!-- RangeSlider --> <Label width="150px" class="sapUiSmallMarginBeginEnd" labelFor="rangeSlider" text="RangeSlider:"/> <RangeSlider width="500px" id="rangeSlider" value="20" value2="80" min="0" max="100" enableTickmarks="true"/> <!-- RatingIndicator --> <Label width="150px" class="sapUiSmallMarginBeginEnd" labelFor="ratingIndicator" text="RatingIndicator:"/> <RatingIndicator id="ratingIndicator" value="5" maxValue="10"/>See Example
Providing description for Input controls.
Other possibility to further enhance the accessibility of the element via the ariaDescribedBy
association.
<Input value="Notebook 17" ariaDescribedBy="descriptionNodeId" width="400px" fieldWidth="75%" class="sapUiSmallMarginBottom" /> <core:InvisibleText id="descriptionNodeId" text="Additional input description referenced by aria-describedby." />
You can also use the description property to add additional information. For the input, the description is usually used for showing the unit of measurement (for example. "EUR").
<Input value="Notebook 17" description="IT Laptops" width="400px" fieldWidth="75%" class="sapUiSmallMarginBottom" />See Example
Providing titles for Tables
<Title id="title" text="Products" /> <Table ariaLabelledBy="title"> <columns> <Column width="11rem"> <Text text="Product Name" /> </Column> <Column width="11rem"> <Text text="Product Id" /> </Column> </columns> <items> <ColumnListItem> <cells> <ObjectIdentifier title="Notebook" /> <ObjectIdentifier title="00001" /> </cells> </ColumnListItem> </items> </Table>
Providing alt property for Images and Icons
Non-decorative sap.m.Image/sap.ui.core.Icon should provide a meaningful alternative description in the alt
property.
<Image src="IMAGE_PATH" alt="This is an image showing an elephant" decorative=false />
Providing tooltip for icon-only Buttons
Icon-only sap.m.Button should have a tooltip.
<Button icon="sap-icon://action" press=".onPress" tooltip="Action Name" />
Providing labels for Popups
Label for Dialogs and Popovers with static content can be provided via the ariaLabelledBy
association.
sap.m.Dialog
<Dialog ariaLabelledBy="title" title="Product"> <content> <Text id="title" text="Notebook" /> </content> </Dialog>See Example
sap.m.Popover
new Popover({ title: "Title text", content: [ new VBox({ items: [ new Text({ id: "popoverContentText", text: "This text will be read out by the screen reader, as it is internally connected to the Popover via the aria-labelledby attribute." }).addStyleClass("sapUiSmallMarginTopBottom") ] }) ], ariaLabelledBy: [ "popoverContentText" ] });See Example
Providing description for Popups
Description for Dialogs and Popovers with static content can be provided via the ariaDescribedBy
association.
sap.m.Popover
<Popover xmlns="sap.m" ariaDescribedBy="content"> <Text id="content" text="Some Text" /> </Popover>See Example
sap.m.Dialog
<Dialog xmlns="sap.m" ariaDescribedBy="content"> <Text id="content" text="Some Text" /> </Dialog>
Providing accessible name for sap.m.SegmentedButton
new sap.ui.core.InvisibleText("geographicLocation", { text: "Geographic location" }).toStatic(); new sap.m.SegmentedButton({ ariaLabelledBy: "geographicLocation", items: [ new sap.m.SegmentedButtonItem({text: "Map"}), new sap.m.SegmentedButtonItem({text: "Satellite", key: "satellite"}), new sap.m.SegmentedButtonItem({text: "Hybrid"}), ] });