DEV Community

Kai Mercer
Kai Mercer

Posted on

Is it a button or a div? A one-minute check for clickable elements

#html #a11y #webdev

Landing pages are full of things that act like buttons: "Get started", menu toggles, tabs, plan switchers. Some are real <button> elements. Some are a <div> with a click handler. The page looks identical, but keyboard and screen reader users get different pages.

The check

View the page source (or DevTools) and find each clickable thing. Look at the tag.

<!-- Fragile -->
<div class="cta" onclick="start()">Get started</div>

<!-- Better -->
<button type="button" class="cta">Get started</button>
Enter fullscreen mode Exit fullscreen mode

A <button> can be reached with Tab and activated with the keyboard, and a screen reader announces it as a button. A bare <div> has none of that unless you add it yourself.

What the standards say

The W3C's Understanding page for WCAG 4.1.2, Name, Role, Value, says that for all interface components, including form elements, links and components generated by scripts, the name and role can be programmatically determined. It adds that if custom controls are created, or elements are programmed to have a different role than usual, additional measures are needed so assistive technologies get the right information and can control them.

MDN's page on the button element also has a detail worth knowing: a button inside a form is a submit button by default, unless it has type="button". A "Show more" button without a type can submit your signup form by accident.

Quick test

  1. Press Tab through the page and note what you can reach. Can you reach every clickable thing?
  2. For each one you can't reach, check the tag. Replace a <div> or <span> with <button> (or <a href> if it goes somewhere).
  3. Check every <button> inside a <form> has the type you meant.
  4. Press Enter and Space on each. A real button responds to both.

If you must keep a non-button element, you need to give it a role, make it focusable and handle the keys yourself. That is more work than changing the tag, which is why the tag is usually the better fix.

How many of your page's clickable elements are not buttons or links?

Top comments (0)