Web accessibility and <h> tag

웹 접근성에서 제목 태그(<h1> ~ <h6>)는 단순히 글자 크기를 조절하는 도구가 아니라, 문서의 **'내용 요약'**과 **'위계질서'**를 나타내는 설계도와 같습니다.

스크린 리더 사용자가 웹사이트의 구조를 빠르게 파악할 수 있도록 돕는 핵심 규칙들을 정리해 드릴게요.

---

1. 논리적인 순서 준수 (Skipping Levels 금지)

제목 태그는 반드시 숫자의 순서대로 사용해야 합니다.

• 올바른 예: <h1> 다음에 <h2>, <h2> 다음에 <h3> 순으로 작성합니다.
• 잘못된 예: 디자인이 작아 보인다는 이유로 <h1> 바로 다음에 <h4>로 건너뛰면 안 됩니다.
• 이유: 스크린 리더 사용자는 제목 태그를 통해 문서의 목차를 파악합니다. 중간 단계를 건너뛰면 정보를 누락했다고 생각하거나 구조를 혼동할 수 있습니다.

---

2. <h1> 태그는 페이지당 하나만 사용

<h1>은 해당 페이지의 가장 중요한 주제를 나타냅니다.

• 원칙: 한 페이지(문서)에는 오직 하나의 <h1>만 사용하는 것이 권장됩니다.
• 내용: 보통 사이트의 로고나 현재 페이지의 핵심 제목이 <h1>이 됩니다.
• 효과: 검색 엔진(SEO)이 페이지의 주제를 명확히 파악하는 데 결정적인 도움을 줍니다.

---

3. 디자인과 구조의 분리

가장 흔히 하는 실수가 "글씨를 크게 만들고 싶어서" 제목 태그를 쓰는 것입니다.

• 구조 우선: 태그는 오직 '문서의 위계'를 나타낼 때만 사용하세요.
• 디자인은 CSS로: 특정 글자를 크게 만들고 싶다면 <span>이나 <div> 태그를 쓰고 CSS의 font-size 속성을 이용해야 합니다.
• 반대의 경우: 제목의 의미를 갖는 텍스트인데 디자인상 작게 보여야 한다면, <h2> 태그를 쓰고 CSS로 글자 크기를 줄여야 합니다.

---

4. 빈 제목 태그 금지

내용 없이 태그만 존재하는 것은 지양해야 합니다.

• 금지 사항: <h2></h2>와 같이 비어 있는 태그를 레이아웃의 간격을 벌리기 위한 용도로 사용하지 마세요.
• 이유: 스크린 리더가 빈 제목을 읽게 되어 사용자에게 혼란을 줍니다. 간격 조절은 CSS의 margin이나 padding을 사용하세요.

---

💡 실무자의 시선

실무에서는 시각적으로는 보이지 않지만, 스크린 리더에게만 정보를 전달하기 위해 '숨김 제목'을 쓰기도 합니다.

• IR(Image Replacement) 기법: 디자인상 제목 텍스트가 필요 없더라도, 구조상 꼭 필요한 경우 <h2>를 작성한 뒤 CSS로 화면에서만 숨깁니다(text-indent: -9999px 등).
• 섹션의 시작: 새로운 <section>이나 <article>이 시작될 때는 가급적 그 구역의 주제를 담은 제목 태그를 포함하는 것이 웹 접근성의 정석입니다.

---

 

---