close
address. Gaston Geenslaan 11 B4, 3001 Leuven
s.
All Insights

Getting started with accessibility in Angular

Part two of our accessibility series! This time: ensuring you can navigate through your page to all clickable items with only a keyboard.

Written by
Aagje Reynders
Front-end Developer

Last month, I was asked to make an existing project more accessible. We were looking into small changes to impact the accessibility significantly, as there was not a lot of time or budget available… But when is there, really? 😉

One of the first things that I wanted to fix was making the applications more keyboard-accessible. There were two main goals in this accessibility sprint:

  1. having a visible outline (read my other blog for more information)
  2. being able to tab to every clickable item

This blog will focus on the second goal: ensuring you can navigate through your page to all clickable items with only a keyboard.

keyboard accessibility
Next

Wait, but with the correct HTML, this should work, right?

Correct! Items like anchors and buttons have predefined roles that would allow you to navigate to them with only your keyboard. But that only applies when you correctly use HTML, which was not the case in this specific project.

Working component-driven can lead to incorrect use of HTML

We developed visual components in Angular, so clickable items could be everything: divs, icons, paragraphs, spans,... Everything that’s not a button or anchor. That’s a problem. How can we fix it?

Fix the HTML

You can fix the HTML. This should always be your first consideration, especially when starting a new project. However, it isn't always possible when you have a lot of existing code.

Use tabIndex

You can use an HTML attribute tabIndex, where you can give a tab order to your element. Not only does it give the item an order, but when adding the attribute, it will be included in the tab navigation. Great! However, it is very annoying to manually add this to, say, 50 components, am I right?

You can also use tabIndex to disable the tab by giving it a -1 value. This is an easy fix for browsers who interpret the HTML weirdly or when the item is not always clickable.

Make a directive (my solution)

Instead of manually changing all the components, risking creating bugs, or forgetting some pages, I made an Angular directive. You can probably do something similar in other frameworks as well.

The directive will look for all HTML items that contain a (click)="" attribute. Which would suggest the item is clickable. Moreover, it adds the correct role and tab index to the item. It’s a quick fix that can make your application more accessible.

import { Directive, HostBinding, HostListener } from '@angular/core'; 

@Directive({ selector: '*[click]:not([role]):not([tabindex]' })
export class ClickEqualsEnterDirective {
@HostBinding('attr.role') role = 'button';
@HostBinding('attr.tabindex') tabindex = '0';
@HostListener('keydown', ['$event']) onKeyDown(e: any) {
if (e.which === 13 || e.which === 32) {
e.preventDefault(); e.target.click();
}
}
}

TL;DR

Making your component library or more extensive web application accessible with the keyboard is not always easy. Making a directive that can look for items that use a (click) attribute was my way of making this a long-term solution without refactoring all the components.

Have you struggled with this issue? Let me know how you fixed it in your application!

Written by
Aagje Reynders
Front-end Developer

Subscribe to our newsletter

Raccoons NV (Craftworkz NV, Oswald AI NV, Brainjar NV, Wheelhouse NV, TPO Agency NV and Edgise NV are all part of Raccoons) is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please tick below:

By submitting this form, you agree to our privacy policy.

In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.

More blog articles that can inspire you

25/05/2023

Data scientists, time to negotiate with your boss! Should you upgrade to Apple’s M2 Pro or Max?

At Brainjar, we are real Apple fans. Most of us use a MacBook Pro, and when Apple released the new MacBooks with upgrade...

what we do

Socials

address. Gaston Geenslaan 11 B4, 3001 Leuven