What’s an interactive element? by Manuel Matuzovic

Manuel sensed a general misunderstanding of what an interactive element is and what focusable really means. He wasn’t totally sure himself either, so did some research. It’s a long post but the summary is that:

• an important characteristic of all interactive elements is they are natively focusable;
• focusable doesn't necessarily mean sequentially focusable (tabbable). Some interactive elements including dialog are click-focusable, and these are not tabbable but can be focused programmatically or via click.
• it’s also worth knowing that it's perfectly acceptable to place tabindex on a non-interactive element to aid with accessibility. But prefer applying it to semantic elements rather than divs.

Aside: is dialog an interactive element?

Interestingly, Manuel was motivated to do this research after feeling confused when reading some guidance on MDN’s Dialog element docs. He refers to the following note: “Do not add the tabindex property to the <dialog> element as it is not interactive and does not receive focus.” He takes issue with the second part of that sentence, saying that the dialog element does receive focus because it is an interactive element.

Here’s how he goes about proving his assertion.

Firstly he points to the HTML Spec’s section on Focus which specifically includes “dialog boxes” within a list of “interactive widgets”.

Secondly he describes how interactive elements can be focused which makes them focusable areas. (To put it another way: interactive elements are focusable.) He explains what qualifies as a focusable area and that dialog meets the qualifying criteria. Specifically this criterion: “the user agent determines the element to be focusable”.

He continues by explaining what focusable means:

An element is focusable when it can be focused programmatically, e.g. via the focus() method or the autofocus attribute.

Focusable elements can either be sequentially focusable, click focusable, both, or none of them.

Users can reach sequentially focusable elements by pressing the Tab key.

And Manuel provides practical proof of the browser regarding dialog as being focusable via two demos.

His first demo shows that when you launch a dialog via a button that fires myDialog.showModal() and that dialog contains no interactive elements, the dialog element itself has focus. He outputs the value of document.activeElement.tagName to the screen and it is DIALOG.

His second demo shows that an open dialog element (<dialog open>) is click focusable (or sequentially focusable depending on your choice of browser).

All of which backs up Manuel’s assertion that dialog is an interactive element.