Tabs

The ion-tab-button component requires some qualifying properties to meet accessibility requirements.

note

Axe will throw an error: "Ensures all page content is contained by landmarks" without these improvements.

Before

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

To correct the problem we set role="navigation" for the ion-label and give it an aria-label to make it unique amongst the other tabs of the ion-tab-bar.

We also set aria-hidden="true" for the ion-icon as it does not require reading with the screen reader (and would require a landmark role if not hidden).

After

<ion-tab-button tab="tab1">
    <ion-icon aria-hidden="true" name="logo-ionic"></ion-icon>
    <ion-label aria-label="Ionic" role="navigation">Ionic</ion-label>
</ion-tab-button>