Limit pointer-events to graphic elements

pointer-events is a property that specifies under what circumstances an element can be the target of pointer events. It is intended for graphic elements, but it can be used on any HTML element.

For usability and accessibility purposes, we need to be careful about how we use it. pointer-events may be interesting for graphical or presentational elements, but it should be avoided on interactive HTML elements.

When used with HTML elements in general, it is helpful in some cases like if you want to place decoration elements on top of others while preventing interaction (e.g. if you are simulating a device and want to draw a glare on top of the content).

The problems begin when those elements are (or contain) interactive elements, and pointer-events is used to disable them. One example of this would be button disabling with CSS:

<!-- DO NOT DO THIS -->
<style>
.disabled {
  pointer-events: none;
}
</style>

<button class="disabled">I am a disabled button</button>

The issue with this implementation (not too common, but not rare either) is that while the element is disabled for mouse usage, it is still accessible via keyboard. Here is a demo of why it is a bad idea:

Notice how the button looks disabled, and it feels disabled with the mouse... but it is fully operational with the keyboard.

In this case, we should go with a full HTML solution instead of CSS:

<!-- DO THIS INSTEAD -->
<button disabled>I am a disabled button<button>

This solution is better in many ways, including accessibility:

• It is more semantic and the right way to disable a button in HTML.
• Keyboard users cannot activate the button (they cannot reach it using tab).
• The button will be announced as a "disabled button" to screen reader users.

The goal is not to avoid pointer-events altogether, but to stop and think thoroughly before applying it. Its use outside of presentational/decoration elements –either graphics or HTML elements– may bring more undesired effects than positive ones.

Limit pointer-events to presentational and graphic elements.