기본 중의 기본인, Skip Navigation

가장 기본이 되는, skip nav에 대해서 정리해 볼까 한다.

스킵네비를 왜 쓰는가? 부터가 기본이 되어야되지 않을까? 

가장 큰 이유는 사용자 편의 및 웹접근성 이다.

 

웹접근성이라고 하면 우리나라에서는 장애인에 의한 편의 고려 라고 생각하는데.

더 큰 범위에서는 정상적으로 쓸 수 없는 상황에 대해서 편의를 고려한다고 생각하는게 더 맞지않을까 싶다.

 

가령 내가 마우스가 고장났다면?

또는 키보드를 못쓴다면? 

 

여기서 스킵네비는 키보드만으로 접근을 하는 사용자를 위한 편의 고려 장치 라고 설명한다면 좀더 쉽게 받아들 수 있지않을까?

마우스로 우리가 보고자하는 본문내용쪽으로 포커스를 움직인다면 편리하겠지만, 

키보드만으로 쓰는 경우는 본문으로 가기까지 거쳐야하는 메뉴등들이 많다. 그래서 HTML 가장 상단에 스킵네비를 만들어 놓는다.

 

 

[본문 바로가기] || [메뉴 바로가기] || [하단정보 바로가기]

등의 네비가 가장 많다. 소스는 쓰기 나름이긴 하지만 쓰는 방법등은 비슷하다.

<div class="skipnav">
  <ul>
    <li><a href="본문 아이디값">본문으로 이동</a></li>
    <li><a href="하단정보 아이디값">하단정보 바로가기</a></li>
  </ul>
</div>

.skipnav a {display:none}
.skipnav a:focus,
.skipnav a:active {display:block;}
/* 디자인은 넣지 않고 기본 설정만 넣은 상태 */

 

css 는 만들기 나름이다. js나 css3를 써서 움직임을 줄 수도 있고, 

position을 이용하여 display:none이 아닌 화면에서 보이지 않게 한후 포커스가 가면 나오게 할 수도 있다.

방법은 무궁무진하니, 본인이 생각하고 디자인이 나오는 쪽으로 하면 된다.

 

 

 

내가 이 포스팅을 쓴 이유는,

SI 작업을 하면서 자꾸 타협을 보려하는 내 스스로에게 다시한번 일깨워주려고 쓰는 것이다.

기본에 충실한 사람이 되야겠다. 기승전반성 :<