이 페이지는 Cloud Translation API를 통해 번역되었습니다.

제목 및 랜드마크

Rob Dodson

스크린 리더에는 제목 간이나 특정 랜드마크 영역으로 빠르게 이동하는 명령어가 있습니다. 실제로 스크린 리더 사용자를 대상으로 실시한 설문조사에서 사용자가 제목을 탐색하여 낯선 페이지를 가장 많이 탐색하는 것으로 나타났습니다.

올바른 제목과 랜드마크 요소를 사용하면 보조 기술 사용자를 위해 사이트의 탐색 환경을 크게 개선할 수 있습니다.

제목을 사용하여 페이지 개요 설정

h1~h6 요소를 사용하여 페이지의 구조적 윤곽선을 만듭니다. 제목을 통해 탐색하는 모든 사용자가 머릿속에 떠오르는 그림을 형성할 수 있도록 페이지의 골격이나 스캐폴드를 만드는 것이 목표입니다.

일반적인 방법은 페이지의 기본 헤드라인이나 로고에 단일 h1를 사용하고, 주요 섹션을 지정하는 데 h2 요소를 사용하고, 지원 하위 섹션에 h3 요소를 사용하는 것입니다.

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

제목 수준을 건너뛰지 마세요.

개발자는 종종 디자인에 밀접하게 일치하는 브라우저의 기본 스타일을 사용하기 위해 제목 수준을 건너뜁니다. 이는 윤곽선 모델을 손상시키기 때문에 안티패턴으로 간주됩니다.

제목에는 브라우저의 기본 글꼴 크기를 사용하는 대신 자체 CSS를 사용하고 수준을 건너뛰지 마세요.

예를 들어 이 사이트에는 '뉴스'라는 섹션과 그 뒤에 두 개의 광고 제목이 있습니다.

헤드라인, 히어로 이미지, 하위 섹션으로 구성된 뉴스 사이트

'IN THE NEWS' 섹션 제목은 h2일 수 있고 지원 헤드라인은 모두 h3 요소가 될 수 있습니다.

'IN THE NEWS'의 font-size는 헤드라인보다 작기 때문에 첫 번째 뉴스의 헤드라인을 h2로, 'IN THE NEWS'의 헤드라인을 h3으로 만들고 싶을 수 있습니다. 이렇게 하면 브라우저의 기본 스타일과 일치하더라도 스크린 리더 사용자에게 전달되는 윤곽선이 손상됩니다.

참고: 직관적이지 않을 수 있지만 시각적으로 h3 및 h4 요소가 h2 또는 h1 요소보다 큰지 여부는 중요하지 않습니다. 중요한 것은 요소와 요소의 순서를 통해 전달되는 윤곽선입니다.

Lighthouse를 사용하여 페이지에서 제목 수준을 건너뛰는지 확인할 수 있습니다. 접근성 감사 (Lighthouse > 옵션 > 접근성)를 실행하고 제목이 레벨을 건너뛰지 않음 감사의 결과를 찾습니다.

탐색을 돕기 위해 랜드마크 사용

main, nav, aside와 같은 HTML5 요소는 랜드마크 또는 스크린 리더가 이동할 수 있는 페이지의 특수 영역 역할을 합니다.

div에 의존하는 대신 랜드마크 태그를 사용하여 페이지의 주요 섹션을 정의하세요. 랜드마크가 너무 많으면 지나치지 않을 수 있으므로 지나치지 않도록 주의하세요. 예를 들어 3개 또는 4개가 아닌 하나의 main 요소만 유지합니다.

Lighthouse는 사이트를 수동으로 감사하여 'HTML5 랜드마크 요소가 탐색 개선을 위해 사용'되는지 확인할 것을 권장합니다. 이 명소 요소 목록을 사용하여 페이지를 확인할 수 있습니다.

건너뛰기 링크로 반복적인 콘텐츠 우회

많은 사이트의 경우 헤더에 반복적인 탐색이 포함되어 있어 보조 기술을 이용한 탐색이 성가실 수 있습니다. 건너뛰기 링크를 사용하여 사용자가 이 콘텐츠를 건너뛸 수 있도록 합니다.

건너뛰기 링크는 DOM에서 항상 포커스 가능한 첫 번째 항목인 오프스크린 앵커입니다. 일반적으로 페이지의 주요 콘텐츠로 연결되는 인페이지 링크를 포함합니다. 이는 DOM의 첫 번째 요소이므로 보조 기술에서 단 하나의 작업만 수행하면 요소에 포커스를 맞추고 반복 탐색을 우회할 수 있습니다.

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

GitHub, The NY Times, Wikipedia 등 다수의 인기 사이트에는 모두 건너뛰기 링크가 포함되어 있습니다. 해당 페이지를 방문하여 키보드의 TAB 키를 몇 번 눌러 보세요.

Lighthouse를 사용하면 페이지에 건너뛰기 링크가 포함되어 있는지 확인할 수 있습니다. 접근성 감사를 다시 실행하고 페이지에 제목, 건너뛰기 링크 또는 랜드마크 영역이 포함되어 있음 감사 결과를 찾습니다.

참고: 기술적으로는 사이트에 h1-h6 요소 또는 HTML5 랜드마크 요소가 포함되어 있는 경우에도 이 테스트에 통과합니다. 하지만 테스트 요구사항이 모호하지만 가능하다면 통과하는 것이 좋습니다.