스크린 리더에는 제목 간 또는 특정 랜드마크 영역 간에 빠르게 이동하는 명령어가 있습니다. 실제로 스크린 리더 사용자 설문조사에 따르면 스크린 리더 사용자는 제목을 탐색하여 익숙하지 않은 페이지를 가장 자주 탐색합니다.
올바른 제목과 랜드마크 요소를 사용하면 보조 기술 사용자의 사이트 탐색 환경을 크게 개선할 수 있습니다.
제목을 사용하여 페이지 개요 작성
h1~h6 요소를 사용하여 페이지의 구조적 개요를 만듭니다. 목표는 제목으로 탐색하는 사람이 머릿속에 그림을 그릴 수 있도록 페이지의 스켈레톤이나 스캐폴드를 만드는 것입니다.
일반적으로 페이지의 기본 헤드라인이나 로고에는 단일 h1를 사용하고, 주요 섹션에는 h2 요소를 사용하며, 지원 하위 섹션에는 h3 요소를 사용합니다.
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
제목 수준을 건너뛰지 않음
개발자는 디자인과 거의 일치하는 브라우저의 기본 스타일을 사용하기 위해 제목 수준을 건너뛰는 경우가 많습니다. 이는 개요 모델을 깨뜨리므로 안티패턴으로 간주됩니다.
제목에 브라우저의 기본 글꼴 크기를 사용하는 대신 자체 CSS를 사용하고 수준을 건너뛰지 마세요.
예를 들어 이 사이트에는 '뉴스'라는 섹션이 있고 그 뒤에 두 개의 헤드라인이 있습니다.
섹션 제목 '최신 뉴스'는 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를 사용하면 페이지에 건너뛰기 링크가 포함되어 있는지 확인할 수 있습니다. 접근성 감사를 다시 실행하고 페이지에 제목, 건너뛰기 링크 또는 랜드마크 영역이 포함되어 있습니다 감사 결과를 확인합니다.