Picture a settings page. There's an Export control in the toolbar, a filter dropdown, and a Settings dialog. Everything works when you click. Now push your mouse aside and press Tab. The focus ring has vanished, Export never receives focus, and the dialog opens while keyboard focus stays on the page behind it.

Nothing in this page throws an error, and a mouse-driven demo would pass. That gap is what this article is about, and the test that exposes it is one question: can someone use this interface without touching a mouse?

A clickable div is not a button

This is the most common version of the problem:

<div class= "btn" onclick= "exportReport()" > Export </div>

Enter fullscreen mode

Exit fullscreen mode

A <div> isn't focusable, so Tab skips it. It has no button role, so assistive technology doesn't know it's a control. Enter and Space do nothing even if you could reach it.…