Alert / Toast
사용자 작업을 방해하지 않고 중요 메시지를 전달하는 알림 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용role 명시
긴급 알림은 role="alert"(aria-live="assertive"), 비긴급은 role="status"(aria-live="polite")를 사용해야 합니다.
키보드 포커스 이동 금지
Alert/Toast는 사용자 작업을 방해하지 않아야 합니다. 표시될 때 자동으로 키보드 포커스를 이동시키지 마세요.
닫기 버튼 키보드 접근 가능
닫기(dismiss) 버튼이 있는 경우 키보드로 접근하고 활성화할 수 있어야 합니다.
충분한 표시 시간
자동으로 사라지는 토스트는 사용자가 읽기에 충분한 시간(최소 5초)을 제공해야 합니다. WCAG 2.2.3 요구사항입니다.
색상 외 아이콘으로 유형 구분
success/error/warning/info를 색상만으로 구분하지 말고 아이콘을 함께 사용하세요.
자동 닫힘 일시정지
사용자가 호버하거나 포커스를 두면 자동 닫힘 타이머를 일시정지하세요.
알림 쌓임 관리
동시에 여러 토스트가 표시되면 스크린리더 사용자에게 과부하가 됩니다. 최대 개수를 제한하세요.
너무 빠른 자동 닫힘
3초 미만으로 자동 닫히면 WCAG 2.2.3(타이밍 조정 가능) 실패입니다. 충분한 시간을 주거나 수동 닫기만 허용하세요.
색상만으로 심각도 전달
빨간색=오류처럼 색상만으로 의미를 전달하면 색맹 사용자가 인식할 수 없습니다.
페이지 로드 시 미리 존재하는 alert
페이지 로드 시 이미 DOM에 있는 role="alert" 요소는 스크린리더가 자동으로 읽지 않습니다. 동적으로 삽입하세요.
추가 체크포인트
Snackbar + Alert 조합
MUI에서 토스트 알림은 Snackbar 안에 Alert를 넣어 사용합니다. Snackbar가 위치를, Alert가 의미론적 role을 담당합니다.
autoHideDuration 최소 5000ms
autoHideDuration을 5000 미만으로 설정하면 WCAG 2.2.3에 위배됩니다.
코드 샘플
구현 노트
- –MUI Alert 단독 사용 시 role="alert"가 자동 적용됩니다.
- –Snackbar의 onClose는 Escape 키 및 외부 클릭에 반응합니다.
- –severity prop (success/info/warning/error)이 아이콘과 색상을 자동 적용합니다.