Icon
Quite often ion-icon
s are used as purely decorative content. Its important that these do not affect the navigation of your app when using assistive technology (as the user will have to navigate past each icon).
Before
<ion-item href="/info">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>Information</ion-label>
</ion-item>
<ion-item href="/tools">
<ion-icon name="hammer-outline"></ion-icon>
<ion-label>Tools</ion-label>
</ion-item>
In the sample below i'm adding aria-hidden="true"
to the ion-icon
because the icon is only presentational (cannot be pressed).
After
<ion-item href="/info">
<ion-icon aria-hidden="true" name="information-circle-outline"></ion-icon>
<ion-label>Information</ion-label>
</ion-item>
<ion-item href="/tools">
<ion-icon aria-hidden="true" name="hammer-outline"></ion-icon>
<ion-label>Tools</ion-label>
</ion-item>