Accessibility, when you need JavaScript to help with tabindex

Introduction

Until fairly recently I’d believed that JavaScript and Accessibility were at odds with one another. It turns out that they are not as mutually exclusive as I had thought. There are occasions when JavaScript is necessary to allow for better accessibility.

The problem

As an example, if you have elements that require X or Y scrolling (sideways, up and down) and are not natively targeted by tabindex then tabbing will bypass that element.

Example element with overflow on the x-axis

This is some example text long enough that it will activate overflow on the x-axis.

This leads to user frustration as they cannot target the element to use left and right arrow keys to move the elements content into view.

The solution

By using JavaScript to target the element in question we can add a tabindex of 0 (zero) – thus when tabbed to it allows the user to interact with it.

var codes = document.querySelectorAll('.wp-block-code code');

for (var i = 0, len = codes.length; i < len; i++) {
	codes[i].setAttribute('tabindex', '0');
}

Using document.querySelectorAll (read more in the documentation) on the example ‘code’ elements we can use a for loop to add a tabindex of 0 using setAttribute to all the instances.

We use the for loop as there may be more than one instance on a page.

We have a new issue, all code elements are now tabbable

Because we have targeted every single instance of ‘code’ they will now all be tabbed whether they have overflow or not. As an example, the ‘code’ element below should not be targetable by tabbing.

Short sample of text

The reason this is undesirable is because non overflowed ‘code’ blocks do not require any interaction on the users part (using left, right, up or down arrow keys.)

How to amend the script to only target elements that need the tabindex of 0

One solution is to add a function to check if the element has overflow.

/**
 * Check if element has overflow on X or Y axis
 */
function isOverflown(element) {
	return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

var codes = document.querySelectorAll('.wp-block-code code');

for (var i = 0, len = codes.length; i < len; i++) {
	if (isOverflown(codes[i])) {
		codes[i].setAttribute('tabindex', '0');
	}
}

Thus far I’ve only mentioned the X axis, the isOverflown() function checks if the element has either X, Y or both. It is called as part of the for loop checking each instance in turn and only applying the tabindex to those elements that match.

In conclusion

This is only one example of how an element may be inaccessible. Once you get in the habit of checking your code for tabbing you will probably find others.

Be sure once you have applied JavaScript or other methods to assist a user that you have checked your logic. For example, like the case described above that only some cases need the tabindex whilst others do not.