Overview

Landmark API

The landmark API enables app developers to set different roles and labels that allow users to access different sections of the page using the screen reader shortcuts. Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves in a page and help them navigate easily to various sections within the page.

Landmarks also provide an easy way for these users to skip over blocks of content that are repeated on multiple pages and notify them about 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 SAPUI5 is provided for:

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

To understand how a landmark is set for these controls, it is necessary to familiarize yourself with the available landmark roles.

Check supported landmark roles, which are stored in the sap.ui.core.AccessibleLandmarkRole enum.

sap.f.DynamicPage

To add a landmark to the DynamicPage you should use the 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 should use the landmarkInfo aggregation with value sap.m.PageAccessibleLandmarkInfo. Depending on your use case you can 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 you should 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 you should use the 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