Native interactive controls

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:

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