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-label>Ice Cream</ion-label>
    <ion-checkbox [(ngModel)]="iceCream"></ion-checkbox>
</ion-item>

The above example replaced div with ion-item and when read by a screen reader will associate the label "Ice Cream" with the checkbox for Ice Cream treating them as being together.