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:

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