컴포넌트 패턴

브레드크럼(현재 위치)

사이트 계층 구조에서 현재 페이지의 위치를 상위 페이지 링크 목록으로 보여 주는 브레드크럼을 <nav>, 순서 있는 목록, aria-current="page"로 만드는 방법입니다.

역할

navigationlistlistitemlink

속성

aria-currentaria-labelaria-labelledby

언제 쓰나요

브레드크럼(breadcrumb trail)은 “홈 › 제품 › 노트북 › 13인치”처럼 현재 페이지에 이르는 상위 페이지들을 계층 순서대로 보여 주는 링크 목록입니다. 사용자가 사이트 안에서 자신의 위치를 파악하고, 상위 단계로 바로 이동하게 돕습니다.

계층이 두 단계 이상인 사이트(쇼핑몰 분류, 문서 사이트, 관리자 화면)에 알맞습니다.
계층이 거의 없는 사이트나, 방문 기록(“뒤로 가기” 경로)을 보여 주는 용도로는 쓰지 않습니다. 브레드크럼은 방문 순서가 아니라 사이트 구조를 나타냅니다.
브레드크럼은 주 메뉴를 대신하지 않습니다. 주 메뉴와 함께 쓰는 보조 탐색입니다.

전용 ARIA 역할은 없습니다

브레드크럼은 새 역할 없이 네이티브 HTML만으로 만듭니다. <nav>(navigation 랜드마크), <ol>(순서 있는 목록), <a>(링크)에 aria-current와 이름만 더하면 됩니다. 이 사이트 상단의 “현재 위치”도 같은 방식으로 만들어져 있습니다.

구조

전체를 <nav>로 감싸 navigation 랜드마크로 만들고, aria-label로 “현재 위치”, “경로”, “Breadcrumb” 같은 이름을 줍니다. 페이지에는 보통 주 메뉴 <nav>도 있으므로 이름으로 구분해야 합니다.
링크들을 <ol>로 감쌉니다. 순서가 의미 있으므로 <ul>보다 <ol>이 알맞습니다. 화면낭독기는 “목록, 4개 항목”처럼 단계 수를 알려 줍니다.
현재 페이지를 나타내는 마지막 항목에 aria-current="page"를 줍니다. APG는 마지막 항목도 링크로 두고 aria-current를 붙이는 방식을 씁니다. 링크 없이 텍스트로만 두는 경우에도 aria-current="page"를 줄 수 있습니다.
“›”, “/” 같은 구분 기호는 CSS로 그려 보조기술이 읽지 않게 합니다. 목록 구조가 이미 단계를 표현하므로, 구분 기호를 텍스트로 넣으면 “보다 큼” 같은 불필요한 안내가 반복됩니다.

역할과 속성 관계

<nav aria-label="현재 위치">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/products/">제품</a></li>
    <li><a href="/products/laptop/">노트북</a></li>
    <li><a href="/products/laptop/13/" aria-current="page">13인치</a></li>
  </ol>
</nav>

CSS 구분 기호도 읽힐 수 있습니다

CSS ::before의 content에 넣은 문자는 접근성 트리에 포함되어 화면낭독기가 읽을 수 있습니다. 구분 기호를 확실히 감추려면 APG 예시처럼 content: ""에 테두리(border)로 사선을 그리거나, 대체 텍스트 문법 content: "›" / ""를 씁니다. 대체 텍스트 문법을 지원하지 않는 오래된 브라우저에서는 선언 전체가 무시되므로 앞에 일반 선언을 함께 두는 방법도 있습니다.

키보드 동작

브레드크럼은 일반 링크 목록이므로 별도 키보드 동작이 없습니다. Tab으로 각 링크를 차례로 이동하고 Enter로 이동합니다. 화면낭독기 사용자는 랜드마크 이동 키(NVDA의 D 등)로 “현재 위치” 영역에 바로 갈 수 있습니다.

필요한 ARIA

