Clickable DIVs and Other Icebergs

1:30pm Friday 15 November (Stream Two)

There are plenty of tutorials out there with accessibility clangers in them, leading many beginners to unwittingly replicate mistakes like the clickable DIV. Since clicks are just a tiny part of the DOM iceberg, we’ll walk through all the code required to actually replicate a BUTTON.

Whether you are a new developer or a leader of devs, understanding the button example opens up a range of topics UI developers need to know. Industry trends have created a knowledge gap around frontend development, so we need to ensure our learning and development plans respond accordingly.

Clickable DIVs are the tip of an iceberg. Most shiny new JavaScript frameworks will have an accessibility clanger in their intro tutorial. Clicking DIVs, unlabelled INPUTs, colour-only design, bad ALT text … you have to teach your devs to evaluate the quality of the HTML they have been shown throughout their career. They have been led astray by people who had no ill intentions.

And your onboarding needs to strip away any assumptions that devs know HTML, CSS or accessibility. There has been a sharp industry shift to JS-heavy bootcamps; and universities have never taught this well. The DIV vs BUTTON exercise leads people to understand keyboard interaction, focus and other states, disabled controls and styling concerns. At Quantium we use it as part of the “semantic HTML” onboarding tutorial.

Ben Buchanan

Engineering Lead, Quantium

Ben BuchananBen Buchanan started creating web pages in the nineties, while completing a degree in everything but I.T.

He has created frontend systems for companies including News Ltd, Atlassian, Ansarada and Quantium.

He probably thinks about markup too much.

He can be found on Twitter and at his website.