[웹접근성] 스킵 네비게이션 (skip navigation)

2021. 12. 31. 15:56

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

1. 스킵 네비게이션(skip navigation)

스킵 네비게이션은 원래는 말 그대로 네비게이션 영역의 많은 링크들을 건너뛰고 바로 컨텐츠 정보를 탐색하기 위해 사용하는 용도를 가지고 있다.

<body>
  <div class="skip_nav">
    <a href="#content">컨텐츠 바로가기</a>
  </div>
  
  <header>
    <h1><a href="#">logo</a></h1>
    <nav>
      <ul>
        <li><a href="#">회사소개</a></li>
        <li>
          <a href="#">제품정보</a>
          <ul>
            <li><a href="#">스낵</a></li>
            <li><a href="#">음료</a></li>
            <li><a href="#">아이스크림</a></li>
            <li><a href="#">조미료</a></li>
          </ul>
        </li>
        <li><a href="#">채용</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </header>
  
  <div id="content" class="wrap">
    <section id="mainService">...</section>
    <section id="mainLogin">...</section>
    <section id="mainShopping">...</section>
    <section id="mainShopping">...</section>
    <section id="mainNotice">...</section>
  </div>
</body>

위의 예시와 같은 구조를 가지고 있는 페이지들이 많이 있다.

위의 경우에 메인 컨텐츠를 탐색하기 위해선 nav 영역의 많은 링크들을 거쳐야 메인 컨텐츠들에 접근이 가능하다.

이러한 경우를 위해 스킵 네비게이션을 사용해 네비게이션 영역을 건너뛰고 메인 컨텐츠(#content) 영역으로 한번에 접근 가능하도록 작업할 수 있다.

2. 스킵 네비게이션의 활용

<body>
  <div class="skip_nav">
    <a href="#mainService">주요 서비스 바로가기</a>
    <a href="#mainMedia">미디어 정보 바로가기</a>
    <a href="#mainShopping">쇼핑 바로가기</a>
    <a href="#mainNotice">공지사항 바로가기</a>
    <a href="#mainLogin">로그인 바로가기</a>
  </div>
  
  <header>...</header>
  
  <div class="wrap">
    <section id="mainService">...</section>
    <section id="mainLogin">...</section>
    <section id="mainShopping">...</section>
    <section id="mainShopping">...</section>
    <section id="mainNotice">...</section>
  </div>
</body>

1번에서 설명한 예시와 달리 위의 방법은 각 주요 서비스 섹션을 스킵 네비게이션으로 연결하여 바로바로 접근할 수 있도록 작업하였다.

스킵 네비게이션은 위에서 설명한바와 같이 기본적으로 네비게이션을 스킵(건너뛰기)하기 위해서 사용을 한다.

그리고 과거에는 그 용도 외에 페이지 각 세부 영역별로 스킵 네비게이션과 연결하면 오히려 접근성을 저해하고 페이지 이용을 복잡하게 만든다고 추천하지 않았다.

하지만 최근들어 많은 대규모 페이지나 플랫폼에서 스킵 네비게이션을 단순 네비게이션을 스킵하기 위한 용도가 아닌 원하는 서비스나 정보를 한번에 이용할 수 있게 만든 하나의 링크 묶음으로 사용하고 있다.

이 부분은 명확히 어떤게 옳고 그르다고 말하기엔 방법에 대한 고민이 필요해보인다.

3. 스킵 네비게이션 스타일

스킵 네비게이션은 비장애인 사용자들이 페이지를 이용할 때 화면에서 보이지 않게 작업해야한다. 키보드나 스크린리더로 페이지를 tab 하였을 때 스킵 네비게이션이 노출되고 사용될 수 있게 해야한다.

그렇기 때문에 페이지에 맨 처음 접근하게 되면 일반적인 상황에서는 스킵 네비게이션을 확인할 수 없다. 그리고 그러한 이유로 스킵 네비게이션에 따로 css 스타일을 입히지 않아도 된다고 생각할 수 있다.

하지만 보통의 상황에서는 스킵 네비게이션 링크에 tab이 되었을 경우 tab이 활성화 된 링크에 css 스타일 효과를 줘서 화면에 노출되게끔 처리하는 것이 많이들 사용하는 방법이고 좋은 방법이라 생각한다.

.skip_nav a{position:absolute; top:-30px; left:0; background:#000; height:30px; line-height:30px; color:#fff; font-size:12px; padding:0 6px;}
.skip_nav a:focus,
.skip_nav a:active{top:0;} <!-- 해당 a태그가 focus 혹은 active 되었을 경우 a태그가 화면에 노출되게 처리 -->

4. 스킵 네비게이션 사용시 주의사항

스킵 네비게이션을 사용할 때에 몇 가지 주의 사항이 있다.

1. 스킵 네비게이션의 위치는 가능하면 최대한 body태그 맨 처음으로 위치해야 한다.

: 이유는 스킵 네비게이션의 목적이 네비게이션 영역을 스킵하기 위해서 혹은 주요 서비스로 페이지 초입에서 바로 접근하기 위해 사용을 하기 때문에 네비게이션 영역 뒤에나 컨텐츠 영역 뒤에 위치하게 되면 스킵 네비게이션을 쓰는 목적이 사라지기 때문이다.

2. 스킵 네비게이션은 페이지 구석구석 여러번 사용하는 것이 아니라 처음에 한번만 사용해야 한다.

: 시각 장애인 입장에서 페이지를 구성한다고 했을 때 스킵 네비게이션이 페이지 이용하는 중간 중간에 위치해서 페이지 요소들을 넘나들며 여기저기 바로바로 이용할 수 있게 한다면 좋을 것 같다는 생각을 가끔했다. 하지만 스킵 네비게이션은 페이지 첫 부분에 딱 한번 사용하는 것이 적절하다.

오히려 과한 스킵 네비게이션의 사용은 페이지의 구조와 페이지 이용을 더 복잡하게 할 뿐이다.

참조

https://jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/

저작자표시 비영리

'Frontend > Web' 카테고리의 다른 글

유튜브(Youtube) 썸네일 이미지 가져오기 (상하 여백 있게/없게) (0)	2022.03.04
[웹접근성] 웹 접근성을 고려한 마크업 - 인식의 용이성 (대체 텍스트) (0)	2021.05.20
WAI-ARIA 접근성2. 영역에 대한 설명, 레이블 (aria-label, aria-labelledby) (0)	2021.03.27
WAI-ARIA 접근성1. 소개 및 주의사항, 태그별 role의 사용 (0)	2021.03.20
크로스 브라우징이란? (0)	2020.09.12

About Web