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"}),
	]
});