Description
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.
UI5 Landmarks API
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.
When to use what?
We will take a look at all values of the enum and see for which part of the web page each of them is appropriate.
sap.ui.core.AccessibleLandmarkRole:
-
sap.ui.core.AccessibleLandmarkRole.Banner: Represents the ARIA role banner.
A region that contains the prime heading or internal title of a page. -
sap.ui.core.AccessibleLandmarkRole.Complementary: Represents the ARIA role complementary.
Any section of the document that supports the main content, yet is separate and meaningful on its own. -
sap.ui.core.AccessibleLandmarkRole.ContentInfo: Represents the ARIA role complementary.
A region that contains information about the parent document such as copyrights and links to privacy statements.
Example -
sap.ui.core.AccessibleLandmarkRole.Form: Represents the ARIA role form.
A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. -
sap.ui.core.AccessibleLandmarkRole.Main: Represents the ARIA role main.
Main content in a document. In almost all cases a page will have only one role="main". -
sap.ui.core.AccessibleLandmarkRole.Navigation: Represents the ARIA role navigation.
A collection of links suitable for use when navigating the document or related documents. -
sap.ui.core.AccessibleLandmarkRole.Region: Represents the ARIA role region.
A collection of links suitable for use when navigating the document or related documents. -
sap.ui.core.AccessibleLandmarkRole.Search: Represents the ARIA role search.
The search tool of a web document. -
sap.ui.core.AccessibleLandmarkRole.None: No explicit role is applicable.
The interpretation of this value depends on the control / element which defines a property with this type. Normally this value means that no accessible landmark should be written.
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