[웹접근성] 스킵 메뉴(skipNav)

김종민·2023년 7월 14일

웹 접근성

목록 보기

4/6

스킵메뉴 - skipNav

브라우저를 통해 페이지를 탐색할 때 비장애인의 경우엔 내가 보고 싶은 컨텐츠를 마우스로 편하게 클릭하고 이용할 수 있다. 하지만 시각 장애인의 경우 tab키, 방향키 등을 사용한 스크린리더를 통해 페이지에서 원하는 정보를 얻을 수 있다. 그렇기 때문에 페이지의 양이 많다면 그리고 그 정보가 페이지 하단부에 있다면 정보를 얻기까지 수도 없이 많은 tab, 방향키 입력이 필요할 것이다. 이러한 접근성이 부족한 내용을 해결하기 위해 사용하는 것이
스킵 네비게이션이라는 방법이다.

내가 사용한 skipNav 코드는 아래와 같다👇

<!-- HTML -->
    <div id="skipNav">
        <a href="#main">본문내용바로가기</a>
    </div>

<!-- CSS -->
  #skipNav{
      position: absolute;
      width: 100%;
      top: 0;left: 0;
  }
  #skipNav a{
      position: absolute;
      top: 0;
      width: 100%;
      height: 50px;
      background: #000;
      color: #fff;
      text-align: center;
      line-height: 50px;
      transform: translateY(-100%);
  }
  #skipNav a:focus,
  #skipNav a:active{
      transform: translateY(0);
}