第38步:可访问性

说明

为此，我们将添加ARIA属性。屏幕阅读器使用ARIA属性来识别应用程序结构并正确解释UI元素。通过这种方式，我们可以让我们的应用程序更容易为使用电脑受到限制的用户，例如视障人士。我们的主要目标是让尽可能多的人可以使用我们的应用程序。

提示
ARIA是Accessible Rich Internet Applications的简称。它是一个属性集，通过为某些元素分配语义特征，使应用程序更容易访问。有关更多信息，请参见Accessible Rich Internet Applications(ARIA) -第1部分:简介

预览

应用程序中的Landmarks

代码

您可以在演练-步骤38查看和下载所有文件。

ARIA属性集的一部分是所谓的landmarks。你可以将地标和地图进行比较，因为它们可以帮助用户在应用程序中导航。对于这一步，我们将使用谷歌Chrome自带的免费地标导航扩展。现在，我们将在代码中添加有意义的landmarks。

webapp/view/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参考:sap.m.PageAccessibleLandmarkInfo。

webapp/view/InvoiceList.view.xml

<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>

我们围绕发票列表添加一个sap.m.Panel，并将工具栏从表移到面板中，以便该区域可以将工具栏的标题作为自己的标题。这样做的效果是，它现在将成为我们地标中的一个区域。

webapp/view/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属性。

注意
要将ARIA角色、标签和面板添加到其他视图(例如Detail.view.xml视图)，可以遵循相同的模式。我们不会在本教程步骤中详细介绍，但如果您感兴趣，只需下载教程代码并查看Detail.view.xml。

webapp/i18n/i18n.properties

...
#Overview Page
Overview_rootLabel=Overview Page
Overview_headerLabel=Header
Overview_contentLabel=Page Content
ratingTitle=Rate the Product
...

在这里，我们将评级面板标题的文本和ARIA区域的标签添加到文本包中。

结果

如您所见，现在我们的页面上有四个地标。排名前三的地标结构我们的页面:

• Overview Page标志着完整的页面。
• Header标记页面标题。
• Page Content标志我们页面的内容。这个地标性建筑已经有两个子节点。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性