기타
HTML 스킵 네비게이션이란?
citron031
2023. 9. 28. 22:22
네이버 웹 페이지의 HTML요소를 살펴보면, body 최상단데 id가 u_skip인 div 태그가 있다.
이 div 내부에 a태그 여러개가 삽입이 되어있는데, 각 태그는 서비스들의 바로가기가 연결되어 있다.
또한 특이사항으로, 이 a태그들은 보이지 않게 설정되어 있다.
position: absolute;
top: -30px;
left: 0;🌊 위와 같은 CSS 스타일이 적용되어 뷰포트에 보이지 않는다.
이런 구조는 어째서 존재하는 것일까?
ChatGPT에 물어본 결과, 위와 같은 구조는 스킵 네비게이션 영역으로, 웹 접근성을 위해서 존재하는 바로가기 링크라고 한다.
스킵 네비게이션이 존재하는 이유는 다음과 같다.
- 스크린 리더 사용자들이 내용을 건너뛸 수 있게 바로가기 기능을 제공한다.
- 키보드를 사용하여 웹 페이지를 사용할 때 키보드만으로 중요 내용으로 바로 이동할 수 있게 해준다.
- 바로가기 링크를 제공함으로써 웹 페이지는 접근성 가이드라인을 따르고, 장애인과 비장애인 모두에게 더 나은 경험을 제공한다.
즉, 스킵 네비게이션은 사용자가 웹 페이지를 탐색할 때, 반복적인 내용의 탐색을 피하고, 원하는 영역으로 바로 이동할 수 있게끔 도와주는 구조이다.
<body>
<div class="skip_nav">
<a href="#main-content">본문 바로가기</a>
<a href="#writer">글쓰기 바로가기</a>
<a href="#list">목록 바로가기</a>
</div>
...
</body>
일반적으로 스킵 네비게이션은 body의 자식으로 가장 맨 위에 위치하며 페이지에 단 하나 존재한다.