WCAG 2.4.8: 위치

WCAG 2.4.8은 사용자가 일련의 웹 페이지 안에서 자신이 어디에 있는지 파악할 수 있어야 한다고 요구합니다. 예를 들어, 브레드크럼, 사이트 맵, 강조된 내비게이션 링크 등을 통해 이를 제공할 수 있습니다. 이는 인지 장애가 있는 사용자, 스크린 리더 사용자, 그리고 복잡한 사이트를 탐색하는 모든 사용자가 스스로 방향을 잡고 자신 있게 콘텐츠를 이동하며 탐색하는 데 도움이 됩니다.

이 규칙의 의미

WCAG 2.4.8 Location은 Operable 원칙 아래의 AAA 레벨 기준이다. 이 기준은 다음과 같이 규정한다. "웹 페이지 집합 내에서 사용자의 위치에 대한 정보가 제공된다." 실질적으로 이는, 웹사이트가 언제든지 사이트의 더 넓은 구조 안에서 사용자가 정확히 어디에 있는지 알려 주는 명확하고 지속적인 신호를 제공해야 한다는 뜻이다.

이 기준은 웹사이트가 의미 있는 계층 구조나 순서로 구성된 여러 페이지로 이루어져 있을 때마다 적용된다. 예를 들어, 카테고리·하위 카테고리·상품 페이지로 구성된 전자상거래 사이트나, 부서와 하위 섹션으로 구성된 정부 포털 등이 이에 해당한다. 사용자가 어떤 페이지에 도착했을 때, 추측하거나 기억에만 의존하지 않고도 "나는 이 사이트에서 어디에 있지?"라는 질문에 답할 수 있어야 한다.

이 기준을 충족하기 위한 허용 가능한 기법에는 다음과 같은 것들이 포함되지만, 이에 한정되지는 않는다.

브레드크럼(이동 경로) 트레일 — 사이트의 홈 페이지에서 현재 페이지까지의 경로를 보여 주는 탐색 보조 수단 (예: Home > Products > Laptops > 15-inch Models).
사이트 맵 — 사이트의 전체 구조를 표시하고 현재 위치를 강조하거나 표시하는 전용 페이지 또는 패널.
강조되거나 시각적으로 구분되는 내비게이션 링크 — 활성 섹션이나 페이지를 명확히 표시하는 내비게이션 메뉴로, 보조 기술 사용자들을 위해 aria-current 속성을 함께 사용하는 경우가 많다.
다단계 프로세스에서의 번호가 매겨진 단계 표시 — 체크아웃이나 폼 마법사에서 "Step 2 of 5"와 같이 순서상의 위치를 전달하는 표시.

페이지에 사이트 구조 내에서 사용자의 현재 위치를 알려 주는 신뢰할 수 있는 메커니즘이 최소 하나라도 제공되면 이 기준을 통과한 것으로 본다. 반대로, 내비게이션 바에 현재 페이지에 대한 시각적 또는 프로그래밍적 표시가 없고, 브레드크럼도 없으며, 단계 표시도 없는 경우처럼 그러한 메커니즘이 전혀 없다면 페이지는 실패한 것이다.

WCAG 2.4.8이 특정 기법을 의무화하지 않는다는 점은 중요하다. 이 기준은 어떤 형태로든 효과적인 위치 표시가 존재할 것을 요구한다. 그러나 그 표시가 진정으로 접근 가능하려면, 시력이 있는 사용자에게 시각적으로만 보이는 것이 아니라 스크린 리더와 같은 보조 기술로도 지각 가능해야 한다. 이는, 접근 가능한 레이블 변경 없이 단순히 링크를 굵게 표시하는 것과 같은 순수 시각적 표시만으로는, 프로그래밍적으로 노출되지 않는다면 충분하지 않을 수 있음을 의미한다.

이 기준에 대해 WCAG가 공식적인 예외를 별도로 두고 있지는 않으며, 관련된 페이지 집합에 적용된다는 일반적인 이해만 존재한다. 더 큰 집합의 일부가 아닌 단일 독립 웹 페이지는, 전달해야 할 "집합 내 위치"가 없으므로 이 기준을 충족할 필요가 없다.

왜 중요한가

