스크린 리더에는 제목 사이 또는 특정 제목으로 빠르게 이동할 수 있는 명령어가 있습니다. 있습니다. 실제로 스크린 리더 사용자 대상 설문조사 웹 페이지를 탐색하는 방법을 통해 낯선 페이지를 탐색하는 경우가 있습니다.
올바른 제목과 랜드마크 요소를 사용하면 보조 기술 사용자를 위해 사이트의 탐색 환경을 개선합니다.
제목을 사용하여 페이지의 윤곽을 잡으세요.
h1~h6 요소를 사용하여 페이지의 구조적 윤곽선을 만듭니다. 목표는
이를 통해 다른 페이지를 탐색하거나 탐색하거나
제목은 정신적 그림을 형성할 수 있습니다
일반적인 방법은 기본 헤드라인이나 로고에 하나의 h1을(를) 사용하는 것입니다.
페이지, 주요 섹션을 지정하는 h2 요소 및 지원 하위 섹션에 h3 요소 포함:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
제목 수준 건너뛰기 안함
개발자는 종종 제목 수준을 건너뛰어 디자인에 가깝습니다. 이 패턴은 윤곽선 모델입니다.
제목에 브라우저의 기본 글꼴 크기 조절에 의존하는 대신 레벨을 건너뛰지 마세요.
예를 들어 이 사이트에는 'IN THE NEWS' 섹션 뒤에 2개의 헤드라인:
섹션 제목인 'IN THE NEWS'는 h2일 수 있으며, 이를 뒷받침하는
광고 제목 모두 h3 요소가 될 수 있습니다.
'IN THE NEWS'의 font-size 광고 제목보다 작은 경우
첫 번째 기사의 헤드라인을 h2로 만들고
'뉴스에서' h3입니다. 브라우저의 기본 스타일과 일치할 수도 있지만
스크린 리더 사용자에게 전달되는 윤곽선이 깨집니다.
Lighthouse를 사용하여 페이지에서 제목 수준을 건너뛰는지 확인할 수 있습니다. 먼저 접근성 감사 (Lighthouse > 옵션 > 접근성) 및 Look 제목에서 레벨을 건너뛰지 않음 감사 결과 중 하나를 사용하세요.
랜드마크를 사용하여 탐색 지원
main, nav, aside 등의 HTML5 요소가 랜드마크 역할을 하거나
페이지에서 스크린 리더가 이동할 수 있는 특수 영역
랜드마크 태그를 사용하여 페이지의 주요 섹션을 정의하세요.
div 랜드마크를 너무 많이 사용하면 지나치게 많아질 수 있으니 너무 과도하게 사용하지 않도록 주의하세요.
압도적이었습니다. 예를 들어 3 대신 main 요소 하나만 사용하세요.
4.
Lighthouse에서는 사이트를 수동으로 감사하여 'HTML5 랜드마크 요소를 사용하여 탐색을 개선하는 데 사용됩니다." 이 목록을 사용해 요소 페이지를 확인합니다.
건너뛰기 링크로 반복되는 콘텐츠 우회
많은 사이트의 헤더에 반복적인 탐색이 포함되어 있으면 탐색합니다. 건너뛰기 링크를 사용하여 사용자가 이 콘텐츠를 우회할 수 있도록 하세요.
건너뛰기 링크는 화면에서 항상 첫 번째 포커스 가능 항목인 오프스크린 앵커로, 있습니다. 일반적으로 페이지의 주요 콘텐츠로 연결되는 인페이지 링크를 포함합니다. 왜냐하면 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 등 많은 인기 사이트
시간대, 위키백과 모두
건너뛰기 링크를 포함할 수 없습니다. 해당 위치로 이동하여 TAB 키를 누르세요.
몇 번 누릅니다
Lighthouse를 사용하면 페이지에 건너뛰기 링크가 포함되어 있는지 확인할 수 있습니다. 먼저 접근성 감사를 다시 실행하여 페이지에 제목, 건너뛰기 링크, 랜드마크 영역 감사에서 사용할 수 있습니다.