Completion 0%

Education > PC/모바일 웹 접근성 체크리스트

7.1.3 주요 콘텐츠 블록의 제목을 <h1>~<h6>로 마크업했는가?

장애 유형

장애 유형
전맹, 저시력
오류 설명
  • 스크린리더, VoiceOver, TalkBack에서는 머리말 역할의 헤딩 태그 <h1> ~ <h6>으로만 이동하는 기능이 있고 자주 사용됨.
  • 헤딩태그가 없거나 해딩 태그가 너무 많으면 시각장애 환경에서는 웹 페이지 내용 파악에 매우 어려움을 느낌.

오류 유형

주요 콘텐츠 블록의 제목이 <h1>~<h6>로 마크업되지 않음

오류 예시
<h1>~<h6>이 전혀 제공되지 않음
해결 방법
웹 페이지의 내용을 대표하는 제목 및 주요 콘텐츠 블록의 제목을 <h1>~<h6>으로 제공
오류 예시
웹 페이지를 대표하는 제목이 <h1>~<h6>으로 제공되고 있지 않음
참고 이미지
해결 방법
웹 페이지를 대표하는 제목('신청사 찾은 박원순 "시장실은 몇 평이에요?"') 및 주요 콘텐츠 블록의 제목을 <h1>~<h6>으로 제공

모바일 환경에서 주요 콘텐츠 블록의 제목이 <h1>~<h6>로 제대로 마크업 되지 않음

오류 예시
뉴스가 선택 된 모바일 환경에서 <h1>이 뉴스서비스로 잘못 제공되었으며, 다른 주요 콘텐츠 블록의 제목이 <h1>~<h6>로 전혀 마크업 되지 않았음
참고 이미지
해결 방법
웹 페이지의 내용을 대표하는 제목 및 주요 콘텐츠 블록의 제목을 <h1>~<h6>으로 올바르게 제공

바른 예시

주요 콘텐츠 블록의 제목을 h2로 제공하고 있음

참고 이미지

화면에는 표시되지 않지만 콘텐츠의 바른 이해를 위해 숨김 제목을 제공하고 있음.

참고 이미지

주의 사항

  • 너무 많은 헤딩은 오히려 페이지 파악에 어려우므로 핵심 콘텐츠 블록에만 헤딩을 사용해야 함.

평가 방법

웹 페이지를 대표하는 제목이 <h1>~<h6>으로 제공되는지 확인

평가 도구
N-WAX
평가 방법
"7.1.3 콘텐츠 블록 제목"에서 웹 페이지를 대표하는 제목이 <h1>~<h6>으로 제공되어 있는지 확인
참고 이미지

모바일 환경에서 웹 페이지를 대표하는 제목이 <h1>~<h6>으로 제공되는지 확인

평가 도구
User Agent Switcher(파이어폭스 부가기능), N-WAX
평가 방법
Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX를 활용해 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법