# An “input” element with a “type” attribute whose value is “hidden” must not have any “aria-*” attributes.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-input-element-with-a-type-attribute-whose-value-is-hidden-must-not-have-any-aria-attributes
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Hidden inputs are designed to carry data between the client and server without any user interaction or visual presence. The browser does not render them, screen readers do not announce them, and they are entirely excluded from the accessibility tree. Because `aria-*` attributes exist solely to convey information to assistive technologies, adding them to an element that assistive technologies cannot perceive is contradictory and meaningless.

The HTML specification explicitly prohibits `aria-*` attributes on `input` elements with `type="hidden"`. This restriction exists because WAI-ARIA attributes — such as `aria-label`, `aria-invalid`, `aria-describedby`, `aria-required`, and all others in the `aria-*` family — are meant to enhance the accessible representation of interactive or visible elements. A hidden input has no such representation, so these attributes have nowhere to apply.

This issue commonly arises when:

- JavaScript frameworks or templating engines apply `aria-*` attributes indiscriminately to all form inputs, regardless of type.
- A developer changes an input's type from `"text"` to `"hidden"` but forgets to remove the accessibility attributes that were relevant for the visible version.
- Form libraries or validation plugins automatically inject attributes like `aria-invalid` onto every input in a form.

To fix the issue, simply remove all `aria-*` attributes from any `input` element that has `type="hidden"`. If the `aria-*` attribute was meaningful on a previously visible input, no replacement is needed — the hidden input doesn't participate in the user experience at all.

## Examples

### Incorrect: hidden input with `aria-invalid`

```html
<form action="/submit" method="post">
  <input type="hidden" name="referer" value="https://example.com" aria-invalid="false">
  <button type="submit">Submit</button>
</form>
```

### Correct: hidden input without `aria-*` attributes

```html
<form action="/submit" method="post">
  <input type="hidden" name="referer" value="https://example.com">
  <button type="submit">Submit</button>
</form>
```

### Incorrect: hidden input with multiple `aria-*` attributes

```html
<form action="/save" method="post">
  <input
    type="hidden"
    name="session_token"
    value="abc123"
    aria-label="Session token"
    aria-required="true"
    aria-describedby="token-help">
  <button type="submit">Save</button>
</form>
```

### Correct: all `aria-*` attributes removed

```html
<form action="/save" method="post">
  <input type="hidden" name="session_token" value="abc123">
  <button type="submit">Save</button>
</form>
```

### Correct: `aria-*` attributes on a visible input (where they belong)

If the input is meant to be visible and accessible, use an appropriate `type` value instead of `"hidden"`:

```html
<form action="/login" method="post">
  <label for="username">Username</label>
  <input
    type="text"
    id="username"
    name="username"
    aria-required="true"
    aria-invalid="false"
    aria-describedby="username-help">
  <p id="username-help">Enter your registered email or username.</p>
  <button type="submit">Log in</button>
</form>
```