반복 영역 건너뛰기 - by. UXKM

요약 설명

관련 지침 : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
웹사이트 상단의 메뉴, 검색창, 광고 영역 등 반복적으로 나타나는 콘텐츠 블록은 키보드 사용자와 스크린 리더 사용자들이 본문으로 빠르게 이동할 수 있도록 "본문 바로가기(Skip to content)" 링크를 제공 해야 합니다.

관련 WCAG 2.2 성공 기준

  • 반복 영역을 건너뛸 수 있는 수단 제공

    웹 페이지가 제공하는 핵심 영역이 위치한 곳으로 직접 이동하는 건너뛰기 링크를 제공합니다. 건너뛰기 링크는 웹 페이지의 가장 앞에 제공합니다.

  • 여러 개의 건너뛰기 링크 제공

    여러 개의 건너뛰기 링크를 제공하는 경우, 핵심 영역으로 이동하기 위한 건너뛰기 링크를 가장 먼저 나타내도록 합니다.

  • 시각적인 구현

    건너뛰기 링크는 시각장애인뿐만 아니라 지체장애인도 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로, 메뉴 건너뛰기 링크는 화면에 보이도록 구현해야 합니다.

2.4.1 블록 건너뛰기 (Bypass Blocks) (Level A) WAI - Understanding Bypass Blocks MDN - HTML 링크 앵커

기대효과

  • 웹 페이지의 상단이나 좌측 프레임에 동일한 링크 목록이 반복되는 영역이 포함되어 있으면, 화면낭독프로그램은 이 링크 목록을 순서대로 읽어준 후에야 필요한 부분을 읽어주므로 매우 불편합니다. 마찬가지로, 키보드 사용자는 모든 링크 목록을 순차적으로 이동해야 핵심 영역으로 이동할 수 있어 매우 불편합니다. 그러나 웹 페이지의 첫 부분에 핵심 영역으로 이동할 수 있는 건너뛰기 링크를 제공하면, 키보드 사용자는 몇 번의 키보드 조작을 통해서 핵심 영역으로 빠르게 이동할 수 있습니다.
  • 색인이 없는 긴 문장으로 구성된 콘텐츠의 경우, 콘텐츠의 특정 위치로 이동하는 것이 매우 불편합니다. 그러나 웹 페이지의 시작 부분에 색인을 제공하면, 필요한 부분으로 직접 이동할 수 있어 보다 쉽고 빠르게 내비게이션할 수 있습니다. 콘텐츠를 장, 절, 소절 등으로 구분하면, 웹브라우저 또는 보조기술이 제공하는 장, 절, 소절 간의 빠른 이동 수단을 이용할 수 있게 됩니다.
  • 여러 페이지로 구성된 웹사이트에서 사이트 맵을 제공하면, 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 보다 쉽고 빠르게 이동할 수 있습니다.

필요성

키보드 사용자는 페이지가 로딩된 이후 모든 웹 페이지에 공통적으로 들어있는 메뉴 및 링크 목록 등을 탭 키를 이용하여 순차적으로 내비게이션한 후에 핵심 영역에 도달하게 됩니다. 화면낭독프로그램을 이용하는 사람은 메뉴 등을 페이지가 로딩되거나 갱신될 때마다 모든 웹 페이지에 공통적으로 들어있는 메뉴 등을 다시 듣게 됩니다. 키보드 사용자와 화면낭독프로그램 사용자가 겪게 되는 이러한 불편을 방지하기 위해, 사용자가 메뉴 등과 같은 반복 영역을 바로 건너뛰어 핵심 영역으로 직접 이동할 수 있는 수단을 제공해야 합니다.

  • 매번 상단 메뉴/검색 영역을 탐색하지 않고 본문으로 이동할 수 있습니다.
  • 스크린 리더 사용자와 키보드 사용자에게 반복 탐색의 피로도를 줄일 수 있습니다.
  • 접근성 향상 및 UX 향상 효과가 있습니다.

대상

  • 사용자 유형
  • 이유

  • 시각장애인

    반복된 탐색 없이 빠르게 본문으로 이동

  • 지체 장애 사용자

    키보드 조작 최소화 필요

  • 비장애 사용자

    효율적인 정보 접근

체크리스트

  • “본문 바로가기” 링크가 페이지 최상단에 존재하는가?
  • 포커스 시 시각적으로 명확히 드러나는가?
  • 링크가 본문 영역의 앵커(target)로 연결되는가?
  • 스크린 리더에서도 인식 가능한가?

테스트 방법

  • 페이지 처음 로드 후 Tab 키로 “본문 바로가기” 링크를 확인합니다.
  • 포커스 시 시각적 스타일이 제공되는지 확인합니다.
  • 링크 클릭 시 실제 본문으로 초점이 이동되는지 확인합니다.

QA 지표

  • 본문 바로가기 링크 제공률
  • 포커스 스타일 명확성
  • 스크린 리더 탐색 가능성

개발방법

html 예시

Vue 예시

React 예시

점검 기준

  • Skip 링크가 시맨틱하게 <a> 태그로 구현되었는가?
  • 포커스 시 사용자에게 인지 가능한가?
  • ID와 앵커 대상이 정확히 연결되어 있는가?

점검 방법

  • 페이지 로딩 후, Tab 키를 눌러 첫 번째 포커스가 skip 링크로 이동하는지 확인합니다.
  • 그 상태에서 클릭하거나 Enter 키를 누르면, 지정된 주요 영역으로 정상 이동되는지 확인합니다.
  • 또한 스크린 리더 탐색 시 "본문 바로가기"라는 텍스트가 정확히 읽히는지 점검합니다.

준수/미준수 사례 (반복 영역 건너뛰기 기능 없음)

미준수 사례

문제점 :
키보드 사용자나 스크린 리더 사용자가 매번 메뉴를 처음부터 통과해야 합니다.
반복되는 내비게이션을 건너뛰는 기능이 없어 불편합니다.

준수 사례

설명 :
페이지 최상단에 본문으로 건너뛰기 링크를 제공합니다.
키보드 Tab 키로 초점 이동 시 해당 링크에 접근할 수 있습니다.
반복 영역(내비게이션)을 건너뛰고 주요 콘텐츠로 바로 이동할 수 있습니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링