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