[TIL] Skip Navigation(건너뛰기 링크)

테크야끼·2022년 1월 12일
0

TIL

목록 보기
10/11

1. Skip Navigation 이란?

Skip Navigation(건너뛰기 링크)란, ‘링크’를 건너뛰기 위해 제공되는 메뉴를 의미한다. 만약 웹사이트의 유저가 웹페이지를 시각적으로 정확하게 인지할 수 없거나, 마우스를 사용할 수 없는 경우 Tab키나 방향키로 컨텐츠들을 지나가거나 보조 기기의 단축키 등을 이용해야 한다.

이 때 Skip Navigation이 없다면 페이지의 본문에 접근하기 위해서 링크를 반복해서 눌러야한다. 이러한 불필요한 행위를 방지하기 위해서 즉, 웹 접근성을 높이기 위해 컨텐츠로 바로 이동할 수 있는 Skip Navigation이 필요하다.

2. Skip Navigation 규칙


1. Skip Navigation의 위치는 가능하면 최대한 body태그 맨 처음으로 위치해야 한다.

: Skip Navigation의 목적은 네비게이션 영역을 스킵하기 위해서 혹은 주요 서비스로 페이지 초입에서 바로 접근하는 것에 있기 때문에 네비게이션 영역 뒤에나 컨텐츠 영역 뒤에 위치하게 되면 스킵 네비게이션을 쓰는 목적이 사라진다.

2. Skip Navigation은 페이지 구석구석 여러번 사용하는 것이 아니라 처음에 한번만 사용해야 한다.

Skip Navigation의 주 기능은 ‘반복되는 메뉴를 건너뛰고 본문으로 바로가는 기능’이므로 링크는 ‘메뉴 건너뛰기’만 있으면 된다.

3. Skip Navigation은 일반적으로 화면에서 보이지 않게 처리한다.

비장애인, 마우스 사용자들이 Skip Navigation을 사용하는 것은 웹페이지에 불필요한 컨텐츠를 하나 더 늘리는 것이므로 일반적으로 CSS등을 이용하여 숨김처리한다.

3. Skip Navigation 마크업

HTML

<body>
  <div class="skip-navi">
     <ul>
       <li>
         <a href="#wrap" title="skip_navi"></a>
       </li>
     </ul>
  </div>

CSS

.skip-navi, {position: absolute;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;visibility: hidden;}

참고사이트
https://jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/n

0개의 댓글