바로가기 링크, 건너뛰기 링크의 브라우져별 오류 및 해결 방법
반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)을 제공하고 있는데, 과연 이 건너뛰기 링크가 반복되는 링크가 제대로 작동을 하는가?
상황에 따라 다른 경우가 나타난다.
건너뛰기 링크를 제공하는 목적이 시각장애인 또는 마우스를 사용하지 못하는 환경에서 키보드 탭키를 이용해서 컨텐츠에 접근하기 위함이다.
그런데 어떤 경우에서는 이 기능이 제대로 작동하지 않는다.
<div id="accessibility"><a href="#content">본문으로 바로가기</a><a href="#navi">대메뉴로 바로가기</a></div>
<div id="navi">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
<div id="content"><a href="#">컨텐츠내용</a></div>
위와 같이 코딩했을 경우 바로가기 링크의 의미상 탭키로 본문으로 바로가기 클릭후 다음 탭키를 누르면 컨텐츠 내용 링크로 이동해야 된다.<div id="navi">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
<div id="content"><a href="#">컨텐츠내용</a></div>
파이어폭스에서는 탭키로 정상적으로 이동이 된다. 하지만 IE에서는 컨텐츠 내용 링크로 바로 이동이 되지 않는다.
화면상으론 컨텐츠내용으로 위치가 이동이 된거처럼 보인다 하지만, 다음 링크로 가기 위해 탭키를 눌러보면 컨텐츠내용 링크로 이동하지 않습니다.
<style type="text/css">
#navi, #content{width:100%;}
</style>
<div id="accessibility"><a href="#content">본문으로 바로가기</a><a href="#navi">대메뉴로 바로가기</a></div>
<div id="navi">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
<div id="content"><a href="#">컨텐츠내용</a></div>
#navi, #content{width:100%;}
</style>
<div id="accessibility"><a href="#content">본문으로 바로가기</a><a href="#navi">대메뉴로 바로가기</a></div>
<div id="navi">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
<div id="content"><a href="#">컨텐츠내용</a></div>
그런데 탭키로 이동한 컨텐츠내용 링크를 감싸는 div에 width,height 값을 주면 IE에서도 컨텐츠내용 링크로 이동이 가능합니다.
바로가기 링크 시험용 예제 페이지
브라우져별 키보드 탐색 방법
페이지 내 링크와 브라우저 버그
