Skip to main content

Item

Ionic components are smart about accessibility particularly when it comes to associating labels to the associated control. So, consider using a container control like ion-item to contain Ionic components.

Before

<div>
<ion-label>Ice Cream</ion-label>
<ion-checkbox [(ngModel)]="iceCream"></ion-checkbox>
</div>

The above example will read "Ice Cream" as a label, and if you swipe to the next element it will go to the checkbox. With a screen reader it is not obvious that the "Ice Cream" label is associated with the checkbox.

After

<ion-item>
<ion-checkbox [(ngModel)]="iceCream">Ice Cream</ion-checkbox>
</ion-item>