[HTML / 시맨틱 마크업] 제목과 문단 (Headings & Paragraphs)

 

제목 (Headings)

📌 <h1></h1>, <h2></h2>, <h3></h3>, ..., <h6></h6>

 

 

접근성 고려사항

1. 탐색

 

• 스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어 넘으며 페이지 콘텐츠를 빠르게 파악하는 것이다.
• 따라서 제목 순서를 뛰어 넘으면 (<h1> 다음으로 <h4> 사용 등) 중간에 빠진 제목이 어디있는지 알 수 없으므로 사용자의 혼란을 야기할 수 있다.

 

 

 

2. 중첩

 

• 하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있다.
• 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 돕는다.
• 이때, 중첩 제목에서 하위 구획을 닫을 땐 제목 단계를 위로 건너뛸 수 있다.

 

 

 

3. 구획 콘텐츠 레이블

• 스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것이다.
• 콘텐츠 구획에는 aria-labelledby와 id 특성을 함께 사용해 이름(레이블)을 붙일 수 있으며 레이블은 현재 구획의 목적을 간결하게 설명해야 한다.
• 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있다.

 

 

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">주 탐색창</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">하단 탐색창</h2>
    <!-- navigation items -->
  </nav>
</footer>

 

위의 예제에서 스크린 리더는 두 개의 <nav> 구획이 있으며, 하나는 '주 탐색창', 다른 하나는 '하단 탐색창' 이라고 불린다는 사실을 표현한다. 레이블을 지정하지 않았다면 사용자가 각 <nav> 요소의 콘텐츠를 모두 분석해 목적을 알아내야 했을 것이다.

 

 

 

---

문단 (Paragraphs)

📌 <p></p>

 

• 하나의 문단을 나타내며, HTML에서의 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다.
• 브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리한다. 첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 진행할 수 있다.

 

 

 

접근성 고려 사항

• 콘텐츠를 문단으로 나누면 페이지의 접근성을 높인다.
• 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있다.
• 빈 <p> 요소를 사용해 문단 사이의 여백을 추가하면 문단의 존재는 있지만 더 읽을 내용이 없기 때문에, 스크린 리더 사용자가 혼란을 느낄 수 있다.

👉🏼 문단 사이의 여분 공간이 필요하다면 margin (문단 다음 여백을 늘림) 등의 CSS 속성을 통해 적용한다.

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements

<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/p

<p> - HTML: Hypertext Markup Language | MDN

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME