# A11Y-014: clickable element that isn't a control

**Error**: the page doesn't build until this is fixed.

A `div` or `span` with `onclick`, Alpine's `"@click"` or an htmx request can be clicked with a mouse, but a
keyboard can't reach it, and a screen reader doesn't say it can be pressed. A `button` can do all of that by
itself. ([WCAG 2.1.1](https://www.w3.org/WAI/WCAG22/Understanding/keyboard))

## Fails

```hypra fails SEC-001
page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  div(class: "btn", onclick: "buy(42)") "Buy"
  span("@click": "open = true") "Sizes"
}
```

## Fixed

```hypra passes
page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  action("cart.add", id: 42) "Buy"
  button(type: "button", "@click": "open = true") "Sizes"
}
```

A click outside an element, like `"@click.outside"` to close a menu, isn't a click on it, and isn't reported.
Neither is a list that handles the clicks on the buttons or links inside it in one place, like
`ul("@click": "pick($event.target)") { li { button "S" } li { button "M" } }`: the buttons are what people press.
An element that has to stay what it is takes `role: "button"` and `tabindex: 0`, and its script handles the Enter
and Space keys too.