제목 구조 (heading)

모든 화면은 하나의 h1과 논리적인 제목 구조(h1 › h2 › h3 …)를 가집니다. 스크린리더 사용자는 제목을 기준으로 페이지를 훑고 이동하므로, 제목이 없으면 목록과 섹션 탐색이 사실상 불가능합니다.

---

title과 h1의 역할은 다르다

• 페이지가 로드되면 스크린리더는 <title> 을 가장 먼저 읽습니다. “지금 어느 사이트·페이지에 있는가”를 알리는 신호이며, 페이지마다 고유하게 짓습니다.
• <h1> 은 그 페이지의 주제를 담습니다. <title>이 위치를 알리므로, h1은 이 화면이 무엇에 대한 것인지를 나타냅니다.

---

로고를 h1로 쓰지 않는다

로고나 사이트명을 h1으로 삼으면 모든 페이지의 h1이 동일해져, 어느 페이지인지 구분할 정보가 사라집니다. 로고는 h1이 아니라 홈으로 가는 링크로 둡니다.

---

보이는 제목이 없어도 제목은 있어야 한다

디자인상 큰 제목 텍스트가 없는 화면(갤러리, 앱 UI, 대시보드 등)에서도 제목 구조는 필요합니다. 이때는 a11y_hidden(global.css)으로 시각적으로만 숨기고, 접근성 트리에는 남깁니다. display:none·visibility:hidden은 보조 기술에서도 제거되므로 사용하지 않습니다.

---

레벨을 건너뛰지 않는다

제목 레벨은 순서대로 내려갑니다(h1 → h2 → h3). h1에서 h3으로 건너뛰지 않습니다. 카드·목록 항목의 이름을 제목(h2/h3)으로 마크업하면 반복 콘텐츠를 제목으로 탐색할 수 있습니다.

<title>Sites · Mobbin</title>
...
<main class="page_discover">
  <h1 class="a11y_hidden">Sites</h1>
  <h2 class="a11y_hidden">Latest sites</h2>
  <ul>
    <li><a href="#"><h3 class="i_name">Farm Minerals</h3> …</a></li>
  </ul>
</main>

---

점검

• 페이지에 h1이 정확히 하나 있는가
• 제목 레벨이 건너뛰지 않는가
• 보이는 제목이 없다면 a11y_hidden으로 넣었는가
• <title>이 페이지마다 고유한가