기본 코드 예시
공통 베이스라인
role과 aria-live 설정
긴급 알림은 role="alert"(aria-live="assertive"), 비긴급 상태 메시지는 role="status"(aria-live="polite")를 사용해야 합니다.
동적으로 내용 삽입
live region은 컨테이너가 DOM에 이미 존재하는 상태에서 내용이 변경되어야 스크린리더가 감지합니다. 빈 컨테이너를 미리 렌더링하고 메시지를 삽입하세요.
키보드 포커스 이동 금지
Alert live region은 사용자 작업을 방해하지 않아야 합니다. 알림을 표시할 때 자동으로 포커스를 이동시키지 마세요.
색상 외 수단으로 유형 전달
success/error/warning/info를 색상만이 아닌 텍스트나 아이콘으로도 구분해야 합니다.
aria-atomic 활용
메시지 일부만 변경되는 경우 aria-atomic="true"로 전체 내용을 다시 읽도록 하여 문맥이 끊기지 않게 하세요.
assertive 남용 금지
role="alert"/aria-live="assertive"는 사용자의 현재 읽기를 중단시킵니다. 실제 긴급한 상황에만 사용하세요.
sr-only 시각 숨김 처리
시각적으로 다른 위치에 UI가 있는 경우, live region 자체는 sr-only 클래스로 숨기고 메시지만 복제하여 스크린리더가 읽도록 하세요.
페이지 로드 시 이미 존재하는 alert
페이지 로드 시 이미 DOM에 있는 role="alert" 요소는 스크린리더가 자동으로 읽지 않습니다. 반드시 동적으로 삽입하세요.
live region에 상호작용 요소 배치
live region 내부에 버튼/링크 등 포커스 가능 요소를 두면 스크린리더 동작이 예측 불가해집니다. 버튼이 필요하면 toast 패턴을 사용하세요.
자동 닫힘 alert
자동으로 사라지는 알림은 toast 패턴입니다. 이 패턴은 영속적인 상태 메시지만 다룹니다.
디자인 시스템별 구현
추가 체크포인트
severity로 유형 전달
MUI Alert의 severity prop(success, error, warning, info)에 따라 아이콘과 색상이 자동 적용되어 색상 외 수단으로 유형을 전달합니다.
role="alert" 자동 설정 확인
MUI Alert는 기본적으로 role="alert"를 사용합니다. 비긴급 메시지에는 role="status"로 변경하세요.
코드 샘플
구현 노트
- –MUI Alert는 기본적으로 role="alert"를 사용하여 스크린리더에 즉시 전달됩니다.
- –severity prop에 따라 적절한 아이콘이 자동 표시되어 색상 외 수단으로 유형을 구분합니다.
- –AlertTitle로 제목을 추가하면 메시지 구조가 더 명확해집니다.
- –variant prop으로 filled, outlined, standard 스타일을 선택할 수 있습니다.