-
HTML 스킵 네비게이션이란?기타 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의 자식으로 가장 맨 위에 위치하며 페이지에 단 하나 존재한다.
'기타' 카테고리의 다른 글
HTML tabindex로 키보드 탭 선택순서 조정하기 (0) 2023.11.03 HTML 작성 시 안티패턴들 (0) 2023.10.09 MVVM과 MVI에 대해서 (2) 2023.09.21 Jetpack Compose 간단하게 알아보기 (Android에서 React 처럼 선언식으로 UI 작성하기) (0) 2023.09.16 HTTPS, SSL, TLS 정리하기 (0) 2023.09.12