기본 코드 예시
공통 베이스라인
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"인 경우를 제외하면 의도치 않은 닫힘을 방지할 수 있습니다.