El atributo hidden

¿Qué es hidden?

<p hidden>This paragraph is hidden.</p>
<!-- Equivalent to: display: none in CSS -->
<!-- The element is in the DOM but not rendered -->
<!-- Screen readers do not announce hidden elements -->

hidden es un atributo booleano

<!-- All of these are equivalent: -->
<div hidden>Content</div>
<div hidden="">Content</div>
<div hidden="hidden">Content</div>

<!-- Remove with JavaScript: -->
element.removeAttribute('hidden');

<!-- Or set: -->
element.setAttribute('hidden', '');

hidden frente a display:none y visibility:hidden

/* hidden attribute = display:none */
/* Element is removed from flow, invisible to AT */

/* visibility: hidden */
/* Element occupies space but is invisible */
/* Still read by some screen readers */

/* opacity: 0 */
/* Element occupies space, invisible, still interactive */
/* Still read by screen readers */

/* Hidden attribute is the simplest for fully hiding content */

Alternar la visibilidad con JavaScript

const modal = document.getElementById('modal');

// Show:
modal.removeAttribute('hidden');
// or:
modal.hidden = false;

// Hide:
modal.setAttribute('hidden', '');
// or:
modal.hidden = true;

// Toggle:
modal.toggleAttribute('hidden');

CSS puede sobrescribir hidden

/* This makes hidden elements visible again: */
[hidden] {
  display: block !important;
}

/* Do not do this unless you have a very specific reason */

/* The hidden attribute should be trusted as the source of truth for visibility */

hidden frente a aria-hidden

<!-- hidden: nothing sees it -->
<div hidden>Completely hidden</div>

<!-- aria-hidden: visual users see it, screen readers skip it -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>

Patrón de mostrar y ocultar

<button
  aria-expanded="false"
  aria-controls="menu"
  id="menu-btn"
>Menu</button>

<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

<script>
document.getElementById('menu-btn').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  const expanded = this.getAttribute('aria-expanded') === 'true';
  menu.hidden = expanded;
  this.setAttribute('aria-expanded', !expanded);
});
</script>

Valor until-found (nuevo)

<details>
  <summary>Read More</summary>
  <div hidden="until-found" id="more-content">
    <p>This content is collapsed but findable by Ctrl+F.</p>
  </div>
</details>
<!-- hidden="until-found" hides visually but allows browser Ctrl+F to find and reveal it -->
<!-- Only supported in Chromium-based browsers currently -->

Comportamiento de los lectores de pantalla

Casos de uso habituales

Conservar el estado de ocultación

const panel = document.getElementById('info-panel');
const key = 'info-panel-visible';

// Restore state:
if (localStorage.getItem(key) === 'false') {
  panel.hidden = true;
}

// On toggle:
document.getElementById('toggle-btn').addEventListener('click', () => {
  panel.hidden = !panel.hidden;
  localStorage.setItem(key, !panel.hidden);
});

Comprobación rápida

Resumen: atributo hidden