介绍
As the last step in this tutorial, we are going to improve the accessibility of our app.
1.练习效果
2.源码
You can view and download all files at Walkthrough – Step 38.
One part of the ARIA attribute set is 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.
3.webapp/view/Overview.view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <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> <headerContent> … </headerContent> <content> … </content> </Page> </mvc:View> |
We use sap.m.PageAccessibleLandmarkInfo to define ARIA roles and labels for the overview page areas. For more information, see the API Reference:
sap.m.PageAccessibleLandmarkInfo.
4.webapp/view/InvoiceList.view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<mvc:View controllerName="sap.ui.demo.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" ariaLabelledBy="searchFieldLabel" ariaDescribedBy="searchFieldDescription" placeholder="{i18n>searchFieldPlaceholder}"/> </Toolbar> </headerToolbar> <Table id="invoiceList" class="sapUiResponsiveMargin" width="auto" items="{ path : 'invoice>/Invoices', sorter : { path : 'ShipperName', group : true } }"> <columns> <Column hAlign="End" … </columns> </Table> </Panel> </mvc:View> |
We
add a sap.m.Panel around the invoice list, and we move the toolbar from the table into the panel so 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.
5.webapp/view/HelloPanel.view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<mvc:View controllerName="sap.ui.demo.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> |
In
this view, we already have a panel, so we just add the accessibleRole attribute.
6.Note
To add ARIA roles, labels and panels to other views, for example your Detail.view.xml, you can follow the same pattern. We won’t go into detail in this tutorial step, but if you’re interested, simply download the tutorial code and take a look at the Detail.view.xml.
7.webapp/i18n/i18n.properties
|
1 2 3 4 5 6 7 |
... #Overview Page Overview_rootLabel=Overview Page Overview_headerLabel=Header Overview_contentLabel=Page Content ratingTitle=Rate the Product ... |
Here,
we add the text for the rating panel title and the labels for the ARIA regions to the text bundle.
8.Result
 |
 |
| Landmarks on the overview page – before | Landmarks on the overview page – after |
- 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.
9.Congratulations!
You’ve completed the walkthrough, good job! You should be familiar with all
major development paradigms of SAPUI5 now. Our other tutorials focus on
certain aspects of SAPUI5, so feel free to explore!