디지털 환경에서 자신이 어디에 있는지 아는 것은 대부분의 사용자가 당연하게 여기는 기본적인 방향 감각의 필요 조건이다. 그러나 이러한 단서가 없을 때 그 중요성이 드러난다. WCAG 2.4.8은 여러 서로 다른 사용자 집단이 실제로 겪는, 현실적이고 광범위한 장벽을 다룬다.

인지 장애가 있는 사용자는 가장 큰 영향을 받는 집단 중 하나다. 주의력 결핍 장애, 기억력 손상, 외상성 뇌 손상과 같은 상태는 복잡한 사이트에서 자신의 이동 경로를 추적하는 일을 어렵게 만들 수 있다. 브레드크럼이나 유사한 신호가 없으면, 사용자는 방향 감각을 잃고 상위 카테고리로 어떻게 돌아가야 할지 확신하지 못하거나, 현재 페이지가 이미 본 콘텐츠와 어떻게 연관되는지 이해하지 못할 수 있다. 세계보건기구(WHO)에 따르면 전 세계적으로 10억 명이 넘는 사람들이 어떤 형태로든 장애를 가지고 있으며, 그중 인지 장애는 상당하고도 종종 충분히 지원받지 못하는 비중을 차지한다.

스크린 리더 사용자 — 일반적으로 시각장애가 있거나 저시력인 사람들 — 는 페이지 맥락을 이해하기 위해 프로그래밍된 구조에 크게 의존한다. 시력이 있는 사용자는 강조된 내비게이션 링크나 굵게 표시된 브레드크럼 항목을 한눈에 보고 즉시 방향을 잡을 수 있다. 반면 스크린 리더 사용자는 페이지를 순차적인 음성 출력으로 해석해야 한다. 활성 내비게이션 링크에 aria-current="page" 속성이 없거나, 접근 가능한 레이블이 있는 적절한 구조의 브레드크럼이 없다면, 이들은 동등한 방향 신호를 받지 못하고, 자신이 어디에 있는지 파악하기 위해 광범위하게 탐색해야 할 수도 있다.

키보드, 스위치 액세스, 시선 추적 장치로 탐색하는 운동 장애가 있는 사용자 역시 위치 표시의 혜택을 받는다. 이는 중복되고 힘든 탐색의 필요성을 줄여 주기 때문이다. 예를 들어 사용자가 이미 기업 사이트의 "Support" 섹션에 있다는 것을 알고 있다면, 새 페이지를 로드할 때마다 전체 내비게이션 구조를 다시 훑어볼 필요가 없다.

구체적인 상황을 생각해 보자. 초기 치매가 있는 사용자가 주택 담보 대출 금리에 대한 정보를 찾기 위해 한 터키 은행의 온라인 포털을 탐색하고 있다. 여러 페이지를 클릭하다가, 여전히 개인 뱅킹 섹션에 있는지 아니면 기업 뱅킹 영역으로 들어온 것인지 확신이 서지 않는다. 현재 섹션을 명확히 표시하는 브레드크럼 트레일이나 강조된 내비게이션 항목이 없다면, 사용자는 좌절감에 브라우저를 닫거나, 잘못된 상품에 신청하는 등 비용이 큰 실수를 저지를 수 있다. 간단하고 잘 구현된 브레드크럼(예: Ana Sayfa > Bireysel Bankacılık > Krediler > Konut Kredisi)은 이러한 혼란을 즉시 해소해 줄 것이다.

접근성을 넘어, 위치 표시는 측정 가능한 사용성 및 SEO 이점을 제공한다. Schema.org의 BreadcrumbList를 사용한 브레드크럼 구조화 데이터는 Google 검색 결과에 리치 스니펫으로 직접 표시될 수 있어 클릭률을 향상시킨다. 또한 명확한 사이트 구조는 이탈률을 줄인다. 사용자가 자신이 어디에 있는지 이해하면, 사이트를 떠나기보다는 관련 콘텐츠를 더 탐색할 가능성이 높기 때문이다.

테스트 방법

