브레드크럼 컴포넌트 예제

WCAG 2.1 AA 준수 전문 브레드크럼 네비게이션

2단계 브레드크럼 예제

간단한 브레드크럼 경로를 보여줍니다: 홈 > 기능 (현재 페이지)

3단계 브레드크럼 예제

더 깊은 브레드크럼 경로를 보여줍니다: 홈 > 시민 정보기관 > 기능 (현재 페이지)

4단계 브레드크럼 예제

4단계의 네비게이션 계층 구조를 가진 더욱 깊은 브레드크럼 경로를 보여줍니다.

접근성 기능

시맨틱 HTML: <nav> 요소와 aria-label="브레드크럼" 및 <ol> 목록 구조 사용
ARIA 속성: 현재 페이지는 aria-current="page"로 표시
키보드 네비게이션: 모든 링크는 Tab 키로 접근 가능하며 명확한 포커스 표시기 제공
스크린 리더 친화적: 적절한 시맨틱 구조가 네비게이션 컨텍스트를 알려줌
색상 대비: WCAG 2.1 AA 기준 충족 (최소 4.5:1)
반응형 디자인: 모바일, 태블릿, 데스크톱 뷰포트에 맞게 조정
테마 지원: 라이트 모드, 다크 모드, Black Trigram 테마에서 작동

사용 방법

<!-- 브레드크럼 네비게이션 구조 -->
<nav aria-label="브레드크럼">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="index_ko.html">홈</a>
    </li>
    <li class="breadcrumb-item">
      <a href="section_ko.html">섹션</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      현재 페이지
    </li>
  </ol>
</nav>

테스트 체크리스트

✅ 키보드 네비게이션 (Tab, Shift+Tab, Enter)
✅ 스크린 리더 알림 (NVDA, JAWS, VoiceOver로 테스트)
✅ 색상 대비가 WCAG 2.1 AA 충족 (일반 텍스트 4.5:1)
✅ 모든 뷰포트 크기에서 반응형 디자인 작동
✅ 포커스 표시기가 명확하게 표시됨
✅ 호버 상태가 시각적 피드백 제공
✅ 라이트 모드와 다크 모드에서 작동
✅ Black Trigram 테마에서 작동