# Bad value “search” for attribute “role” on element “input”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-search-for-attribute-role-on-element-input
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `search` ARIA role is a **landmark role**, which means it identifies a large, navigable section of a page — specifically, the region that contains the search functionality. Landmark roles help assistive technologies (like screen readers) quickly identify and jump to major sections of a document. Because landmarks describe sections of a page, they belong on container elements that encompass all the parts of the search interface (the label, the input field, the submit button, etc.), not on a single `<input>` element.

When you place `role="search"` on an `<input>`, the validator rejects it because the `search` role doesn't match the semantics of an input control. An `<input>` represents a single interactive widget, not a page region. The valid way to indicate that an input field is for search queries is to use `<input type="search">`, which gives browsers and assistive technologies the correct semantic meaning for that specific control.

Meanwhile, if you want to mark an entire search form as a search landmark, apply `role="search"` to the `<form>` element that wraps the search controls. In modern HTML, you can also use the `<search>` element, which has the implicit `search` landmark role without needing any ARIA attribute.

## How to fix it

1. **Remove `role="search"` from the `<input>` element.**
2. **Change the input's `type` to `"search"`** — this tells browsers and assistive technologies that the field is for search queries.
3. **Apply `role="search"` to the wrapping `<form>`**, or use the HTML `<search>` element as the container.

## Examples

### ❌ Incorrect: `role="search"` on an `<input>`

```html
<form>
  <label for="query">Search</label>
  <input role="search" id="query" name="q">
  <button type="submit">Go</button>
</form>
```

This triggers the validation error because `search` is not a valid role for `<input>`.

### ✅ Correct: `type="search"` on the input, `role="search"` on the form

```html
<form role="search">
  <label for="query">Search this site</label>
  <input type="search" id="query" name="q">
  <button type="submit">Go</button>
</form>
```

Here, `role="search"` is correctly placed on the `<form>` element, creating a search landmark. The `<input type="search">` conveys the correct semantics for the input field itself.

### ✅ Correct: Using the `<search>` element (modern HTML)

```html
<search>
  <form>
    <label for="query">Search this site</label>
    <input type="search" id="query" name="q">
    <button type="submit">Go</button>
  </form>
</search>
```

The `<search>` element has the implicit ARIA role of `search`, so no explicit `role` attribute is needed on either the container or the form. This is the most semantic approach in browsers that support it.

### ✅ Correct: Standalone search input without a landmark

If you simply need a search-styled input without marking up a full landmark region, just use `type="search"`:

```html
<label for="filter">Filter results</label>
<input type="search" id="filter" name="filter">
```

This gives the input the correct semantics and allows browsers to provide search-specific UI features (such as a clear button) without requiring a landmark role.