Skip to main content

Role

Elements that behave as buttons but are built using other tags such as span, div, a or others, should include a "role" attribute that equals to "button".

Before

<a href="./search"><img src="magnifying-glass.svg"></a>

After

<a role="button" href="./search"><img src="magnifying-glass.svg"></a>

A similar problem with images that act like buttons:

<ion-icon name="airplane-outline" (click)="bookFlight()"></ion-icon>

This component is not accessible as it cannot receive keyboard focus when tabbing on the screen. So a better alternative is to wrap in an html button:

<button (click)="bookFlight()">
<ion-icon name="airplane-outline"></ion-icon>
</button>