Day 5) 적절한 제목 계층 구조로 접근성 높이기

🎄  A11y Advent Calendar (번역) 5일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

제목 계층 구조는 페이지의 heading 요소로 정의되는 컨텐츠 구조를 의미합니다. 이는 웹 접근성에서 중요한 역할을 하며, 특히 스크린 리더 사용자가 웹사이트를 탐색할 때 주요 방법 중 하나로 활용됩니다.

 

2014년에 진행된 WebAim 설문조사에 따르면, 스크린 리더 사용자의 약 3분의 2가 긴 웹 페이지에서 정보를 찾기 위해 제목을 먼저 스캔한다고 응답했습니다. 이처럼 명확하고 체계적인 제목 구조는 정보 접근성을 높이는 데 필수적입니다.

 

예를 들어 이 문서에서는 글 제목이 <h1>이고 그 뒤에 여러 개의 <h2>가 있습니다. 이 중 하위 섹션이 필요한 부분이 있다면 <h3> 등이 있을 것입니다. 개요는 다음과 같습니다:

1. A11y Advent Calendar
    1.1. Day 1: 접근성이란?
    1.2. Day 2: 접근성 평가하기
    1.3. Day 3: 컨텐츠 숨기기
    1.4. Day 4: 그 자체로 설명 가능한 링크
    1.5. Day 5. 문서 개요

 

제목 구조의 적합성을 확인하려면 지난 시간에 언급했던 브라우저 확장 프로그램을 사용할 수 있습니다. 이 확장 프로그램에는 제목을 계층 구조로 정리해 보여주는 기능이 포함되어 있습니다.

 

확인 시 주의할 점은 다음과 같습니다

 

1. 제목이 올바른 순서로 배치되었는지

2. 계층 구조가 적절한지

3. 건너뛴 계층이 없는지

 

과거에는 아래와 같이 <section>과 같은 요소를 활용해 모든 루트가 <h1>로 돌아가는 하위 구조 시스템을 제안하는 논의가 있었습니다. 하지만 이는 어떤 브라우저에서도 구현되지 않았고, 보조 기술에서도 지원되지 않는 상태입니다. 따라서 현재로서는 논의의 가치만 남아있습니다.

<section>
  <h1>문서 제목</h1>
  <section>
    <h1>주요 섹션 1</h1>
    <section>
      <h1>하위 섹션 1.1</h1>
    </section>
  </section>
  <section>
    <h1>주요 섹션 2</h1>
  </section>
</section>

 

결론적으로, 적절한 제목 계층을 유지하는 것이 가장 중요합니다. 이를 통해 문서의 접근성을 높이고, 사용자 경험을 개선할 수 있습니다. 문서 개요의 역사와 제안 알고리즘에 대한 자세한 내용은 Amelia Bellamy-Royds의 문서 개요 딜레마를 참고하시면 좋을 것 같습니다.

 

웹 접근성을 고려한 제목 계층은 단순히 HTML 문법을 올바르게 사용하는 것을 넘어, 정보 전달의 명확성과 사용자 경험의 개선으로 이어집니다. 이번 글에서 다룬 문서 개요와 제목 계층의 중요성을 통해, 자신의 웹사이트나 프로젝트에서 이 원칙들을 어떻게 적용할 수 있을지 고민해 보시면 좋을 것 같아요 :)

 

다음 단계로 넘어가기 전에 이 질문을 던져보시길 바랍니다. 

 

• 내 페이지의 제목 구조는 적절한가?

• 제목 계층이 사용자와 보조 기술 모두에게 유용하게 작동하고 있는가?

• 제목 구조를 개선할 수 있는 점은 무엇인가?

 

6일차에서는 또 다른 흥미로운 주제를 다룰 예정이니 기대해 주세요. 🙇‍♀️