[CSS] 스킵네비게이션
1. 스킵네비게이션은 <body>다음으로 나오는 것이 가장 적절합니다.
2. 본문으로 가는 기능만 제공하고 다른 건너띄기 컨텐츠에 대한 건너띄기는 제공하지 않도록 합니다.
3. 아래 코드는 일반적으로 사용하는 스킵네비를 약간 수정한 것입니다.(개취)
4. 크롬을 위한 tabindex를 추가 하였습니다.
<style type="text/css">
/* Skip Nav */
#skipNav{position:relative;z-index:9999;}
#skipNav a{display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:20px; color:#fff; font-weight:bold; background:#2466a6; white-space:nowrap;text-align:center;}
#skipNav a:focus, #skipNav a:active{height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;}
</style>
</head>
<body>
<div id="skipNav"><a href="#contents">Skip to the menu / 본문가기</a></div>
<ul>
<li><a href="#">매뉴1</a></li>
<li><a href="#">매뉴2</a></li>
<li><a href="#">매뉴3</a></li>
</ul>
<div id="contents" tabindex="0">
<a href="#">본문1</a>
<a href="#">본문2</a>
<a href="#">본문3</a>
</div>
2. 본문으로 가는 기능만 제공하고 다른 건너띄기 컨텐츠에 대한 건너띄기는 제공하지 않도록 합니다.
3. 아래 코드는 일반적으로 사용하는 스킵네비를 약간 수정한 것입니다.(개취)
4. 크롬을 위한 tabindex를 추가 하였습니다.
<style type="text/css">
/* Skip Nav */
#skipNav{position:relative;z-index:9999;}
#skipNav a{display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:20px; color:#fff; font-weight:bold; background:#2466a6; white-space:nowrap;text-align:center;}
#skipNav a:focus, #skipNav a:active{height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;}
</style>
</head>
<body>
<div id="skipNav"><a href="#contents">Skip to the menu / 본문가기</a></div>
<ul>
<li><a href="#">매뉴1</a></li>
<li><a href="#">매뉴2</a></li>
<li><a href="#">매뉴3</a></li>
</ul>
<div id="contents" tabindex="0">
<a href="#">본문1</a>
<a href="#">본문2</a>
<a href="#">본문3</a>
</div>
댓글
댓글 쓰기