ui5-typescript-walkthrough

Step 37: Accessibility

In this step we’re going to improve the accessibility of our app.

To achieve this, we will add ARIA attributes. ARIA attributes are used by screen readers to recognize the application structure and to interpret UI elements properly. That way, we can make our app more accessible for users who are limited in their use of computers, for example visually impaired persons. The main goal here is to make our app usable for as many people as we can.

💡 Tip:
ARIA is short for Accessible Rich Internet Applications. It is a set of attributes that enable us to make apps more accessible by assigning semantic characteristics to certain elements. For more information, see Accessible Rich Internet Applications (ARIA) – Part 1: Introduction.

 

---

Preview

^{Landmarks in our app}

You can access the live preview by clicking on this link: 🔗 Live Preview of Step 37.

To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 37.

---

Coding

One part of the ARIA attribute set are the so-called landmarks. You can compare landmarks to maps in that they help the user navigate through an app. For this step, we will use Google Chrome with a free landmark navigation extension We will now add meaningful landmarks to our code.

webapp/i18n/i18n.properties

We add the labels we will need for the ARIA regions to the text bundle.

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of UI5

#Overview Page
Overview_rootLabel=Overview Page
Overview_headerLabel=Header
Overview_contentLabel=Page Content

# Hello Panel
...

---

webapp/view/Overview.view.xml

We add the landmarkInfo aggregation to the page and use sap.m.PageAccessibleLandmarkInfo to define ARIA roles and labels for the overview page areas. In the PageAccessibilityLandmarkInfo control we specify a role and a title for the root, the content, and the header of the page.

For more information, see the API Reference: sap.m.PageAccessibleLandmarkInfo.

<mvc:View
	controllerName="ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Page title="{i18n>homePageTitle}">
		<landmarkInfo>
			<PageAccessibleLandmarkInfo
				rootRole="Region"
				rootLabel="{i18n>Overview_rootLabel}"
				contentRole="Main"
				contentLabel="{i18n>Overview_contentLabel}"
				headerRole="Banner"
				headerLabel="{i18n>Overview_headerLabel}"/>
		</landmarkInfo>
		<content>
			<mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/>
			<mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>
		</content>
	</Page>
</mvc:View>

---

webapp/view/InvoiceList.view.xml

We add an sap.m.Panel around the invoice list and move the toolbar from the table into the panel, so that the region can take the title of the toolbar as its own. This has the effect that it will now be a region in our landmarks.

<mvc:View
	controllerName="ui5.walkthrough.controller.InvoiceList"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel accessibleRole="Region">
		<headerToolbar>
			<Toolbar>
				<Title text="{i18n>invoiceListTitle}"/>
				<ToolbarSpacer/>
				<SearchField
					width="50%"
					search=".onFilterInvoices"/>
			</Toolbar>
		</headerToolbar>
		<Table
			id="invoiceList"
			class="sapUiResponsiveMargin"
			width="auto"
			items="{
				path : 'invoice>/Invoices',
				sorter : {
						path : 'ShipperName',
						group : true
					}
				}">
				...
		</Table>
	</Panel>
</mvc:View>

---

webapp/view/HelloPanel.view.xml

In the HelloPanel view, we already have a panel, so we just add the accessibleRole attribute.

<mvc:View
	controllerName="ui5.walkthrough.controller.HelloPanel"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel
		headerText="{i18n>helloPanelTitle}"
		class="sapUiResponsiveMargin"
		width="auto"
		expandable="{device>/system/phone}"
		expanded="{= !${device>/system/phone} }"
		accessibleRole="Region">	
		…
	</Panel>
</mvc:View>

---

Result

	
**Landmarks on the overview page - before**	**Landmarks on the overview page - after**

As you can see, we now have four landmarks on our page. The top three landmarks structure our page:

• Overview Page marks the complete page.

• Header marks the page title.

• Page Content marks the content of our page. This landmark already has two children.

 

---

Next: Step 38: Build Your Application

Previous: Step 36: Content Density

---

Related Information

Accessibility

Screen Reader Support for OpenUI5 Controls

API Reference: sap.m.PageAccessibleLandmarkInfo

This site is open source. Improve this page.