제목 및 랜드마크

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로 만들고 싶을 수 있습니다. 이는 브라우저의 기본 스타일과 일치할 수 있지만 스크린 리더 사용자에게 전달되는 윤곽선을 손상시킵니다.

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, 뉴욕 타임스, 위키백과와 같은 많은 인기 사이트에 건너뛰기 링크가 포함되어 있습니다. 해당 페이지를 방문한 다음 키보드의 TAB 키를 몇 번 누릅니다.

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