Labeling and Description

For better accessibility, the UI elements should have a calculated accessible names. This can be achieved in variety of ways for the different types of controls.

Proper labeling, describing, and 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 Descriptions for Input Controls.

Other possibility to further enhance the accessibility of the element is 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 often used for showing the unit of measurement (for example. "EUR"). In the example below, we provide the product category (IT Laptops).

<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 Text Alternative for Images and Icons

All semantic non-text content like icons, images, videos has to have a text alternative and you can provide such text using the alt property. Only purely decorative elements don’t require such text alternative, but if a decorative image covers a considerable amount of space, specifically on touch devices, we recommend to give a crisp description.

<Image src="IMAGE_PATH" alt="This is an image showing an elephant" decorative=false />
			

Providing Tooltips 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

Labels 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 Descriptions for Popups

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