Badge
다른 요소에 부착되어 상태/카운트를 시각적으로 나타내는 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용배지를 포함하는 요소에 접근명 제공
배지가 붙은 부모 요소(버튼/아이콘)에 aria-label로 전체 의미를 전달해야 합니다. 숫자만으로는 의미가 전달되지 않습니다.
카운트에 단위 포함
"3" 대신 "3 unread notifications"처럼 단위와 맥락을 포함한 접근명을 작성하세요.
색상만으로 의미 전달 금지
success/error/warning 상태를 색상만으로 구분하지 말고 텍스트 라벨 또는 접근명을 함께 제공하세요. (WCAG 1.4.1)
장식용 배지는 aria-hidden
시각적 표시만 담당하는 dot 배지에는 aria-hidden="true"를 추가하고, 의미는 부모 요소에서 전달하세요.
동적 업데이트는 live region
실시간으로 변하는 카운트는 role="status" 또는 aria-live="polite"로 변경을 알리세요.
중복 안내 금지
부모 요소와 배지 텍스트가 모두 읽혀 "inbox 3 3"처럼 중복되지 않도록 배지 텍스트는 aria-hidden으로 숨기세요.
색상만으로 상태 구분 금지
green dot과 red dot 만으로 success/error를 구분하는 UI는 색맹 사용자가 구분할 수 없습니다.
추가 체크포인트
부모 요소에 aria-label 추가
MUI Badge는 badgeContent의 숫자가 스크린리더에 신뢰성 있게 전달되지 않습니다. 감싸는 IconButton이나 버튼에 aria-label로 전체 의미를 제공하세요.
variant="dot"은 색 외의 단서 필요
dot 배지는 시각적 표시만 담당하므로 부모 요소 aria-label에 상태를 포함시키세요.
showZero 여부 결정
badgeContent={0}은 기본적으로 숨겨집니다. 0도 표시해야 한다면 showZero를 명시하세요.
코드 샘플
구현 노트
- –MUI Badge의 badgeContent는 시각적 표시이며 스크린리더 안내로는 부족합니다. 부모 IconButton/버튼의 aria-label에 전체 문맥을 작성하세요.
- –max prop은 overflow 표시(99+)를 자동 처리합니다.
- –variant='dot'은 아이콘만 있는 배지로, color prop이 상태 의미를 전달합니다. 색상에만 의존하지 말고 aria-label로 의미를 제공하세요.
- –badgeContent={0}은 기본적으로 숨겨집니다. 0도 표시하려면 showZero를 사용하세요.