페이지 집합 식별: 테스트 중인 페이지가 정의된 계층 구조(예: 다단계 내비게이션 구조, 단계별 마법사, 분류된 콘텐츠 라이브러리)를 가진 관련 페이지 집합에 속하는지 판단한다. 페이지가 독립 문서라면 이 기준이 적용되지 않을 수 있다.
기본선으로 자동 스캔 실행: axe DevTools(브라우저 확장) 또는 Chrome DevTools의 Lighthouse를 사용해 접근성 감사를 실행한다. 두 도구 모두 2.4.8을 직접 감사하지는 않지만, 내비게이션 링크의 aria-current 속성 누락, 레이블이 없는 <nav> 랜드마크, 브레드크럼 구조 누락과 같은 관련 문제를 확인한다. 이러한 결과는 수동 검토를 보완하지만 대체하지는 못한다.
위치 메커니즘 시각적 검사: 브레드크럼 트레일, 강조되거나 시각적으로 구분되는 활성 링크, 단계 카운터, 사이트 맵 링크 등을 찾는다. 해당 메커니즘이 현재 페이지의 사이트 계층 내 위치를 정확히 반영하는지 확인한다.
스크린 리더로 테스트 — NVDA + Firefox: NVDA를 실행하고 페이지로 이동한 뒤, D를 눌러 랜드마크를 순환한다. 내비게이션 랜드마크를 찾고, 현재 페이지나 섹션에 대한 어떤 표시가 있는지 듣는다. 활성 내비게이션 항목이 aria-current="page"를 통해 "current page" 등으로 다르게 안내되는지 확인한다. 브레드크럼이 있다면 이를 탐색하며 각 단계가 링크 텍스트와 함께 읽히는지, 현재 위치가 명확히 식별되는지 확인한다.
VoiceOver + Safari(macOS/iOS)로 테스트: VoiceOver(Command + F5)를 활성화하고, VO + U로 로터를 열어 브레드크럼이나 메인 내비게이션으로 이동한 뒤 "Links" 또는 "Landmarks"를 선택한다. 활성 내비게이션 항목이나 브레드크럼의 현재 항목이 어떻게 안내되는지 듣는다. 현재 위치가 다른 내비게이션 항목과 구분되는지 확인한다.
JAWS + Chrome으로 테스트: Insert + F7로 링크 목록을, Insert + F6로 제목 목록을 연다. 브레드크럼이나 내비게이션 영역으로 이동해 현재 페이지나 섹션이 프로그램적으로 식별 가능한지 확인한다. aria-current가 소리 내어 읽히는지(해당 요소에 대해 JAWS가 "current"라고 안내하는지) 확인한다.
집합 내 여러 페이지에서 테스트: 동일한 섹션이나 계층 내에서 최소 3~5개의 페이지를 이동하며, 위치 메커니즘이 각 페이지에서 올바르게 업데이트되는지, 집합 전체에 걸쳐 일관되게 존재하는지 확인한다.
DOM 검사: 브라우저 DevTools를 사용해 브레드크럼 링크에 설명적인 접근 가능한 이름이 있는지, 현재 항목이 (현재 페이지의 경우) aria-current="page" 또는 (프로세스의 현재 단계의 경우) aria-current="true"를 사용하는지, 브레드크럼이 aria-label="Breadcrumb"와 같은 접근 가능한 레이블을 가진 <nav> 요소로 감싸져 있는지 확인한다.

수정 방법

브레드크럼 내비게이션 누락 — 잘못된 예

<!-- No breadcrumb or location indicator present.
     Users have no way to determine their location in the site hierarchy. -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
  </ul>
</nav>
<h1>15-inch Laptops</h1>

브레드크럼 내비게이션 누락 — 올바른 예

<!-- A breadcrumb nav is added above the main content.
     aria-label distinguishes it from main navigation.
     aria-current="page" marks the current location for screen readers.
     The list structure communicates hierarchy. -->
<nav aria-label='Breadcrumb'>
  <ol>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
    <li><a href='/products/laptops/15-inch' aria-current='page'>15-inch Laptops</a></li>
  </ol>
</nav>
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
  </ul>
</nav>
<h1>15-inch Laptops</h1>

프로그램적 표시가 없는 활성 내비게이션 링크 — 잘못된 예

<!-- The active link is styled differently in CSS, but there is no
     programmatic signal. Screen reader users cannot distinguish it
     from the other navigation links. -->
<nav aria-label='Site navigation'>
  <ul>
    <li><a href='/about'>About</a></li>
    <li><a href='/services' class='active'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

