사이트 전반에 걸쳐 사용될 때
<header>는 landmark로써 배너와 같은 역할을 합니다. 즉, 사이트의 전체적인 머리말(헤더)을 정의할 때 사용됩니다. 하지만
<header>가 sectioning content 내부에 포함될 경우, <header>는 더 이상 "landmark" 역할을 하지 않습니다. 페이지 전역의 <header>
- 사이트의 전체 헤더를 정의할 때 사용합니다.
- 보통 사이트의
로고,네비게이션 바,검색 창등을 포함합니다.
- 이 경우 접근성 트리에서는 사이트의 전역 헤더로 정의됩니다.
섹션 내의 <header>
<header>는 해당 섹션의 헤더 역할을 합니다.
- 일반적으로 섹션의 제목(h1~h6) 또는 서브헤딩을 포함할 수 있지만, 필수는 아닙니다.
- 이 경우,
<header>는 해당 섹션의 헤더로 접근성 트리에서 정의됩니다.
각각의 섹션에 대해
<header>를 사용하여 섹션 제목을 정의하는 것이 좋습니다. 이렇게 하면 웹사이트의 구조가 더 명확하고, 접근성 측면에서도 유리합니다.<article> article의 header <header> <h1>오늘의 여행 이야기</h1> <p>2025년 1월 24일, 제주도 여행</p> </header> <section> section1의 header <header> <h2>여행 준비</h2> </header> <p>여행을 떠나기 전에 필요한 준비물들을 정리했어요...</p> </section> <section> section2의 header <header> <h2>첫 번째 여행지: 한라산</h2> </header> <p>한라산에 올라서 본 경치가 정말 아름다웠어요...</p> </section> </article>
접근성 트리? (Accessibility Tree)
접근성 트리는 웹 페이지의 콘텐츠를 장애를 가진 사용자에게 제공하기 위한 구조화된 데이터입니다. 주로
스크린 리더와 같은 접근성 도구들이 이 트리를 사용하여 웹 페이지를 읽어주거나, 사용자가 페이지를 탐색할 때 페이지의 구조와 콘텐츠를 잘 이해할 수 있도록 돕습니다.페이지의 시각적 구조나 스타일을 해석하는 것이 아니라, HTML의 의미적 구조에 따라 콘텐츠를 순차적으로 읽고 안내합니다.
웹 페이지의 HTML 요소들은
시맨틱(의미 있는) 태그로 구성되어 있으며, 이 태그들이 어떻게 구성되어 있는지에 따라 접근성 트리가 다르게 만들어집니다.<header>태그가 페이지에 있으면, 접근성 트리에서는 "전역 헤더" 역할을 명시적으로 나타냅니다.
<h1>태그는 제목을 나타내므로, 접근성 트리에서는 이를 페이지의 주요 제목으로 식별할 수 있습니다.
<nav>는 네비게이션 영역을 정의하며, 접근성 트리에서는 탐색 가능한 링크 모음으로 인식됩니다.