반응형
웹 접근성이란 마우스나 키보드를 사용하지 못하는 경우에도 동일한 환경에서 볼 수 있도록 제작하는 방법입니다.
요즘 규모가 큰 웹페이지에서는 필수로 사용하고 있고,
또한 기업에서도 웹 접근성을 준수할 수 있는 직원을 뽑으려고 합니다.
그중에서 가장 기본적인 스킵 내비게이션을 알려드리겠습니다.
보통 콘텐츠가 많은 홈페이지에서 tab키로 원하는 콘텐츠까지 도달하기가 어려운데,
이러한 불편함을 스킵네비게이션으로 통해 해소해주는 방법입니다.
웹 접근성을 위한 본문 바로가기
HTML
<body>
<!--스킵네이게이션 영역-->
<div id="skipNav">
<a href="#contents">본문 바로가기</a>
</div>
<!--본문영역-->
<div id="contents">
</div>
</body>
CSS
#skipNav{position:relative;z-index:9999;}
#skipNav a{position: absolute; top: -200px; left:0;
width: 100%; line-height: 30px;
border: 1px solid #dedede; background-color: #333;}
#skipNav a:focus,
#skipNav a:active{top: 0;}
- 스킵 내비게이션은 메뉴 위, body 바로 다음에 위치하는 것이 가장 좋습니다.
반응형
'Web > HTML' 카테고리의 다른 글
| 웹에서 아이콘 사용하기, 폰트 어썸(Font Awesome) 사용 방법 (0) | 2021.04.12 |
|---|---|
| [HTML/CSS] 드래그 금지/마우스 우클릭 금지 하는방법 (0) | 2021.03.31 |
| [HTML]자바스크립트 작동 안할 때(비활성화 일때) 처리방법 (0) | 2020.11.13 |
| [HTML] 특수문자 코드표 모음 (0) | 2019.09.02 |
| [HTML5] 테이블의 기본 구조와 태그 (0) | 2019.08.27 |