Skip Navigation(건너뛰기 링크)

skip navigation이란?

반복적인 네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 건너뛰기 링크를 제공하는것.
사용자 특히 장애인분들(Tab키/방향키 및 보조기기의 단축키를 이용해야 하는 자)이 해당 페이지의 주요 내용이 위치한 본문으로 이동하기 위해서는 대메뉴-왼쪽메뉴 등.. 매 페이지를 볼 때 마다 반복적으로 제공되는 링크를 모두 거쳐야 하는데 이런 불필요한 행동은 웹 접근성을 저해하는 주요인이 되므로, 원하는 영역 즉, 본문으로 바로 이동할 수 있는 건너뛰기 링크를 반드시 제공해야 한다.

------------------------------------------------------------------------------------------------------------

건너뛰기 링크, 어떻게 구현하는것이 가장 좋을까?

1. 메뉴 건너 뛰기 상시 숨김
항상 보이지 않도록 처리하는 방법 입니다. 시각 장애인에게 유효한 방법 입니다. 단, 시각은 있으나 키보드만을 사용할 수 밖에 없는 지체 장애인 또는 키보드를 선호하는 사용자가 이용할 수 없으므로 권장하지 않습니다.

2. 메뉴 건너 뛰기 상시 보임
항상 보이도록 처리하는 방법 입니다. 시각 장애인, 키보드 사용자에게 모두 유용한 방법이나 시각이 있고 마우스를 주요 제어 수단으로 사용하는 사람에게는 이 링크가 오히려 공해가 될 수 있으므로 적극 권장하지 않습니다.

3. 키보드 접근시에만 보임
메뉴 건너 뛰기 링크를 키보드 접근시에만 보이도록 처리하는 방법 입니다. 키보드에 의존하는 사용자는 편리하게 이용할 수 있고 마우스에 의존하는 정상 시각의 사용자는 불필요한 링크를 키보드로 건너 뛸 필요가 없기 때문에 간결한 화면을 유지할 수 있어서 가장 권장하는 방법 입니다.

키보드 접근시에만 보이는 메뉴 건너뛰기 링크의 구현시 중요한 것은 화면에서 이 링크를 숨길 때 상자의 너비 또는 높이를 0px 으로 지정하면 이 링크를 인식하지 못하는 브라우저(Safari, Chrome, Opera)가 있으므로 반드시 1px 이상의 너비와 높이를 지정해서 브라우저 호환성을 확보해야 합니다.

          HTML

<div id="skipToContent"><a href="#content">메뉴 건너 뛰기</a></div>

          CSS

#skipToContent { position:relative;}
#skipToContent a { display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#000; white-space:nowrap;}
#skipToContent a:focus,
#skipToContent a:active { height:auto; width:100%; padding:5px; margin-bottom:10px;}


# 메뉴건너뛰기 링크 적용 예 => http://naradesign.net/open_content/reference/navigation.html



더 자세한 내용 => http://www.jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/