반응형
Skip Menu / Skip Nav를 왜 사용하는가?
- 사용자 편의 및 웹 접근성을 위해서다.
웹접근성이라하면 마우스가 고장났다던가, 키보드를 사용 못하는 경우 등
정상적으로 쓸 수 없는 상황에 대해서 편의를 고려해서 제작하는 방법이다.
엄청난 컨텐츠 영역을 가지고 있는 홈페이지에서 원하는 영역에 도달하고 싶을때 Tab 키를 수 없이 눌러야 할것이다.
그런 불필요한 액션을 없애기 위해 스킵메뉴(Skip menu)를 제작한다.
스킵 메뉴를 만들면 해당 영역으로 즉시 갈 수 있는 <메뉴 바로가기>라고 생각하면 된다.
웹접근성 맞게 스킵메뉴 만들어보기
- 스킵네비게이션은 <body>다음으로 나오는 것이 가장 적절합니다.
<div id="skipNav">
<a href="#contents">본문 바로가기</a>
</div>
#skipNav{position:relative;z-index:9999;}
#skipNav a{position: absolute; top: -200px; left:0;
width: 160px; line-height: 30px;
border: 1px solid #dedede; background-color: #333;}
#skipNav a:focus,
#skipNav a:active{top: 0;}
반응형
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] h1, h2, h3, h4, h5, h6 제목 태그 개념 다지기 (2) | 2020.08.17 |
|---|---|
| [HTML] 스타일 태그 ID / CLASS 선택자 개념 사용법 속성 (0) | 2020.08.13 |
| <img>태그 VS background-image CSS(백그라운드이미지)는 언제 어떻게 사용하나요? (0) | 2020.06.24 |
| [HTML] 폼(form)의 이해 / 데이터 처리 과정 공부하기 (0) | 2020.06.16 |
| [HTML] Form, label, Fieldset, Legend 태그 속성 및 개념 잡아보기 (0) | 2020.06.16 |