当前位置：首页 > web >正文

SAP学习笔记 - 开发33 - 前端Fiori开发 Accessibility（可访问性)

web 2025/6/17 11:33:08

上一章讲了Content Density（内容密度），其实也就是对应不同设备。

SAP学习笔记 - 开发32 - 前端Fiori开发 Content Density（内容密度）-CSDN博客

本章继续讲Fiori开发的知识。

1，Accessibility（可访问性)

1），Landmark 扩展

- 这个东西有啥用呢？

- 对眼睛正常的人来说其实没啥大用

- 这个主要是对视力受损，只能靠听觉的人有用

2），Overview.view.xml

3），InvoiceList.view.xml

4），HelloPanel.view.xml

5），i18n.properties

6），运行看效果

2，Landmarks 插件的用途总结

2-1. 识别网页的ARIA地标区域

2-2. 提升无障碍访问体验

2-3. 主要功能

2-4. 适用场景

2-5. 同类工具

2-6. 屏幕阅读器如何利用地标？

2-7. 地标的核心作用

2-8. 实际例子

2-9. Landmarks插件的意义

2-10. 类比解释

下面是详细内容。

1，Accessibility（可访问性)

Accessibility (简称 a11y) 在 SAP Fiori 开发中指的是确保应用程序能够被所有用户使用，包括残障人士(如视觉障碍、运动障碍等)的技术和设计实践。

SAPUI5 SDK - Demo Kit

下面先看实例。

1），Landmark 扩展

Chrome浏览器上用（其他浏览器上应该也有），先安装上

这里面有些快捷键，Alt + Shift + L =》显示Popup

Alt+Shift+L，就显示这样的

- 这个东西有啥用呢？

- 对眼睛正常的人来说其实没啥大用

当然你也能用，用习惯了也蛮有用的。

- 这个主要是对视力受损，只能靠听觉的人有用

想想你进超市找小零食，你是挨个货架找呢，还是抬头看标牌呢？对吧，这个标牌，对网页来说就是“地标“(Landmark）。

你视力OK的话，你拿鼠标就往下滑了，虽然也是“挨个货架找" 这种"笨" 方法，但是其实没办法，因为一般的网页里压根就没做“地标”，你没得选。

但是视力受损的话，就很郁闷了哈，你没法往下滑鼠标，只能挨行听，这个网页的“地标”就是给这些听力受损的人做了个可以听的“标牌”。

就好比视力受损的人进超市，手边有个地图，一摸就会有提示，“零食区在你右手边往前走，第3个货架”，你说快不快，再也不需要挨个摸货架了，直接到第3个货架就OK。

一开始没太理解这个“地标”的作用是因为它不是单独作业的，它还是要和其他读插件合作的。

摸一下，能听到摸的是啥，然后决定下一步该怎么做，这就是这个组件的用途。

2），Overview.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Page title="{i18n>homePageTitle}"><landmarkInfo><PageAccessibleLandmarkInforootRole="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>

- 加上 landmarkInfo 标签项

<landmarkInfo>
<PageAccessibleLandmarkInfo
rootRole="Region"
rootLabel="{i18n>Overview_rootLabel}"
contentRole="Main"
contentLabel="{i18n>Overview_contentLabel}"
headerRole="Banner"
headerLabel="{i18n>Overview_headerLabel}"/>
</landmarkInfo>

3），InvoiceList.view.xml

<mvc:View controllerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"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}}"><columns><Column hAlign="End" minScreenWidth="Small" demandPopin="true" width="5em"><Text text="{i18n>columnQuantity}" /></Column><Column><Text text="{i18n>columnName}" /></Column><Column minScreenWidth="Small" demandPopin="true"><Text text="{i18n>columnStatus}" /></Column><Column minScreenWidth="Tablet" demandPopin="false"><Text text="{i18n>columnSupplier}" /></Column><Column hAlign="End"><Text text="{i18n>columnPrice}" /></Column></columns><items><ColumnListItem type="Navigation" press=".onPress"><cells><ObjectNumber number="{invoice>Quantity}" emphasized="false"/><ObjectIdentifier title="{invoice>ProductName}" /><Text core:require="{Formatter: 'ui5/walkthrough/model/formatter'}" text="{parts: ['invoice>Status','i18n>invoiceStatusA','i18n>invoiceStatusB','i18n>invoiceStatusC'],formatter: 'Formatter.statusText.bind($controller)'}"/><Text text="{invoice>ShipperName}" /><ObjectNumber core:require="{Currency: 'sap/ui/model/type/Currency'}" number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}" unit="{view>/currency}" state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/></cells></ColumnListItem></items></Table></Panel>
</mvc:View>

- 这个地方定义了一个区域，其实就是 Landmark Region，可以直接跳转到这里来

<Panel accessibleRole="Region">
<headerToolbar>
<Toolbar>
<Title text="{i18n>invoiceListTitle}"/>
<ToolbarSpacer/>
<SearchField width="50%" search=".onFilterInvoices"/>
</Toolbar>
</headerToolbar>

4），HelloPanel.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"expandable="{device>/system/phone}"expanded="{= !${device>/system/phone} }"accessibleRole="Region" ><content><Buttonid="helloDialogButton"icon="sap-icon://world"text="{i18n>openDialogButtonText}"press=".onOpenDialog"class="sapUiSmallMarginEnd sapUiVisibleOnlyOnDesktop"/><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/></content></Panel>
</mvc:View>

- 和 InvoiceList.view.xml 里面一样，也是定义了一个可以跳转的 Landmark Region

<Panel
headerText="{i18n>helloPanelTitle}"
class="sapUiResponsiveMargin"
width="auto"
expandable="{device>/system/phone}"
expanded="{= !${device>/system/phone} }"
accessibleRole="Region" >

5），i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=DonecolumnQuantity=Quantity
columnName=Name
columnSupplier=Supplier
columnStatus=Status
columnPrice=Price# Detail Page
detailPageTitle=Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars
dateTitle=Order date
quantityTitle=Quantity
Salesperson=Sales Person# Product Rating
productRatingLabelInitial=Please rate this product
productRatingLabelIndicator=Your rating: {0} out of {1}
productRatingLabelFinal=Thank you for your rating!
productRatingButton=Rate#Overview Page
Overview_rootLabel=Overview Page
Overview_headerLabel=Header
Overview_contentLabel=Page Content
ratingTitle=Rate the Product

6），运行看效果

虽然现在是粉色的框框，但是吧，这个应该只是给开发人员看的，视力受损的用户用不到

大致的使用流程是：

- 他们会按下快捷键或其他方式打开面板，摸到某一个按钮

- 读插件读出该按钮上面的文字

- 他们根据听到的内容来具体决定是否“阅读”那部分内容

- 决定好之后，定位到具体的位置，然后再继续听那一段的文本内容

- 听完之后，再回到面板，找下一个想听的内容，直接定位，然后听一听

其实Landmark本身已经提供了相关的功能了呀，咱们这里的开发的内容有啥用呢？

你看按钮面板就知道，通过Fiori开发把内容给细化了，按钮变多了，让用户可以更加细腻的操作。

这在页面内容比较多的时候还是蛮有用的哈。

<参考：默认Landmark 会显示这样的面板>

如果你需要检查网页的无障碍支持或优化屏幕阅读器体验，Landmarks 这款插件会非常实用。

下面来总结一下Landmarks 插件的用途。

（下面是Deepseek里面查找的内容的整理）