모든 패턴

Chip / Tag

선택, 필터링, 삭제가 가능한 인터랙티브 태그 컴포넌트

관련 WCAG 기준 — 클릭하여 상세 보기

기본 코드 예시

Baseline (HTML)tsx
Loading...

공통 베이스라인

모든 디자인 시스템에 적용
Must4

  • 인터랙티브 칩은 button

    클릭/삭제 가능한 chip은 <button> 또는 role="button"으로 구현하고 Tab 순서에 포함되어야 합니다.

  • 삭제 버튼에 접근명

    × 아이콘만 있는 삭제 버튼에는 aria-label="Remove <태그명>"처럼 대상 chip을 명시하는 접근명을 제공하세요.

  • 그룹에 role과 label

    여러 chip을 묶을 때는 role="group" 또는 role="listbox"와 aria-label로 그룹 목적을 명시하세요.

  • 키보드 작동

    Enter/Space로 활성화하고, 삭제 가능한 chip은 포커스된 상태에서 Backspace/Delete로 삭제가 호출되어야 합니다.

Should2

  • 삭제 후 포커스 이동

    chip 삭제 시 포커스가 사라지지 않도록 인접 chip 또는 부모 컨테이너로 포커스를 옮기세요.

  • 선택 상태 전달

    선택 가능한 chip은 aria-pressed 또는 aria-selected로 현재 선택 상태를 스크린리더에 전달하세요.

Avoid2

  • 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 Chiptsx
Loading...

구현 노트

  • –MUI Chip에 onClick 또는 onDelete를 전달하면 자동으로 tab 순서에 포함되고 role='button'처럼 동작합니다.
  • –포커스된 Chip에서 Backspace/Delete 키로 onDelete가 호출되며, Escape는 blur 처리됩니다 (MUI 내장 동작).
  • –삭제 아이콘의 기본 접근명은 브라우저 언어에 따라 달라집니다. 명확성을 위해 Chip에 aria-label을 지정하거나 label 자체에 의미를 담으세요.
  • –Stack에 role="group"과 aria-label을 부여해 chip 그룹의 목적을 전달하세요.

참고 문서