728x90
300x250
웹접근성 준수를 위한 본문 바로가기가 필요한 이유?
일반적으로 보통은 링크가 많이 포함된 컨텐츠라도 원하는 내용을 바로 찾아 보는데 문제가 없겠지만
스크린 리더 사용자나 키보드를 이용한 사용자 같은 경우 여러 링크가 있을 경우 원하는 콘텐츠까지 도달하기 매우 부담이 될 수 있습니다.
이런 불편한 부분을 해소 하기 위해 본문 바로가기 [skip-navigation]이 필요 합니다.
즉, 탭키를 누르면 '본문 바로가기'가 나오고 바로 본문으로 포커스를 이동할 수 있게 되는것입니다.
웹접근성을 위한 '본문 바로가기' 만들기
html
<body>
<!--스킵네이게이션 영역-->
<div class="user-skip" id="skip-navi">
<a href="#menu"><span>메인 메뉴 바로가기</span></a>
<a href="#contents"><span>본문 영역 바로가기</span></a>
<a href="#footer"><span>하단 영역 바로가기</span></a>
</div>
<!--본문영역-->
<div id="contents"> </div>
</body>
css
#skip-navi {position:relative; z-index:3000}
#skip-navi a {position:absolute;top:-200px;left:0;width:140px;text-align:center;border: 1px solid #fb0685;background-color:#000}
#skip-navi a:focus { top:0; z-index:1000; text-decoration:none;}
#skip-navi span { display:inline-block; padding:2px 6px 0 0; font-size:14px; line-height:20px; color:#fff; white-space:nowrap; }728x90
반응형
'Front-end > HTML' 카테고리의 다른 글
| Attribute 우선순위 (0) | 2022.02.25 |
|---|---|
| html 5 Outliner 제목 계층구조 확인하기 (0) | 2022.02.24 |
| 웹접근성 이란? (0) | 2022.02.20 |
| input type text 숫자만 입력 정규식 (0) | 2022.01.03 |
| wai-aria란? (0) | 2021.12.17 |
댓글