<style type="text/css">
*{margin:0; padding:0;}
#accessibility a{position:absolute; display:block; left:-2000px; top:0; width:100%; text-align:center;}
#accessibility a:active,
#accessibility a:focus{left:0; padding:5px 0; background:#3366CC; color:#fff;}
#menu{ height:300px; margin-bottom:20px; padding:10px; border:#eee solid 5px;}
#content{ height:500px; margin-bottom:20px; padding:10px; border:#eee solid 5px;}
</style>
*{margin:0; padding:0;}
#accessibility a{position:absolute; display:block; left:-2000px; top:0; width:100%; text-align:center;}
#accessibility a:active,
#accessibility a:focus{left:0; padding:5px 0; background:#3366CC; color:#fff;}
#menu{ height:300px; margin-bottom:20px; padding:10px; border:#eee solid 5px;}
#content{ height:500px; margin-bottom:20px; padding:10px; border:#eee solid 5px;}
</style>
<div id="accessibility"><a href="#content">본문바로가기</a><a href="#menu">대메뉴 바로가기</a></div>
<div id="menu">메뉴<a href="#">top</a></div>
<div id="content">컨텐츠<a href="#">top</a></div>
<div id="menu">메뉴<a href="#">top</a></div>
<div id="content">컨텐츠<a href="#">top</a></div>
※ 화면에서 감춰진 스킵네비게이션의 경우, 키보드로 콘텐츠를 접근하지만 화면을 함께 보아야 하는 장애(지체장애 등)에는 도움이 되지 못함.
1. 키보드로 접근했을 때만, 화면에 보이게 하는 방법
2. 항상 화면에 보이도록 스킵네비게이션을 제공하는 방법은 시각장애인 및 지체장애인 등 키보드로 콘텐츠를 접근하는 모든 사람에게 도움이 될 수 있어, 더욱 바람직함