프로그램적 표시가 없는 활성 내비게이션 링크 — 올바른 예

<!-- aria-current="page" is added to the active link.
     Screen readers will announce this link as "current" or "current page"
     depending on the assistive technology, giving users a clear
     programmatic location signal in addition to the visual styling. -->
<nav aria-label='Site navigation'>
  <ul>
    <li><a href='/about'>About</a></li>
    <li><a href='/services' class='active' aria-current='page'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

단계 표시가 없는 다단계 폼 — 잘못된 예

<!-- A multi-step checkout form with no indication of current step.
     Users cannot determine how far they are through the process
     or how many steps remain. -->
<form>
  <h1>Shipping Information</h1>
  <!-- form fields -->
  <button type='submit'>Next</button>
</form>

단계 표시가 없는 다단계 폼 — 올바른 예

<!-- A progress indicator communicates the user's position in the sequence.
     aria-label on the nav provides context.
     aria-current="step" marks the active step for assistive technologies.
     The visible text "Step 2 of 4" is also available for all users. -->
<nav aria-label='Checkout progress'>
  <ol>
    <li><a href='/checkout/cart'>Cart</a></li>
    <li aria-current='step'><strong>Shipping</strong></li>
    <li>Payment</li>
    <li>Confirmation</li>
  </ol>
</nav>
<form>
  <h1>Shipping Information <span>(Step 2 of 4)</span></h1>
  <!-- form fields -->
  <button type='submit'>Next: Payment</button>
</form>

자주 발생하는 실수

홈 페이지나 말단(leaf) 페이지에만 브레드크럼 제공: 브레드크럼은 집합 내 모든 페이지에서 일관되게 제공되어야 한다. 상품 상세 페이지에만 표시하고 카테고리 페이지에는 표시하지 않으면 방향 정보에 공백이 생긴다.
aria-current="page" 없이 시각적으로만 스타일링된 활성 링크 사용: 굵게 표시되거나 밑줄이 그어진 활성 내비게이션 링크는 시각적으로 위치를 전달하지만, 해당 요소에 aria-current="page"가 없으면 스크린 리더 사용자는 아무런 이득을 얻지 못한다.
브레드크럼을 <nav> 대신 <div>로 감싸기: 비시맨틱 컨테이너를 사용하면 브레드크럼이 내비게이션 랜드마크로 노출되지 않아, 스크린 리더 사용자가 이를 찾고 해석하기가 더 어려워진다.
메인 내비게이션 랜드마크도 있는 경우 브레드크럼 <nav>에 aria-label을 생략: 동일 페이지에 레이블이 없는 <nav> 랜드마크가 두 개 있으면 모호성이 생긴다. 스크린 리더는 둘 다 단순히 "navigation"으로 안내할 수 있어, 사용자가 둘을 구분하지 못할 수 있다.
페이지 링크에 aria-current="page" 대신 aria-current="true" 사용: 내비게이션 맥락에서 현재 페이지를 식별하기 위한 의미론적으로 올바른 값은 page이다. true를 사용하면 덜 설명적이며, 보조 기술에 따라 다르게 또는 덜 명확하게 안내될 수 있다.
위치 표시 수단으로 페이지 제목에만 의존: "Laptops — 15-inch Models | Acme Store"와 같은 설명적인 <title> 요소는 유용하며 WCAG 2.4.2에 의해 요구되지만, 페이지 집합 구조 내에서의 위치가 아니라 현재 페이지의 이름만 전달하므로 2.4.8을 단독으로 충족하지는 못한다.
내비게이션 계층이 아닌 URL 구조를 반영하는 브레드크럼 구성: URL과 내비게이션 구조는 항상 일치하지 않는다. 브레드크럼은 기술적이거나 불투명할 수 있는 URL 경로가 아니라, 사용자가 이해할 수 있는 논리적 정보 구조를 반영해야 한다.
상위 수준을 링크 없이 일반 텍스트로만 표시하는 브레드크럼: 현재 페이지만 표시하거나 상위 수준 항목에 링크가 없으면, 브레드크럼은 위치 표시이자 내비게이션 보조 수단으로서의 유용성을 잃는다. 상위 항목은 사용자가 계층을 거슬러 올라갈 수 있도록 링크로 제공해야 한다.
시각적 구분자 변경만으로 현재 브레드크럼 항목을 표시하고 aria-current를 사용하지 않음: 마지막 브레드크럼 항목의 색을 바꾸거나 밑줄을 제거하는 것만으로는 해당 항목이 현재 페이지를 나타낸다는 사실을 스크린 리더에 전달하지 못한다. aria-current="page"를 명시적으로 추가해야 한다.
React나 Vue 같은 프레임워크로 만든 단일 페이지 애플리케이션(SPA)에서 클라이언트 측 내비게이션 후 위치 표시를 업데이트하지 않음: SPA에서는 전체 브라우저 새로고침 없이 페이지 전환이 이루어진다. 라우트 변경 시 브레드크럼이나 활성 내비게이션 표시가 프로그램적으로 업데이트되지 않으면, 오래된 위치 정보를 보여 주게 되며, 이는 표시가 전혀 없는 것보다 더 나쁠 수 있다.

