首页 文章

覆盖ionic3 ion-icon的aria-label

提问于
浏览
2

我正在使用iOS的VoiceOver功能测试我的Ionic3应用程序的可访问性 . 看起来ion-icon在其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>

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

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

2 回答

  • 1

    根据ionicons compontent documentation,你可以简单地覆盖aria-label:

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

    由于你在听起来像任务的东西旁边显示一个复选标记,我假设图标实际上载有重要信息:任务完成 . 所以你不应该从屏幕阅读器用户那里隐藏这些信息 .

  • 2

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

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

    仍然试图找出如何抑制标签或覆盖标签 .

相关问题