Skip to main content

What’s an interactive element? by Manuel Matuzovic

Visit external resource

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 here’s the conclusion:

Long story short: interactive elements are focusable, but focusable doesn't necessarily mean tabbable because there are also click-focusable elements, which aren't tabbable but can be focused programmatically or via click.

Also, it's perfectly acceptable to place tabindex on a non-interactive element when it helps with accessibility.

Interestingly, he was motivated to do this research after feeling confused when reading some guidance on MDN’s Dialog element docs.

The page contains a banner advising that “the tabindex attribute must not be used on the dialog element.”

He counters that it’s fine to use the tabindex attribute on the dialog element – it doesn’t break anything. So the “must not” feels weird. It’d be better to say nothing or say “It’s unnecessary to put the tabindex attribute on the dialog element” because dialog already handles focus well.

Note: I’ve since read a conversation between Manuel and Adrian Roselli and from what I can gather, applying tabindex to dialog is invalid HTML and the “must” implicitly says that. My takeaway: let’s not apply tabindex to dialog.

Manuel highlights another note on the MDN page: “Do not add the tabindex property to the <dialog> element as it is not interactive and does not receive focus.” He counters the second part of that sentence, saying that the dialog element does receive focus because it is an interactive element.

Dialogs are specifically mentioned in the list of interactive elements in the HTML Spec’s section on Focus. Interactive elements are focusable and Manuel goes on to show that dialog meets the criteria for a focusable area.

He provides proof of dialog being focusable too, demonstrating that when you open a dialog via myDialog.showModal() and the dialog contains no interactive elements, the dialog element itself has focus.

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

External Link Bookmark Note Entry Search