hidden 속성

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은 불리언 속성입니다

<!-- 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, display:none, 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 */

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는 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과 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>

표시 및 숨기기 패턴

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

until-found 값(새 기능)

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

화면 낭독기 동작

일반적인 사용 사례

숨김 상태 유지하기

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);
});

빠른 확인

복습: hidden 속성