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

大声读出“图像大纲明信片”

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

Answer 1

根据ionicons compontent documentation，您可以简单地覆盖aria标签：

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

由于您在听起来像是任务的对象旁边显示一个对勾，因此我假设该图标实际上承载着重要信息：任务已完成。因此，您不应向屏幕阅读器用户隐藏该信息。

Answer 2

在这个例子中，我想出了在使用离子图标代码时如何抑制图标的名称。只需添加aria-hidden =“true”

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

仍然试图找出如何为标签抑制它或覆盖标签。