ionic3 - 覆盖 ionic3 ion-icon 的 aria-label

Question

我正在使用 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>

被大声读出为“图像轮廓明信片”

在这两种情况下，最好根本不公布图标的名称。但是，很高兴知道如何用自定义文本覆盖它。

score 2 · Accepted Answer

根据ionicons 组件文档，您可以简单地覆盖 aria-label：

<ion-icon name="checkmark-circle" ariaLabel="Completed"></ion-icon>

由于您在听起来像任务的东西旁边显示复选标记，我假设该图标实际上包含重要信息：任务已完成。因此，您不应向屏幕阅读器用户隐藏该信息。

score 1 · Accepted Answer

在这种情况下，我想出了如何在使用 ion-icon 代码时隐藏图标的名称。只需添加 aria-hidden="true"

<button ion-button icon-right>
    Finish my postcard 
    <ion-icon name="checkmark-circle" aria-hidden="true"></ion-icon>
</button>

仍在试图弄清楚如何为标签抑制它或覆盖标签。

2 回答 2