覆盖ionic3离子图标的aria标签

Question

我正在使用iOS的VoiceOver功能测试我的Ionic3应用程序的可访问性。 看起来离子图标在其咏叹调标签属性中使用图标的名称并大声朗读。 有没有办法用其他东西覆盖它或抑制图标的咏叹调标签？

例。。。

我有一个这样的按钮：

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

使用旁白大声朗读为"完成我的明信片复选标记圆圈"。

类似地，对于选项卡：

<ion-tab [root]="tab3Root" tabTitle="Postcards" tabIcon="images"></ion-tab>

作为"图像轮廓明信片"大声朗读

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

Answer 1

根据ionicon的强制文档，您可以简单地覆盖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>

仍在尝试弄清楚如何为选项卡禁止显示它或覆盖标签。