Chip / Tag
선택, 필터링, 삭제가 가능한 인터랙티브 태그 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용인터랙티브 칩은 button
클릭/삭제 가능한 chip은 <button> 또는 role="button"으로 구현하고 Tab 순서에 포함되어야 합니다.
삭제 버튼에 접근명
× 아이콘만 있는 삭제 버튼에는 aria-label="Remove <태그명>"처럼 대상 chip을 명시하는 접근명을 제공하세요.
그룹에 role과 label
여러 chip을 묶을 때는 role="group" 또는 role="listbox"와 aria-label로 그룹 목적을 명시하세요.
키보드 작동
Enter/Space로 활성화하고, 삭제 가능한 chip은 포커스된 상태에서 Backspace/Delete로 삭제가 호출되어야 합니다.
삭제 후 포커스 이동
chip 삭제 시 포커스가 사라지지 않도록 인접 chip 또는 부모 컨테이너로 포커스를 옮기세요.
선택 상태 전달
선택 가능한 chip은 aria-pressed 또는 aria-selected로 현재 선택 상태를 스크린리더에 전달하세요.
chip 본체와 삭제를 같은 트리거로 묶기 금지
chip 본체 클릭이 선택과 삭제를 동시에 수행하면 사용자가 실수로 삭제할 수 있습니다. 삭제는 별도 버튼에 위임하세요.
아이콘만 있는 버튼에 접근명 없음
× 아이콘만 렌더링하고 aria-label이 없으면 스크린리더 사용자가 기능을 알 수 없습니다.
추가 체크포인트
onDelete/onClick 사용 시 button 동작 확인
MUI Chip은 onClick 또는 onDelete prop이 있으면 Tab 순서에 포함되고 포커스된 상태에서 Backspace/Delete로 onDelete가 호출됩니다. 접근성 API가 자동 연결됩니다.
deleteIcon에 aria-label 확인
커스텀 deleteIcon을 사용할 때는 MUI 기본 접근명이 유실될 수 있습니다. 필요하면 Chip 자체에 aria-label을 지정해 대상을 명시하세요.
색상만으로 상태 구분 금지
color prop(primary/success/error)만으로 상태를 구분하지 말고 label 텍스트 또는 아이콘을 함께 사용하세요.
코드 샘플
구현 노트
- –MUI Chip에 onClick 또는 onDelete를 전달하면 자동으로 tab 순서에 포함되고 role='button'처럼 동작합니다.
- –포커스된 Chip에서 Backspace/Delete 키로 onDelete가 호출되며, Escape는 blur 처리됩니다 (MUI 내장 동작).
- –삭제 아이콘의 기본 접근명은 브라우저 언어에 따라 달라집니다. 명확성을 위해 Chip에 aria-label을 지정하거나 label 자체에 의미를 담으세요.
- –Stack에 role="group"과 aria-label을 부여해 chip 그룹의 목적을 전달하세요.