터키 접근성 규정과의 관계

2025년 6월 21일 관보 제32933호에 게재된 터키 대통령령 2025/10은 터키에서 운영되는 광범위한 조직을 대상으로 구속력 있는 웹 및 모바일 접근성 요구 사항을 수립한다. 이 대통령령은 국제적으로 인정된 접근성 표준 준수를 의무화하며, 사실상 WCAG 프레임워크를 채택하고 있다. 적용 대상은 공공 기관 및 기관, 전자상거래 플랫폼, 은행 및 금융 기관, 병원 및 의료 서비스 제공자, 가입자 200,000명 이상인 통신 회사, 허가받은 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립학교 등으로 정의된 유형의 기관을 포함한다.

WCAG 2.4.8 Location은 AAA 레벨 기준으로 분류되며, 이는 대통령령이 최소 기준으로 참조하는 A 레벨 및 AA 레벨 적합성에 포함되지 않는다는 뜻이다. 그러나 이 구분은 규제 대상 조직에 여러 중요한 방식으로 의미를 가진다.

첫째, 고령 환자를 위한 의료 포털이나 학습 장애가 있는 학생을 위한 교육 플랫폼처럼, 인지적 또는 내비게이션 측면에서 상당한 어려움을 겪는 사용자를 대상으로 하는 특정 특수 서비스는, 터키 법과 장애인법 제5378호 등 관련 입법이 요구하는 접근성 의무의 취지를 진정으로 충족하기 위해 AA 기준을 넘어설 것으로 기대될 수 있다. 이러한 맥락에서 2.4.8을 구현하는 것은 형식적인 수준을 넘어 실질적인 포용 의지를 보여 준다.

둘째, 터키의 공공 기관과 규제 대상 민간 기업은 점점 더 감사와 민원 제기 메커니즘의 대상이 되고 있다. WCAG 2.4.8을 포함한 AAA 레벨 준수를 입증하는 것은 모범 사례 구현에 대한 방어 가능한 기록을 제공하며, 공식적인 접근성 민원이 제기될 경우 규제 리스크를 줄여 준다.

셋째, 특히 전자상거래 플랫폼과 은행의 경우, 브레드크럼과 같은 위치 표시는 접근성 기능 외에도 직접적인 상업적 가치를 가진다. 명확한 단계 표시와 브레드크럼 내비게이션을 포함한 터키 은행의 온라인 주택 담보 대출 신청 프로세스는 인지 장애가 있는 사용자를 더 효과적으로 지원할 뿐 아니라, 이탈률을 줄이고 전환을 지원해 접근성 투자를 측정 가능한 비즈니스 성과와 정렬시킨다.

Accsible 오버레이 SDK를 사용하는 조직은 내장된 브레드크럼 향상 기능과 aria-current 삽입 기능을 활용해 전체 코드베이스 리팩터링 없이도 기존 사이트를 2.4.8 적합에 더 가깝게 만들 수 있다. 그러나 특히 대통령령 2025/10의 적용을 받는 기관의 경우, 완전하고 견고한 준수를 위해서는 시맨틱 브레드크럼 마크업과 내비게이션 표시를 서버 측 또는 빌드 타임에 구현하는 것이 여전히 권장된다. 오버레이 솔루션은 기본적인 접근 가능한 마크업을 대체하는 것이 아니라 보완하는 역할을 하기 때문이다.