복잡한 웹사이트의 계층 구조를 드러내는 브레드크럼(Breadcrumbs) 내비게이션 접근성

수천 개의 상품 카테고리를 보유한 전자상거래 쇼핑몰, 공공기관의 방대한 민원 서식 자료실, 대형 기술 문서 포털에서 '홈 > 고객지원 > 자주 묻는 질문 > 결제 오류'와 같이 현재 페이지의 위치를 계층적으로 보여주는 브레드크럼(Breadcrumbs, 빵부스러기 길) 내비게이션은 사용자의 길찾기를 돕는 핵심 UI입니다. 시각 중심 사용자는 이 경로를 보며 자신이 사이트의 어느 깊이에 들어와 있는지 즉시 인지하고, 상위 카테고리로 손쉽게 역주행합니다. 그러나 많은 웹사이트에서 브레드크럼을 <div>와 <span> 태그의 단순 나열로 구현하거나 화살표(>)를 일반 텍스트 노드로 삽입하여, 스크린리더 사용자에게 '홈, 보다 큼, 고객지원, 보다 큼, 자주 묻는 질문, 보다 큼'이라는 기괴하고 파편화된 음성 소음을 들려주는 실수를 저지릅니다. WCAG 2.2 성공 기준 2.4.8(Location, Level AAA)과 WAI-ARIA APG는 브레드크럼의 접근 가능한 표준 구조를 명문화하고 있습니다. 이 글에서는 스크린리더와 검색 엔진 모두를 만족시키는 브레드크럼 표준을 다룹니다.

브레드크럼 마크업에서 흔히 발생하는 3대 접근성 실수

웹 접근성 평가에서 지적되는 브레드크럼 오류는 주로 시맨틱 태그의 결여와 장식용 기호의 부주의한 노출에서 발생합니다.

첫째는 '구조적 목록(List) 태그의 부재'입니다. <div> 태그 안에 링크들을 나란히 배치하면, 스크린리더는 이 항목들이 서로 종속 관계를 갖는 순서 있는 목록인지 전혀 알지 못합니다.

둘째는 '구분 기호(Slash, Arrow)의 스크린리더 낭독 소음'입니다. 항목 사이에 <span> &gt; </span>나 <span> / </span>를 일반 텍스트로 적어두면, 스크린리더가 '홈, 부등호, 고객센터, 부등호'라고 낭독하여 사용자의 집중력을 심각하게 방해합니다.

셋째는 '현재 페이지(Current Page) 위치의 미표시'입니다. 브레드크럼의 가장 마지막 항목은 사용자가 현재 머물고 있는 페이지이지만, 이를 일반 텍스트로만 두거나 링크를 걸어두어 스크린리더 사용자에게 현재 활성화된 위치임을 알려주지 못하는 문제입니다.

W3C WAI-ARIA APG 브레드크럼 공식 마크업 아키텍처

접근성 높은 브레드크럼을 구축하기 위한 표준 코드는 다음 4가지 핵심 요소를 완벽히 결합해야 합니다.

• 1. <nav aria-label='브레드크럼'> 랜드마크 선언: 메인 내비게이션(GNB)과 명확히 구분될 수 있도록 nav 요소에 고유한 접근 가능한 이름을 부여합니다.
• 2. <ol> 순서 있는 목록 사용: 브레드크럼은 상위 개념에서 하위 개념으로 이어지는 명백한 위계 질서를 가지므로, <ul>이 아닌 <ol>(Ordered List) 태그를 사용하여 스크린리더가 '총 4개 중 1번째, 2번째...' 형태로 순서 정보를 낭독하게 만듭니다.
• 3. aria-current='page' 속성 부여: 목록의 마지막 항목(현재 페이지)에 aria-current='page'를 선언하여 보조공학 사용자에게 '현재 위치한 페이지'임을 명확히 통보합니다. (동시에 링크를 걸지 않고 텍스트로 두는 것이 일반적입니다).
• 4. 구분자(Separator)의 보조공학 차단: 항목 사이의 화살표나 슬래시는 CSS 가상 요소(li + li::before { content: '/'; })로 처리하거나, HTML에 <span>으로 넣더라도 aria-hidden='true'를 선언하여 스크린리더의 귀를 깨끗하게 보호해야 합니다.

Google Search Console과 연동되는 Schema.org 구조화 데이터

시맨틱 HTML 마크업으로 작성된 브레드크럼은 구글 검색 엔진 최적화(SEO)에도 엄청난 보너스를 제공합니다.

JSON-LD 스키마(BreadcrumbList)를 웹페이지 헤더에 삽입하면, 구글 검색 결과 화면에서 복잡한 영문 URL 대신 '웹접근성 체크랩 > 가이드 > 키보드 탐색'과 같이 한글 카테고리 경로가 선명하게 노출되는 리치 스니펫(Rich Snippet)을 획득할 수 있습니다. 이는 검색 클릭률(CTR)을 15% 이상 높이는 결정적인 시너지 효과를 창출합니다.

모바일 반응형 뷰포트에서의 브레드크럼 축약 전략

화면 폭이 360px 이하로 좁은 모바일 스마트폰 화면에서는 4~5단계에 달하는 긴 브레드크럼이 3~4줄로 줄바꿈되면서 화면 절반을 가리는 레이아웃 문제가 발생합니다.

이때 중간 경로를 '...' 말줄임 버튼(Dropdown)으로 축약하는 패턴을 적용하더라도, 축약 버튼에 aria-label='중간 경로 2개 더보기' 및 aria-expanded 속성을 바인딩하여 키보드 및 스크린리더 사용자가 언제든 숨겨진 상위 경로를 펼쳐볼 수 있도록 상호작용 접근성을 유지해야 합니다.