Skip to main content

Icon

Quite often ion-icons 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>