큰 페이지를 위한 여러 건너뛰기 링크

작은 페이지에서는 건너뛰기 링크 하나면 충분합니다. 하지만 복잡한 레이아웃에는 반복되는 영역이 여러 개 있고, 사용자는 main뿐 아니라 다른 곳으로도 이동하려 할 수 있습니다.

사용자는 언제나 문서로 가려는 것이 아니라 검색창, 주요 탐색 메뉴 또는 푸터로 가려 할 수도 있습니다. 실제로 자주 찾는 목적지를 제공하세요.

일반적인 구성은 콘텐츠로 건너뛰기, 탐색으로 건너뛰기, 검색으로 건너뛰기입니다. 목록 자체가 번거로워지지 않도록 짧게 유지하세요.

우회 링크를 작은 nav 영역으로 감싸세요. 그러면 페이지 상단에서 하나의 일관된 바로 가기 모음으로 읽힙니다.

래퍼에 'Skip links'와 같은 aria-label을 지정하세요. 이름이 없으면 한 페이지에 있는 두 개의 nav가 스크린 리더 사용자에게 똑같이 들립니다.

모든 바로 가기에는 도착할 실제 id가 필요합니다. '검색으로 건너뛰기'는 검색 영역을, '탐색으로 건너뛰기'는 메뉴를 가리키는 식입니다.

앞서와 마찬가지로 각 대상에 tabindex -1을 추가하세요. 연결된 링크를 활성화했을 때 포커스가 안정적으로 이동할 수 있습니다.

모든 항목에 바로 가기를 추가하려는 생각을 참으세요. 우회 링크가 너무 많으면 Tab으로 지나가야 하는 또 하나의 반복 콘텐츠 블록이 됩니다.

잘 구성된 랜드마크만으로도 스크린 리더 사용자는 영역에서 영역으로 이동할 수 있다는 점을 기억하세요. 추가 건너뛰기 링크는 주로 시력이 있는 키보드 사용자를 위한 것입니다.

바로 가기를 합리적인 순서로 나열하세요. 대부분의 사용자가 방문한 목적이 콘텐츠이므로 보통 콘텐츠를 먼저 둡니다. 드물게 사용하는 항목은 마지막에 배치하세요.

모음 전체를 Tab으로 이동하며 각 링크를 활성화하세요. 매번 포커스가 한 요소도 어긋나지 않고 올바른 영역에 도착하는지 확인하세요. ✅

큰 페이지에서는 레이블이 있는 nav에 몇 개의 우회 링크를 제공하고, 각 링크에 포커스 가능한 대상을 하나씩 지정하세요. 모음은 짧게 유지하고 콘텐츠를 먼저 배치하세요. 🎯