Toast
자동 소멸되는 가벼운 알림 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용role 설정
비긴급 알림은 role="status"(aria-live="polite"), 오류/경고 등 긴급 알림은 role="alert"(aria-live="assertive")를 사용해야 합니다.
키보드 포커스 이동 금지
Toast는 현재 작업을 방해하지 않아야 합니다. 표시될 때 사용자의 포커스를 가로채지 마세요.
충분한 표시 시간
자동 소멸되는 toast는 최소 5초 이상 노출해야 하며, 사용자가 시간을 늘리거나 영구 표시로 전환할 수 있어야 합니다. WCAG 2.2.3 요구사항입니다.
닫기 버튼 키보드 접근
닫기 버튼이 있는 경우 키보드로 접근하고 활성화할 수 있어야 하며, aria-label로 닫기 동작을 명시해야 합니다.
hover/focus 시 타이머 일시정지
사용자가 toast 위에 포커스를 두거나 마우스를 올리면 자동 닫힘 타이머를 일시정지해야 합니다.
색상 외 아이콘으로 유형 구분
success/error/warning/info를 색상만으로 구분하지 말고 아이콘과 텍스트 라벨을 함께 제공하세요.
동시 표시 개수 제한
동시에 여러 toast가 쌓이면 스크린리더가 과부하됩니다. 최대 개수를 제한하고 오래된 순서로 자동 제거하세요.
중요한 정보는 toast로만 전달하지 말 것
사용자가 놓칠 수 있으므로 중요한 오류나 확인이 필요한 내용은 toast가 아니라 alert-dialog나 인라인 메시지로 전달하세요.
3초 미만 자동 닫힘
WCAG 2.2.3 실패 항목입니다. 저시력 사용자와 스크린리더 사용자가 메시지를 읽을 시간이 부족합니다.
toast 내부에 복잡한 폼/버튼
toast는 간단한 안내/실행 취소 용도로 사용하고, 복잡한 상호작용이 필요하면 dialog 또는 inline 메시지를 사용하세요.
색상만으로 심각도 전달
빨간색=오류처럼 색상만으로 의미를 전달하면 색각이상 사용자가 인식할 수 없습니다.
추가 체크포인트
autoHideDuration은 5000ms 이상
WCAG 2.2.3 준수를 위해 autoHideDuration을 최소 5000ms 이상으로 설정하세요.
action prop으로 닫기 버튼 제공
Snackbar의 action prop에 닫기 버튼을 추가하여 키보드 사용자가 직접 닫을 수 있게 하세요.
Alert와 조합 시 severity 설정
Snackbar 내부에 Alert를 사용하면 severity에 따른 아이콘과 색상이 자동으로 적용됩니다.
코드 샘플
구현 노트
- –MUI Snackbar는 role="presentation"을 사용하고, 내부 Alert가 role="alert"를 제공합니다.
- –autoHideDuration으로 자동 닫힘 시간을 설정합니다. WCAG 2.2.3에 따라 5000ms 이상을 권장합니다.
- –Alert의 severity prop(success, error, warning, info)에 따라 아이콘과 색상이 자동 적용됩니다.
- –onClose의 reason이 "clickaway"인 경우를 제외하면 의도치 않은 닫힘을 방지할 수 있습니다.