•
67.5 퍼센트의 화면 낭독기 이용자들이 헤딩을 기반으로 사이트를 이동한다.
•
모든 헤딩이 서브 헤딩을 가지고 있어야 하는건 아니지만 순서는 맞아야한다.
◦
hierarchy가 안맞거나 순서가 맞지않을시 - 화면 낭독기 이용자들에게 많은 혼동, 검색엔진에게도 낮은 SEO 점수를 받는다.
◦
h1 (h1 태그는 가급적 페이지당 하나씩만 존재해야 한다.)
◦
h1
▪
h2
•
h3
▪
h2
•
총 6개의 헤딩 중 꼭 필요하지 않은 경우에는 한 페이지에는 3개 depth 이상의 헤딩을 사용하지 않도록 주의해야한다. 깊은 헤딩 레벨을 가지고 있는 문서는 이용자들이 문서를 읽기 힘들며 접근성 기술을 사용하는 이용자들 또한 페이지를 이용하기 어렵다. 4개 이상의 헤딩 깊이를 가지고 있는 문서의 경우 문서 자체를 여러개로 나누는 것을 추천한다.
•
이용자는 웹 페이지에 처음 접근했을 때, 연관된 내용을 찾기위해 빠르게 화면을 스캔한다. 이때 이용자들은 주로 헤딩을 이용하여 읽을 부분을 정한다. 몇초내에 유용한 정보를 찾지 못할 경우 이용자들은 다른 페이지로 이동 하게 된다. → 한번에 찾아볼 수 있는 내용을 알려주자.
•
Search engine은 헤딩을 중요한 키워드로 간주. → 제대로된 헤딩의 중요성
누구에게 필요한가?
•
모든 이용자들, 대부분의 비장애인 이용자들은 heading을 이용해 자신이 원하는 컨텐츠를 찾는다. 명확한 heading이 없을 경우 사이트 이용자들은 frustrating
•
키보드 이용자들
•
screen reader 이용자들
•
학습 장애를 가진 장애인들(”단기 기억 장애”)
Off-screen headers
<h2 class="screenreader-only">This is my title</h2>
HTML
복사
.screenreader-only {
clip-path: inset(100%);
clip: rect(1px 1px 1px 1px); /* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap; /* added line */
width: 1px; }
CSS
복사
•
디자인 상으로는 헤더가 없어도 문제가 없는 케이스가 존재한다. (또는 디자이너가 명시적인 헤더를 싫어하는 경우), 디자인적인 요소로 섹션을 구분한 후 헤딩을 생략하는 경우.
•
화면에 실제로 보이지 않지만 HTML 구조 상에는 존재하는 헤딩
•
하지만 화면 낭독기 사용자에게 헤딩은 필수임, 문맥상 훨씬더 많은 정보를 제공 + 페이지 이동이 훨씬 쉬워진다.
•
위의 스타일 적용 시 디자인 적으로는 존재하지 않지만 화면 낭독기 이용 자들에게는 정보를 제공할 수 있음
section과 heading의 연결
<header>
<nav aria-labelledby="primary-navigation">
<h2 id="primary-navigation">Primary navigation</h2>
<!-- navigation items -->
</nav>
</header>
HTML
복사
•
헤딩과 내용물이 연결되어있지 않은경우 브라우저 자체의 화면 낭독기나 다른 화면 낭독 소프트웨어가 자동으로 문맥에 맞는 헤딩과 내용을 연결해준다. 하지만 명시적이면 화면 낭독기 간 차이를 줄일 수 있다.
