# The “button” role is unnecessary for element “input” whose type is “submit”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-button-role-is-unnecessary-for-element-input-whose-type-is-submit
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The WAI-ARIA specification defines implicit roles (also called "native semantics") for many HTML elements. An `<input>` element with `type="submit"` inherently communicates to assistive technologies that it is a button control. Adding `role="button"` explicitly restates what the browser and screen readers already know, making it redundant.

The `role="button"` attribute is designed for situations where you need to make a non-interactive element — such as a `<div>` or `<span>` — behave like a button for assistive technologies. When applied to elements that already carry this semantic meaning natively, it adds unnecessary noise to your markup without providing any accessibility benefit.

### Why this is a problem

- **Redundancy:** The explicit role duplicates the element's built-in semantics, cluttering the HTML with no added value.
- **Maintenance risk:** Redundant ARIA attributes can mislead other developers into thinking the role is necessary, or that the element's native semantics differ from what they actually are.
- **Standards compliance:** The W3C validator flags this as an issue because the ARIA in HTML specification explicitly states that authors should not set ARIA roles or attributes that match an element's implicit native semantics. This principle is sometimes called the "first rule of ARIA" — don't use ARIA when a native HTML element already provides the semantics you need.
- **Potential conflicts:** While current browsers handle redundant roles gracefully, explicitly overriding native semantics can theoretically interfere with future browser or assistive technology behavior.

### How to fix it

Remove the `role="button"` attribute from any `<input type="submit">` element. The same principle applies to other input types with implicit roles, such as `<input type="reset">` (which also has an implicit `button` role) and `<button>` elements.

## Examples

### ❌ Incorrect: redundant `role="button"` on a submit input

```html
<form action="/checkout" method="post">
  <input type="submit" role="button" value="Buy Now">
</form>
```

### ✅ Correct: no explicit role needed

```html
<form action="/checkout" method="post">
  <input type="submit" value="Buy Now">
</form>
```

### ❌ Incorrect: redundant role on a `<button>` element

The same issue applies to `<button>` elements, which also have an implicit `button` role:

```html
<button type="submit" role="button">Submit Order</button>
```

### ✅ Correct: let native semantics do the work

```html
<button type="submit">Submit Order</button>
```

### ✅ Correct: using `role="button"` where it *is* appropriate

The `role="button"` attribute is meaningful when applied to an element that does not natively convey button semantics. Note that you must also handle keyboard interaction and focus management manually in this case:

```html
<div role="button" tabindex="0">Add to Cart</div>
```

Even in this scenario, using a native `<button>` element is strongly preferred over adding ARIA roles to non-interactive elements, since the native element provides built-in keyboard support and focus behavior for free.