Labeling

# Overview

## UI5 Landmarks API

The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections within a page.

Landmarks also provide an easy way for AT users to skip over blocks of content that are repeated on multiple pages and notify them of the programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmarks can be used to skip over it and navigate from one section to another.

Support for landmark roles in UI5 is provided for:

- sap.f.DynamicPage
- sap.m.Page
- sap.m.Panel
- sap.uxap.ObjectPage

Before seeing how a landmark is set to these controls you must understand what landmark roles we can use.

Supported landmark roles in UI5 are stored in enum sap.ui.core.AccessibleLandmarkRole.

### sap.f.DynamicPage

To add a landmark to the DynamicPage you must use `landmarkInfo` aggregation with value sap.f.DynamicPageAccessibleLandmarkInfo. Depending on your use case you should choose a value from AccessibleLandmarkRole.

    <landmarkInfo>
    	<DynamicPageAccessibleLandmarkInfo
    			rootRole="Region"
    			rootLabel="Product Details"
    			contentRole="Main"
    			contentLabel="Product Description"
    			footerRole="Banner"
    			footerLabel="Product Footer"
    			headerRole="Banner"
    			headerLabel="Product Header" />
    </landmarkInfo>

See Example

### sap.m.Page

To add a landmark to the Page you must use `landmarkInfo` aggregation with value sap.m.PageAccessibleLandmarkInfo. Depending on your use case you should choose a value from AccessibleLandmarkRole.

    <landmarkInfo>
    	<PageAccessibleLandmarkInfo
    			rootRole="Region"
    			rootLabel="Product Details"
    			contentRole="Main"
    			contentLabel="Product Description"
    			headerRole="Region"
    			headerLabel="Product Header"
    			footerRole="Region"
    			footerLabel="Product Footer"
    			subHeaderRole="Region"
    			subHeaderLabel="Product second header" />
    </landmarkInfo>

See Example

## sap.m.Panel

To add a landmark to the Panel we must use `accessibleRole` property with value from enum sap.m.PanelAccessibleRole.

    <Panel accessibleRole="Region"></Panel>

See Example

## sap.uxap.ObjectPage

To add a landmark to the ObjectPage we must use `landmarkInfo` aggregation with value sap.uxap.ObjectPageAccessibleLandmarkInfo. Depending on your use case you should choose a value from AccessibleLandmarkRole.

    <landmarkInfo>
    	<ObjectPageAccessibleLandmarkInfo
    			rootRole="Region"
    			rootLabel="Order Information"
    			contentRole="Main"
    			contentLabel="Order Details"
    			headerRole="Region"
    			headerLabel="Order Header"
    			footerRole="Region"
    			footerLabel="Order Footer"
    			navigationRole="Navigation"
    			navigationLabel="Order navigation" />
    </landmarkInfo>

See Example