Skip to main content


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


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


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

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).


<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>