# The “aria-hidden” attribute must not be specified on an “input” element whose “type” attribute has the value “hidden”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-hidden-attribute-must-not-be-specified-on-an-input-element-whose-type-attribute-has-the-value-hidden
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `<input type="hidden">` element is inherently invisible to all users. It is not rendered on the page, it cannot receive focus, and browsers automatically exclude it from the accessibility tree. The `aria-hidden` attribute is designed to hide visible content from assistive technologies like screen readers, but applying it to an element that is already fully hidden serves no purpose.

The HTML specification explicitly forbids the use of `aria-hidden` on hidden inputs. This restriction exists because combining the two is semantically meaningless — you cannot "hide from assistive technologies" something that is already invisible to everyone. Validators flag this as an error to encourage clean, standards-compliant markup and to help developers avoid misunderstandings about how ARIA attributes interact with native HTML semantics.

This issue commonly arises when `aria-hidden="true"` is applied broadly to a group of elements (for example, via a script or template) without checking whether specific children already handle their own visibility. It can also happen when developers add ARIA attributes as a precaution, not realizing that the native behavior of `type="hidden"` already covers accessibility concerns.

To fix this, remove the `aria-hidden` attribute from any `<input>` element whose `type` is `hidden`. No replacement is needed — the browser already handles everything correctly.

## Examples

### Incorrect

Adding `aria-hidden` to a hidden input triggers a validation error:

```html
<form action="/submit" method="post">
  <input type="hidden" aria-hidden="true" name="month" value="10">
  <input type="hidden" aria-hidden="true" name="csrf_token" value="abc123">
  <button type="submit">Submit</button>
</form>
```

### Correct

Remove the `aria-hidden` attribute entirely. The hidden inputs are already inaccessible to all users by default:

```html
<form action="/submit" method="post">
  <input type="hidden" name="month" value="10">
  <input type="hidden" name="csrf_token" value="abc123">
  <button type="submit">Submit</button>
</form>
```

### When `aria-hidden` is appropriate

The `aria-hidden` attribute is intended for elements that are **visually present** but should be hidden from assistive technologies, such as decorative icons:

```html
<button type="button">
  <span aria-hidden="true">★</span>
  Favorite
</button>
```

In this case, the decorative star is visible on screen but irrelevant to screen reader users, so `aria-hidden="true"` correctly prevents it from being announced. This is the proper use case — hiding visible content from the accessibility tree, not redundantly marking already-hidden elements.