Skip to main content

Aria Label

Buttons should include text explaining their functionality, and if icons are used as buttons, a screen-reader only text or an aria-label attribute should be used for that description.

Before

This example has no indication of what action clicking the image performs.

<img (click)="doSearch()" src="magnifying-glass.svg">

After

<img role="button" aria-label="Search" (click)="doSearch()" src="magnifying-glass.svg">

Before

This example has no indication of what the range selection is for.

<ion-range step="10">  

After

<ion-range aria-label="Temperature" step="10">