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.…