作为本教程的最后一步，我们将改进应用程序的可访问性。
为此，我们将添加ARIA属性。屏幕阅读器使用ARIA属性识别应用程序结构并正确解释UI元素。通过这种方式，我们可以让我们的应用程序对那些使用电脑有限的用户更容易访问，例如视障人士。这里的主要目标是让我们的应用程序能够让尽可能多的人使用。
提示：ARIA是Accessible Rich Internet Applications的缩写。它是一组属性，通过为某些元素分配语义特征，使应用程序更易于访问。有关更多信息，请参见 Accessible Rich Internet Applications (ARIA) – Part 1: Introduction。
Preview
Landmarks in our app
Coding
ARIA属性集的一部分是所谓的地标。您可以将地标与地图进行比较，因为它们可以帮助用户在应用程序中导航。在这一步中，我们将使用谷歌Chrome，并在非sap站点上发布免费地标导航扩展信息 landmark navigation extension，现在我们将向代码中添加有意义的地标。
Overview.view.xml
<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>
我们使用sap.m.PageAccessibleLandmarkInfo为概述页面区域定义ARIA角色和标签。有关更多信息，请参见API Reference: sap.m.PageAccessibleLandmarkInfo.
InvoiceList.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<PanelaccessibleRole="Region">
<headerToolbar>
<Toolbar>
<Titletext="{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>
加入 sap.m.Panel将工具栏从表中移动到面板中，以便该区域可以将工具栏的标题作为自己的标题。这样做的结果是，它将成为我们地标中的一个区域。
HelloPanel.view.xml
<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>
在这个视图中，我们已经有了一个面板，因此我们只需添加accessibleRole属性。
Detail.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.Detail"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:wt="sap.ui.demo.walkthrough.control">
<Page
title="{i18n>detailPageTitle}"
showNavButton="true"
navButtonPress="onNavBack">
<landmarkInfo>
<PageAccessibleLandmarkInfo
rootRole="Region"
rootLabel="{i18n>Detail_rootLabel}"
contentRole="Main"
contentLabel="{i18n>Detail_contentLabel}"
headerRole="Banner"
headerLabel="{i18n>Detail_headerLabel}"/>
</landmarkInfo>
…
</ObjectHeader>
<Panel
headerText="{i18n>ratingTitle}"
accessibleRole="Region">
<wt:ProductRatingid="rating"class="sapUiSmallMarginBeginEnd"change="onRatingChange"/>
</Panel>
…
<wt:ProductRating id="rating" class="sapUiSmallMarginBeginEnd" change="onRatingChange"/>
</Page>
</mvc:View>
在这里，我们还添加了ARIA角色和标签。我们还加入了一个sa .m。面板周围我们的自定义控件。因此，我们把它变成我们地标中的一个区域。
i18n.properties
# Detail Page
detailPageTitle=SAPUI5 Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars
dateTitle=Order date
quantityTitle=Quantity
Detail_rootLabel=Detail Page
Detail_headerLabel=Header
Detail_contentLabel=Page Content
ratingTitle=Rate the Product #Overview Page
Overview_rootLabel=Overview Page
Overview_headerLabel=Header
Overview_contentLabel=Page Content
ratingTitle=Rate the Product
Result我们将评级面板标题的文本和ARIA区域的标签添加到文本包中。
▪ Overview Page标记整个页面。如您所见，我们的页面上现在有四个地标。前三个地标构成我们的网页:
▪ Header 标记页面标题。
▪ Page Content标记我们页面的内容。这个地标已经有了两个孩子。
Parent topic: Walkthrough
Previous: Step 37: Content Density
Related Information