Modern frontend frameworks give us structure to build complex, scalable web platforms. But if you look under the hood of many enterprise applications, you will find hundreds of clickable <div> elements.
Relying on the most generic layout container for core user interactions is more than lazy - it breaks the web for users who rely on assistive technologies, worsens native browser performance, and introduces technical debt.
The examples used in this article are using Angular, but the same principle applies in any other frontend framework or plain html.
Ban Clickable Divs
I have been guilty of abusing click events on <div> elements just like anybody else, but after fixing hundreds of WCAG issues as a result of this pattern, I have learned my lesson.
