끄적이는 퍼블리셔♥

[웹접근성] 상단에 본문 바로가기 태그 추가해주기 본문

홀로 공부/웹표준과 웹접근성

[웹접근성] 상단에 본문 바로가기 태그 추가해주기

TargetA 2023. 8. 1. 15:38

1. 바로가기가 왜 필요한가?

스크린리더 사용자나 키보드를 이용한 사용자 같은 경우 여러 링크가 있을 경우 원하는 콘텐츠까지 도달하기 매우 부담이 될 수 있다.

이런 불편한 부분을 해소하기 위해 본문 바로가기[skip-navigation]이 필요합니다.

 

 

 

2. <body> 태그안의 최상단에 a 태그 "본문 바로가기" 만들기

<body> 
    <!--스킵네이게이션 영역-->
    <a href="#content" class="skip-to">본문 바로가기</a>
    
    <!--본문영역-->
    <div id="contents"> </div> 
</body>
/* Skip to content */
.skip-to {
    position:absolute;
    top:-99px;
    left:0;
    background:#333;
    color:#fff;
    width:100%;
    padding:10px 0;
    text-align:center;
    text-decoration:none;
    z-index:999;
}
.skip-to:hover,
.skip-to:focus,
.skip-to:active {
	display:block;
    top:0;
}

'홀로 공부 > 웹표준과 웹접근성' 카테고리의 다른 글

[웹표준&웹접근성]태그만으로 설명 작성이 어려울 경우 WAI-ARIA  (0) 2023.08.01
[웹접근성] 웹접근성을 위한 시멘틱 마크업 방법  (0) 2023.05.30
'홀로 공부/웹표준과 웹접근성' Related Articles more