Skip to main content

Aria Hidden

When using ion-icon the screen reader will read the name of the icon which is usually not required.

Before

      <ion-icon name="logo-ionic"></ion-icon>
<ion-label>Ionic</ion-label>

In the example above the screen reader will announce "logo ionic ionic" as it reads the name of the icon and the label. As the ion-label provides sufficient information we can hide the reading of the ion-icon name by using the aria-hidden attribute.

After

      <ion-icon aria-hidden="true" name="logo-ionic"></ion-icon>
<ion-label>Ionic</ion-label>