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>