ionic3 - 覆盖 ionic3 ion-icon 的 aria-label
问题描述
我正在使用 iOS 的 VoiceOver 功能测试我的 Ionic3 应用程序的可访问性。看起来 ion-icon 在其 aria-label 属性中使用了图标的名称,并被大声读出。有没有办法用其他东西覆盖它或抑制图标的 aria-label?
例子...
我有一个这样的按钮:
<button ion-button icon-right>
Finish my postcard
<ion-icon name="checkmark-circle"></ion-icon>
</button>
使用 VoiceOver 将其朗读为“完成我的明信片复选标记圈”。
同样对于选项卡:
<ion-tab [root]="tab3Root" tabTitle="Postcards" tabIcon="images"></ion-tab>
被大声读出为“图像轮廓明信片”
在这两种情况下,最好根本不公布图标的名称。但是,很高兴知道如何用自定义文本覆盖它。
解决方案
根据ionicons 组件文档,您可以简单地覆盖 aria-label:
<ion-icon name="checkmark-circle" ariaLabel="Completed"></ion-icon>
由于您在听起来像任务的东西旁边显示复选标记,我假设该图标实际上包含重要信息:任务已完成。因此,您不应向屏幕阅读器用户隐藏该信息。
推荐阅读
- c# - 尽管在android中给定了camara的权限,但为扫描仪获取白屏
- c# - 如何在 Microsoft Edge SeleniumTools 中隐藏命令提示符
- firefox - Firefox 插件发布 API
- msbuild - 为 WindowsStore / UWP 构建的 MSBuild 标志
- typescript - spyOn 与 Jasmine 合作,但不与 Jest 合作
- python-3.x - 多处理在 PyInstaller 中不起作用:3.6 和 Python:3.8.2(conda)
- android - 如何在 Sceneform android 上动态更改网格(顶点)序列?
- javascript - 不明白为什么 onClick 在 React 中不起作用
- python - 如何在 python 中创建与现有目录具有相同内容的目录的“内存中”副本
- python - 迭代二维列表以删除第一个和最后一个元素