필요한 ARIA
역할·속성	붙이는 곳	설명
`navigation`	`<nav>`	탐색 랜드마크. `<nav>`를 쓰면 자동으로 주어지므로 `role`을 따로 쓰지 않습니다.
`aria-label` 또는 `aria-labelledby`	`<nav>`	“현재 위치”처럼 랜드마크 이름을 줍니다. 이름에 “탐색”, “메뉴” 같은 역할 이름을 넣지 않습니다(“현재 위치 탐색, 탐색”처럼 중복해서 읽힘).
`aria-current="page"`	현재 페이지 링크(마지막 항목)	목록 안에서 현재 페이지에 해당하는 항목임을 알립니다. 시각적으로도 굵게 하거나 밑줄을 없애 구분합니다.
`list` / `listitem`	`<ol>` / `<li>`	네이티브 목록이 자동으로 제공합니다. CSS `list-style: none`으로 일부 브라우저(Safari)가 목록 의미를 없애는 경우가 있어, 필요하면 `<ol role="list">`로 보완합니다.

직접 해 보기

왼쪽은 구분 기호를 텍스트로 넣고 현재 위치를 색으로만 표시한 구현이고, 오른쪽은 올바른 구현입니다. Tab으로 링크를 이동해 보고, 실시간 코드에서 구조를 비교해 보세요. (데모 링크는 페이지를 이동하지 않습니다.)

잘못된 구현

홈 > 제품 > 노트북 > 13인치

랜드마크·목록이 없어 위치 영역으로 바로 갈 수 없고, “>”가 “보다 큼”으로 읽히며, 현재 페이지는 색으로만 구분됩니다.

올바른 구현

구분 기호는 CSS 테두리로 그려 읽히지 않습니다.

실시간 코드

전체 코드

비권장비권장: 텍스트 구분 기호, 랜드마크·현재 위치 없음

<div class="breadcrumb">
  <a href="/">홈</a> &gt;
  <a href="/products/">제품</a> &gt;
  <a href="/products/laptop/">노트북</a> &gt;
  <span class="active">13인치</span>
</div>

권장권장: nav + ol + aria-current

<nav aria-label="현재 위치" class="breadcrumb">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/products/">제품</a></li>
    <li><a href="/products/laptop/">노트북</a></li>
    <li><a href="/products/laptop/13/" aria-current="page">13인치</a></li>
  </ol>
</nav>

CSS

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
/* 구분 기호: 글자가 아니라 테두리로 그려 화면낭독기가 읽지 않게 합니다. */
.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.8em;
  margin: 0 0.625em 0 0.25em;
  border-right: 2px solid currentColor;
  transform: rotate(20deg);
}
/* 현재 페이지는 색 말고도 굵기·밑줄로 구분합니다. */
.breadcrumb [aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

브레드크럼은 JavaScript가 필요 없습니다. 페이지를 서버나 빌드 단계에서 만들 때 현재 페이지 항목에 aria-current="page"를 넣습니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황	들리는 안내 (예)
랜드마크 이동으로 브레드크럼에 도달	현재 위치, 탐색 랜드마크, 목록, 4개 항목
첫 링크에 포커스	홈, 링크
마지막 링크에 포커스	현재 페이지, 13인치, 링크
잘못된 구현을 가상 커서로 읽음	홈, 링크, 보다 큼, 제품, 링크, 보다 큼, …, 13인치

점검 체크리스트

브레드크럼 전체가 <nav>로 감싸져 있고, “현재 위치”처럼 다른 nav와 구분되는 이름이 있습니다.
랜드마크 이름에 “탐색”, “내비게이션” 같은 역할 이름을 중복해 넣지 않았습니다.
링크들이 <ol>과 <li>로 순서대로 나열되어 있습니다.
현재 페이지 항목에 aria-current="page"가 있고, 시각적으로도 색 이외의 방법으로 구분됩니다.
구분 기호가 텍스트로 들어 있지 않아 화면낭독기가 읽지 않습니다.
각 링크 텍스트가 대상 페이지의 제목과 일치해 목적을 알 수 있습니다.
좁은 화면에서도 줄바꿈되어 내용이 잘리지 않습니다.

참고 자료

APG: 브레드크럼(현재 위치) 패턴 (새 창)

보기 설정