페이지를 탐색할 때 비장애인의 경우는 보고 싶은 콘텐츠를 마우스로 클릭하면 바로 이용할 수 있다.
하지만 시각 장애인의 경우 tab키, 방향키 등을 사용해 스크린리더를 통해 페이지를 이용하기 때문에 페이지의 양이 많다면 원하는 정보를 얻기 위해 많은 tab 키와 방향키를 사용해야한다.

이러한 접근성을 고려하기 위해 스킵 네비게이션을 만들어준다.

스킵네비게이션이란

영역의 많은 링크들을 건너뛰고 바로 콘텐츠를 탐색하기 위해 사용한다.

네이버에서도 tab 키를 누르면 왼쪽 상단에 스킵네비게이션이 나오는 것을 확인할 수 있다.

<!--html 상단에 작성-->
<div id="skip-nav">
        <a href="#contents">본문 바로가기</a>
        <a href="#footer">하단 바로가기</a>
</div>

/*스타일은 알아서*/
#skip-nav {
    position: relative;
    z-index: 1000;
}
#skip-nav a {
    position: absolute;
    top: -30px;
    left: 0;
    width: 200px;
    background: #333;
    text-align: center;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 26px;
    color: #fff;
    white-space: nowrap;
}
#skip-nav a:focus {
    top: 0;
}

주의사항

1. 스킵네비게이션의 위치는 body 태그 맨 처음으로 위치해야한다.
   스킵 네비게이션의 목적이 네비게이션 영역을 스킵하기 위해 혹은 페이지 초입에서 콘텐츠로 바로 접근하기 위함인데 네비게이션 영역 뒤나 콘텐츠 영역 뒤에 위치하면 원래 목적이 사라지기 때문이다.

2. 스킵 네비게이션은 처음 한 번만 사용한다.
   시각 장애인 입장에서 과한 스킵 네비게이션은 페이지의 구조와 페이지 이용을 더 복잡하게 만든다.