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