2.4.1. 반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

목적

웹 페이지의 반복되는 영역(예: 내비게이션, 헤더, 메뉴 등)을 건너뛸 수 있는 기능을 제공하여, 키보드 사용자와 화면낭독프로그램 사용자가 주요 콘텐츠로 빠르게 이동할 수 있도록 한다. 이를 통해 불필요한 반복 탐색을 줄이고, 보다 효율적으로 콘텐츠를 이용할 수 있다.

배경 및 필요성

대부분의 웹 페이지에는 내비게이션 링크, 헤더, 광고 등 공통 요소가 반복적으로 포함되어 있다. 키보드 사용자와 보조 기술 사용자(예: 화면낭독프로그램 사용)는 이러한 반복되는 영역을 일일이 탐색해야 하므로, 주요 콘텐츠에 도달하기까지 많은 시간이 소요될 수 있다.

특히, 탐색해야 하는 내비게이션 링크가 많은 웹사이트에서는 키보드 사용자가 수십 번의 Tab 키를 눌러야 본문에 도달하는 경우도 있다. 이러한 불편을 줄이기 위해 웹 페이지의 주요 본문으로 빠르게 이동할 수 있는 ‘건너뛰기 링크(skip link)’를 제공한다.

‘건너뛰기 링크’는 페이지의 최상단, body 요소 시작 직후에 배치하는 것이 필요하다. 키보드 접근성을 보장하기 위해 Tab 키로 접근할 수 있어야 한다. 건너뛰기 링크는 항상 시각적으로 표시하거나, 키보드 초점을 받았을 때만 표시할 수 있지만, 반드시 기능적으로 작동해야 한다. 단순히 링크만 제공하고 실제 작동하지 않는다면 접근성을 준수했다고 볼 수 없다.

예외적으로, 페이지에 반복되는 영역(예: 헤더, 내비게이션 바 등)이 없는 경우 반복 영역 건너뛰기 링크는 생략할 수 있다.

기본 규칙

웹 페이지의 가장 앞부분에 키보드로 핵심 콘텐츠 영역으로 바로 이동할 수 있는 ‘건너뛰기 링크’를 제공해야 한다.
여러 개의 건너뛰기 링크를 제공할 경우, 핵심 콘텐츠(본문)로 이동하는 링크가 가장 먼저 나타나도록 순서를 정한다.
건너뛰기 링크는 키보드 사용자와 보조 기술 사용자가 쉽게 인식할 수 있도록 눈에 띄게 구현해야 한다.

적용 사례

1) 반복 영역 건너뛰기 링크 제공

웹 페이지 상단에 ‘본문 바로가기’ 링크를 배치하여, 키보드 탐색 시 사용자가 반복되는 내비게이션 영역을 건너뛰고 바로 본문으로 이동할 수 있도록 하였다. 건너뛰기 링크는 기본적으로 숨겨져 있지만, 키보드 초점을 받을 때 화면에 나타나도록 구현하여 사용자가 쉽게 인식할 수 있도록 하였다.

이미지. 시각적으로 항상 보여지도록 제공된 반복 영역 건너뛰기 링크 사례 (출처: 청주예술의전당)

<body>
<div id="wrapper">
  <div class="accessibility">
    <a href="#contents"><span>본문바로가기</span></a>
  </div>
  ...

건너뛰기 링크를 기본적으로 숨겨서 제공해야 하는 경우, 키보드 초점을 받았을 때 시각적으로 보이도록 해야 하며, 사용자가 이를 인지할 수 있도록 한다. 이는 최소한의 조치로서 예외적으로 허용된다.

이미지. 키보드 초점에 노출되는 반복 영역 건너뛰기 링크 사례 (출처: 용인수지장애인복지관)

#skip_to_container a {
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  ...
}
#skip_to_container a:focus, #skip_to_container a:active {
  width: 100%;
  height: 75px;
  ...
}

<body>
<div id="skip_to_container">
  <a href="#wd_main_visual">본문 바로가기</a>
</div>
...

개선 필요 사례

1) 반복 영역 건너뛰기 미제공

반복되는 상단(header) 영역이 있는 페이지에서 ‘본문 바로가기’ 링크가 제공되지 않으면, 키보드나 보조 기술 사용자가 매번 반복되는 영역을 탐색해야 한다.

개선 방법

페이지 최상단에 ‘본문 바로가기’ 링크를 추가하여, 사용자가 핵심 콘텐츠로 바로 접근할 수 있도록 한다.

2) 바로가기 링크 남용

