현재 페이지의 계층적 위치를 나타내는 탐색 경로 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
<nav> 랜드마크 사용
브레드크럼 전체를 <nav> 요소로 감싸고 aria-label="breadcrumb"로 레이블을 제공해야 합니다.
aria-current="page" 설정
현재 페이지를 나타내는 항목에 aria-current="page"를 설정해야 합니다.
<ol> 목록 사용
브레드크럼 항목은 <ol>로 마크업해야 스크린리더가 항목 수와 순서를 인식합니다.
구분자를 aria-hidden으로 숨김
/ 또는 > 구분자는 CSS content로 생성하거나 aria-hidden="true"로 스크린리더에서 숨기세요.
마지막 항목은 링크 아닌 텍스트
현재 페이지는 링크 대신 일반 텍스트로 표현하는 것이 더 명확합니다.
div/span 나열로 구현
목록 마크업 없이 div/span만 사용하면 스크린리더 사용자가 항목 수와 구조를 파악할 수 없습니다.
구분자를 링크 텍스트에 포함
"> Home > Products"처럼 구분자가 링크 텍스트에 포함되면 스크린리더가 구분자까지 읽습니다.
aria-label 직접 지정
MUI Breadcrumbs는 <nav> 역할을 하지만 aria-label을 자동으로 추가하지 않습니다. aria-label="breadcrumb"를 직접 추가하세요.