마우스를 사용하지 못하는 사람들, 즉 키보드만으로 웹을 사용하는 사람들을 위해 페이지마다 계속 나오는 메뉴 등을 건너뛰게 하는 기능이다.
[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>
'WEB > CSS' 카테고리의 다른 글
| 팝업띄웠을때 스크롤 막기, 해제 (1) | 2017.08.31 |
|---|---|
| css로 그라데이션 넣을때 편한 사이트 (0) | 2017.08.28 |
| 탭메뉴 갯수마다 다른 width값 CSS로만 구하기 (0) | 2017.08.22 |
| 글자 자르기(...으로 흘러넘치게 보이기) (0) | 2017.06.07 |
| vertical-align 가운데 (ie10+) (0) | 2017.06.07 |
