제대로 작동하는 건너뛰기 링크 만들기

제대로 작동하는 건너뛰기 링크에는 두 부분이 있습니다. 어딘가로 연결되는 앵커와 실제로 도착할 수 있는 대상입니다. 둘 다 있어야 합니다.

앵커는 href가 프래그먼트인 일반 링크입니다. 예를 들어 해시 기호 뒤에 id가 오는 형태입니다. 사용자가 클릭하면 브라우저에 이동할 위치를 알려 줍니다.

대상은 사용자가 도달하려는 요소입니다. id를 지정해 href의 프래그먼트가 가리킬 곳을 마련하세요.

건너뛰기 링크가 main 랜드마크를 가리키게 하세요. main은 페이지의 고유한 콘텐츠를 담는 하나의 영역이므로 사용자가 도착하려는 위치에 정확히 해당합니다.

예전부터 있던 함정이 있습니다. 링크가 페이지를 스크롤하지만 포커스는 링크에 그대로 남는 경우입니다. 그러면 다음 Tab 키를 눌렀을 때 사용자가 다시 탐색 메뉴로 돌아갑니다.

해결 방법은 포커스가 실제로 그곳으로 이동하게 하는 것입니다. tabindex를 -1로 설정하면 건너뛰기 링크를 통해 대상이 포커스를 받을 수 있습니다.

-1은 스크립트로 포커스할 수 있고 링크 대상이 되지만 Tab 순서에는 포함되지 않음을 뜻합니다. 따라서 다른 사용자의 Tab 이동에 불필요한 정지 지점이 생기지 않습니다.

오늘날 대부분의 브라우저는 프래그먼트 대상으로 포커스를 자동으로 이동시킵니다. 하지만 tabindex -1을 추가하면 어디서나 작동하도록 보장할 수 있으므로 그대로 유지하세요.

페이지를 새로 불러온 뒤 Tab을 한 번 누르고 Enter를 누르세요. 포커스 표시가 콘텐츠로 이동하고, 다음 Tab 키를 누르면 콘텐츠 안에서 계속 이동해야 합니다. ✅

명확하게 표시하세요. 주 콘텐츠로 건너뛰기라고 쓰면 어떤 일이 일어나는지 정확히 알려 줍니다. 모호한 '건너뛰기'나 아이콘보다 훨씬 낫습니다.

앵커를 헤더보다 앞선 body의 첫 번째 자식으로 배치하세요. 그러면 페이지의 다른 요소보다 먼저 Tab으로 도달할 수 있습니다.

앵커를 main의 일치하는 id에 연결하고, tabindex를 -1로 설정한 다음 Tab 키로 테스트하세요. 이것이 실제로 작동하는 건너뛰기 링크입니다. 🎯