Some tricks for accessibility in Angular

Web accessibility is often the last part we do in a project but if we put some best practices early it will be smooth; here we will cover some common case that takes only few minutes to fix and get a more accessible app.

Event Binding case

The most common issue with accessibility in angular is the click event, it’s easy to add a binding syntax anywhere in the Angular template.

<div (click)="action()"> Action </div>
<!-- Versus -->
<button (click)="action()"> Action </button>

Accessibility is about to keep our semantic correct, if we want to make a button, we need to use the tag button, because if we just use the keyboard we can tab to the button element.

Routing case

<button (click)="navigateHome()"> Home </div>
<!-- Versus -->
<a routerlink="home"> Home </a>

Again, in HTML the correct tag for navigation is an anchor, a button must be for different action than to go to a page and it’s SEO-friendly.

Forms case

Generally, inputs and forms are often forsaken, we used them like every time, but not well. Example, we forgot to bind an input with a label, for assertive tools it’s mandatory to have a label to describe what the user is doing.

<form [formGroup]="loginForm" (ngSubmit)="login()">
  <label for="username">Username</label>
  <input
    type="text"
    id="username"
    placeholder="Insert your username"
    formControlName="username"
  />
  <label for="pwd">Password</label>
  <input
    type="password"
    id="pwd"
    placeholder="Insert your password"
    formControlName="pwd"
  />  
  <button type="submit">Sign in</button>
</form>

In this template a screen reader will go through all the information, the user will know how to fill this form and it’s keyboard proof.

Accessibility rhymes with quality :)

You found this post helpful! give it some 👏👏👏.
Thank you

@FrontEndTricks