# Bad value “"true"” for attribute “aria-hidden” on element “div”.

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

The `aria-hidden` attribute controls whether an element and its descendants are exposed to assistive technologies such as screen readers. When set to `true`, the element is hidden from the accessibility tree; when set to `false`, it remains visible. According to the WAI-ARIA specification, the only valid values for this attribute are the literal strings `true` and `false`. Any other value — including `"true"` with embedded quotation marks — is invalid.

When the validator reports a bad value like `"true"` (with the quotation marks as part of the value), it means the actual attribute value contains the characters `"true"` rather than just `true`. HTML attributes already use outer quotes as delimiters, so any quotes inside the value become part of the value itself. The browser or assistive technology may not recognize `"true"` as a valid ARIA state, which can lead to the element being incorrectly exposed to or hidden from screen readers, breaking the intended accessibility behavior.

This issue commonly arises in a few scenarios:

- **Copy-pasting from formatted text** where "smart quotes" or extra quoting gets included.
- **Templating engines or frameworks** that double-escape or double-quote attribute values (e.g., `aria-hidden="{{value}}"` where `{{value}}` already outputs `"true"`).
- **JavaScript** that sets the attribute with extra quotes, such as `element.setAttribute("aria-hidden", '"true"')`.

To fix the issue, ensure the attribute value contains only the bare string `true` or `false` with no extra quotation marks, HTML entities, or escaped characters inside it.

## Examples

### Incorrect — extra quotes embedded in the value

```html
<div aria-hidden='"true"'>
  This content should be hidden from assistive tech
</div>
```

The rendered attribute value is literally `"true"` (five characters including the quotes), which is not a recognized ARIA value.

### Incorrect — HTML entities producing extra quotes

```html
<div aria-hidden="&quot;true&quot;">
  This content should be hidden from assistive tech
</div>
```

The `&quot;` entities resolve to quotation mark characters, producing the same invalid value of `"true"`.

### Correct — simple `true` value

```html
<div aria-hidden="true">
  This content is hidden from assistive tech
</div>
```

### Correct — simple `false` value

```html
<div aria-hidden="false">
  This content is visible to assistive tech
</div>
```

### Fixing the issue in JavaScript

If you're setting the attribute dynamically, make sure you aren't wrapping the value in extra quotes:

```html
<div id="modal">Modal content</div>
<script>
  // Incorrect:
  // document.getElementById("modal").setAttribute("aria-hidden", '"true"');

  // Correct:
  document.getElementById("modal").setAttribute("aria-hidden", "true");
</script>
```

### Fixing the issue in templating engines

If a template variable already outputs a quoted string, don't add additional quotes around it. For example, in a templating system:

```html
<!-- Incorrect: if myVar outputs "true" (with quotes) -->
<!-- <div aria-hidden="{{myVar}}"> -->

<!-- Correct: ensure myVar outputs just true (no quotes) -->
<div aria-hidden="true">
  Content
</div>
```

The key takeaway is straightforward: the outer quotes in `aria-hidden="true"` are HTML syntax — they delimit the attribute value. The value itself must be exactly `true` or `false` with nothing extra. If you're generating HTML dynamically, inspect the rendered output in your browser's developer tools to confirm the attribute value doesn't contain stray quotation marks.