키보드 접근 시 노출되는 바로가기 링크 모음이다. 반복 영역 건너뛰기가 아닌 각 콘텐츠 블록으로 이동하는 다수의 바로가기 링크를 추가로 제공하여, 오히려 키보드 사용자의 반복 이동 콘텐츠가 늘어나 탐색 단계가 증가한 사례이다.

이 경우, 본래의 ‘본문 바로가기’ 기능 역할을 하지 못하며, 화면낭독프로그램 사용자와 키보드 사용자가 페이지 구조를 파악하고 탐색하는 데 시간이 오래 걸리게 된다.

개선 방법

반복 영역 건너뛰기 링크는 반드시 본문 시작 영역으로 이동하도록 설정하고 페이지 상단에 배치해야 한다. 또한, 페이지 내 다른 콘텐츠 블럭 이동 링크와 혼동되지 않도록 명확히 구분하여 제공해야 한다.

필요할 경우, 별도의 내비게이션 체계를 통해 역할을 분리함으로써 사용자가 효율적으로 탐색할 수 있도록 한다.

3) 잘못된 링크 연결

건너뛰기 링크에 연결된 id="content" 영역이 웹 페이지 내 존재하지 않아, 바로가기 기능이 작동하지 않는 사례이다. 이로 인해 키보드 사용자와 화면낭독프로그램 사용자는 반복 영역을 모두 탐색해야 하는 불편을 겪는다.

<body>
    <!-- 본문 바로가기 -->
    <div id="skip" class="page-skip">
        <a href="#content" class="skip-item">본문 바로가기</a>
    </div>
    <!-- 메뉴 -->
    <div class="page-head" id="head">
        ...
    </div>
    <!-- 본문 영역 -->
    <div class="page-body">
        <!-- event container -->
        <div class="event-container">...</div>
    </div>
</body>

개선 방법

건너뛰기 링크는 반드시 본문 시작 영역(예: id="content")에 id 값을 지정하고, 링크 href 속성이 해당 영역의 id와 올바르게 연결되도록 수정해야 한다.

4) 본문 아닌 다른 영역으로 연결된 건너뛰기 링크

반복 영역 건너뛰기 링크가 본문 시작 영역 대신 본문 중간에 추천 상품 영역에 연결된 사례이다. 이에 따라 키보드 사용자와 화면낭독프로그램 사용자는 본문 시작 부분부터 탐색하지 못하고, 중간에 있는 추천 상품 영역 이전의 콘텐츠를 인식하기 어렵게 된다.

<body class="body-main">
  <a href="#best_goods">본문바로가기</a>
  <div id="wrap">
    <div id="header_wrap" class="headerFix">...</div>
      <div id="container" style="padding-top: 165px;">
        <!-- 이동해야 하는 본문 시작 위치(O) -->
        <div id="contents">
          <!-- 본문 시작 -->
          <div class="sub_content">
            <div class="main_visual">...</div>
            </div>
            <div class="main_content">
              <div class="main_banner_list">...</div>
            </div>
          </div>
          <!-- 본문 중간으로 잘못 연결된 위치(X) -->
          <div id="best_goods" class="main_goods_cont">
            <div class="goods_list">
              <div class="goods_list_tit">
                <h3>추천상품</h3>
              </div>
        ...
      </div>
    </div>
  </div>
</body>

개선 방법

반복 영역 건너뛰기 링크는 본문 시작 지점과 연결되도록, 본문 시작 지점에 적절한 식별자를 설정하고 정확히 연결해야 한다.

위 사례는, <a href="#contents">본문 바로가기</a>로 제공해야 한다.

5) 화면만 스크롤 되는 반복 영역 건너뛰기 링크

건너뛰기 링크를 클릭했을 때 화면만 본문 영역으로 스크롤 되어 보여주고, 키보드 초점은 그대로 건너뛰기 링크에 유지되는 사례이다.

이 경우, 키보드 사용자와 화면낭독프로그램 사용자는 실제로 본문 영역으로 초점이 이동하지 않아 반복 영역을 계속 탐색해야 한다.

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".skip-link").forEach(function (link){
    link.addEventListener("click", function (event) {
      event.preventDefault();
      const targetId = this.getAttribute("href").substring(1);
      document.getElementById(targetId).scrollIntoView();
    });
  });
});

개선 방법

반복 영역 건너뛰기 링크를 클릭하면 화면 스크롤뿐만 아니라 키보드 초점도 본문 시작 영역으로 이동하도록 구현해야 한다. 이렇게 하면 모든 사용자가 바로 주요 콘텐츠를 탐색할 수 있게 된다.