HTML Guides for aria-hidden

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

<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

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

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

Correct — simple true value

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

Correct — simple false value

<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:

<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:

<!-- 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.

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:

<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:

<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:

<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.

The <link> element is used to define relationships between the current document and external resources—most commonly stylesheets, favicons, and preloaded assets. It is a void element (it has no closing tag) and it produces no rendered content on the page. Because <link> elements are inherently non-visible and already absent from the accessibility tree, the aria-hidden attribute serves no purpose on them.

The aria-hidden attribute is designed to control the visibility of rendered content for assistive technologies like screen readers. When set to "true" on a visible element, it tells assistive technologies to skip that element and its descendants. Applying it to a <link> element is contradictory—you’re trying to hide something from assistive technologies that was never exposed to them in the first place. The HTML specification explicitly disallows this combination, and the W3C validator will flag it as an error.

This issue sometimes arises when developers apply aria-hidden broadly through templating systems, JavaScript frameworks, or build tools that inject attributes across multiple element types without distinguishing between visible content elements and metadata elements. It can also happen when copying attribute patterns from <a> elements (which share the word “link” conceptually but are entirely different elements) onto <link> elements.

How to fix it

The fix is straightforward: remove the aria-hidden attribute from the <link> element. No replacement or alternative attribute is needed because <link> elements are already invisible to assistive technologies.

If your original intent was to hide a visible element from screen readers, make sure you’re applying aria-hidden to the correct element—a rendered content element such as <div>, <span>, <img>, or <a>, not a metadata element like <link>.

Examples

Incorrect: aria-hidden on a <link> element

<link rel="stylesheet" href="styles.css" aria-hidden="true">

<link rel="icon" href="favicon.ico" aria-hidden="true">

<link rel="preload" href="font.woff2" as="font" type="font/woff2" aria-hidden="true">

Correct: <link> without aria-hidden

<link rel="stylesheet" href="styles.css">

<link rel="icon" href="favicon.ico">

<link rel="preload" href="font.woff2" as="font" type="font/woff2">

Correct: aria-hidden used on a visible element instead

If you need to hide a decorative element from screen readers, apply aria-hidden to the rendered element itself:

<link rel="stylesheet" href="styles.css">
<div aria-hidden="true">
  <img src="decorative-swirl.png" alt="">
</div>

Incorrect vs. correct in a full document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
<!-- Incorrect: aria-hidden on link -->

  <link rel="stylesheet" href="styles.css" aria-hidden="true">
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
<!-- Correct: no aria-hidden on link -->

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>