_“The web is used by a wide variety of people, including those who have visual or motor impairments. A variety of assistive technologies are available that make it much easier for these groups to interact with web-based software applications. In addition, designing an application to be more accessible generally improves the user experience for all users.” — _Angular’s Accessibility Guide

In today’s article, we will focus on reacting to users via keyboard events or shortcuts. We will take five real-life examples of handling keyboard listeners in an Angular app.

Let’s get started.

Case Study 1

Let’s say you have an input field in your component and you want to open a dialog when the user presses F2. You can do it in two ways.

Option 1

Add (keydown.F2) in your HTML:

<input matInput (keydown.F2)=”onF2KeyPress($event)”>

And the onF2KeyPress() method in your TypeScript code:

onF2KeyPress(event: KeyboardEvent) {
    this.openOptionsDialog(…);
}

#accessibility #javascript #angular #programming #web-development