안녕하세요. NeoDahl님 ^ ㅡ ^

질문에 답변드립니다.

hidden 속성 vs display: none

hidden 속성을 설정하는 것은 브라우저 단에서 처리되는 것만으로는 CSS의 display: none 설정과 큰 차이가 없습니다.

하지만 보조 기술(AT, 스크린 리더 등) 처리는 좀 다릅니다. hidden 속성으로 감춰진 콘텐츠에 접근할 수 있는 방법을 제공해주고 있어 감춰진 콘텐츠 일지라 하더라도 참조를 통해 보조 기술에서 읽을 수 있도록 할 수 있습니다. 반면 display: none 스타일이 설정된 요소는 그러하지 못합니다.

정리하면

브라우저 단에서는 차이가 없으나, 접근성 단에서는 차이가 있다.

——————————————————————————————————————————————————————

HTML 5.2 표준 문서에서의 hidden 속성

"5.1. The hidden attribute" 내용을 살펴보면 다음과 같이 hidden 속성에 대해 기술하고 있습니다.

hidden 속성

hidden 속성은 모든 HTML 요소에 설정 가능한 속성으로 Boolean 값을 가집니다.

요소에 hidden 속성이 설정되면 문서의 현재 상태와 관련 없거나, 페이지의 다른 요소가 hidden 속성이 설정된 요소를 재사용할 수 있도록 선언한 것입니다.

유저 에이전트(User Agents)는 hidden 속성이 설정된 요소를 렌더링 해서는 안됩니다. 이 사항은 스타일 레이어를 통해 간접적으로 구현될 수 있습니다.

예를 들어, HTML+CSS 유저 에이전트는 §10 Rendering에 제안된 규칙에 따라 구현할 수 있습니다. 이 말은 반드시(MUST)가 아니라, 기대(expected) 함을 의미합니다.

쉽게 말해 hidden 속성이 설정된 요소는 브라우저에서 렌더링 되면 안된다 말했지만, 어디까지나 반드시가 아니라 그러길 기대한다는 의미입니다.

주의할 점

이 속성은 일반적으로 CSS를 사용해 구현 되므로 CSS 속성에 의해 재정의 될 수 있음에 주의해야 합니다. 즉, hidden 속성이 적용된 요소에 display: block 스타일을 설정하면 화면에 렌더링 됩니다.

<div hidden style="display: block">
  hidden 속성이 설정 되었지만, 이 콘텐츠는 화면에 렌더링 됩니다.
</div>

예제 1

HTML5 표준 문서는 hidden 속성의 사용 예시로 게임 로그인 예제를 제공합니다. ( 개인적으로는 적절치 않은 예제라고 생각합니다)

<h1>게임 예제</h1>

<section id="login">
  <h2>로그인</h2>
  <form>
  ...
  <!-- login() 함수를 통해 사용자가 인증되면 로그인 처리 -->
  </form>
  <script>
  function login() {
    // 로그인 함수 호출 시, 화면 전환
    document.querySelector('#login').hidden = true;
    document.querySelector('#game').hidden = false;
  }
  </script>
</section>

<section id="game" hidden>
  <!-- 로그인 사용자에게 보여질 화면 -->
  ...
</section>

hidden 속성이 설정된 요소에 포함된 모든 것을 스크린리더에서 읽히지 않기 때문에, 내부에 포함된 요소가 아닌 특정 요소만 감추고자할 때는 절대 사용하면 안됩니다.

hidden 속성이 설정된 숨겨진 요소에 하이퍼링크를 걸어서는 안됩니다. 그리고 <label> 요소와 <output> 요소에서 hidden 속성이 설정된 숨겨진 요소를 참조 해서도 안됩니다. 사용자에게 혼란을 야기시키기 때문입니다.

하지만 스크립트로 hidden 속성이 설정된 감춰진 요소를 참조하는 것은 가능합니다.

예제 2

감춰진 요소를 하이퍼링크로 연결하면 안됩니다.

<a href="#non-a11y">접근성 부재</a>

<section id="non-a11y" hidden>...</section>

감춰진 단락 요소를 aria-describedby 속성을 사용해 참조해 사용하면 유용합니다.

<p hidden id="y9-table-summary">테이블 요약(화면에 감춰짐)</p>

<table aria-describedby="y9-table-summary">
  ...
</table>

스크립트를 사용해 그림을 그리는 캔버스 요소에 hidden 속성을 사용하면 그래픽 버퍼를 끌 수 있습니다.

<canvas hidden></canvas>

폼 컨트롤은 form 속성을 사용해 감춰진 <form> 요소를 참조할 수 있습니다.

<form id="hide-form" hidden>
  ...
</form>

<button form="hide-form" type="submit">전송</button>

접근성

Accessibility API는 구조화 된 콘텐츠를 기본적으로 감춘 후, 필요에 따라 보여지게 하는 방법을 제공하는 것이 좋습니다. 감춰진 콘텐츠는 보조 기술(AT) 또는 유저 에이전트 사용 여부와 관계 없이 사용자가 인지하면 안됩니다.

감춰진 콘텐츠는 id 속성을 참조하는 방법으로 보조 기술에서 콘텐츠에 접근할 수 있도록 할 수 있습니다.

이는 보조 기술이 기본적으로 감춰진 콘텐츠를 읽지 않음을 유지하면서, 사용자 요구에 따라 숨겨진 요소에 접근할 수 있게 만들 수 있음을 의미합니다.

제작자는 문서 초기에 사용자, 보조 기술 등에 읽히지 않도록 감춤 처리된 요소를 참조하는 메커니즘을 사용해서는 안됩니다. (보조 기술 등에 읽혀야 할 목적 없이 사용하지 말라는 소리입니다)

일부 보조 기술은 hidden 속성이 설정된 요소를 화면에 보여지도록 만들 때 문제를 일으킬 수 있어, 숨겨진 요소를 참조하는 것은 콘텐츠 감춤의 본질적 의미를 잃을 수도 있습니다.

섹션 내부에 감춰진 요소는 여전히 활성 상태입니다. 즉, 스크립트를 통해 폼 컨트롤이 해당 콘텐츠의 내용을 전송할 수 있습니다.

차이가 있다고 하네요.

위 답변글에 써 있지만 style="display: none;"만 먹이는 것은 그냥 보이지 않는다는 스타일을 지정해서 전체 마크업의 맥락에 포함시키는 것이고 따라서 예컨대 스크린 리더가 내용을 읽어주는 등 다른 미디어에서 처리될 수 있습니다. hidden(="hidden") 속성을 주는 것은 전체 마크업의 맥락에서 배제해 버리는 차원이라고 볼 수 있겠네요.