---
title: "Native interactive controls · Sitebulb Labs"
description: "A div with a click handler is invisible to an agent driving the page by keyboard or accessibility tree."
url: https://labs.sitebulb.com/docs/checks/agent-experience/ax-native-controls/
---

# Native interactive controls

A div with a click handler is invisible to an agent driving the page by keyboard or accessibility tree.

- Category

  [Agent experience](https://labs.sitebulb.com/docs/checks/agent-experience)

- Standard

  Recommended

## What it checks

The extension counts the interactive elements on the rendered page and sorts them into two groups:

- **Native controls:** `<button>`, `<a href>`, `<select>`, `<textarea>` and `<input>` (other than hidden inputs).
- **Non-native controls:** anything else with an `onclick` attribute, `role="button"` or `role="link"`.

Hidden elements are ignored. So is a `tabindex="-1"` child inside a native or focusable parent, since that is part of a larger widget rather than a separate control.

An agent driving the page through the keyboard or the accessibility tree can reach native controls. It often cannot reach, or even recognise, a `<div>` or `<span>` that only responds to clicks.

## Results

| Status         | When                                                              |
| -------------- | ----------------------------------------------------------------- |
| **Pass**       | Every interactive element is a native control                     |
| **Warn**       | Some are non-native, up to 25% of all interactive elements        |
| **Fail**       | More than 25% of interactive elements are non-native              |
| **N/A**        | The page has no interactive elements                              |
| **Unmeasured** | The extension could not read the page (open it in the active tab) |

The result lists locators for the non-native elements, such as `div.icon-btn`, so you can find them.

## How to fix

Replace click handlers on generic elements with the element that does the job:

```html
<!-- Before -->
<div class="icon-btn" onclick="addToBasket()">Add to basket</div>

<!-- After -->
<button type="button" onclick="addToBasket()">Add to basket</button>
```

Use `<a href>` for anything that navigates and `<button>` for anything that acts. Both are focusable and exposed to agents without extra ARIA.

Once the controls are native, check they have names: [Accessible names on controls](https://labs.sitebulb.com/docs/checks/agent-experience/ax-accessible-names).