사용자 확인이 반드시 필요한 모달 대화상자 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
role과 modal 속성
role="alertdialog"와 aria-modal="true"를 사용해 사용자 확인이 필요한 모달임을 명시해야 합니다.
라벨과 설명 연결
aria-labelledby로 제목을, aria-describedby로 본문 설명을 연결해야 합니다. 설명은 사용자의 결정을 돕는 문장이어야 합니다.
포커스 트랩
dialog가 열리면 Tab/Shift+Tab 포커스가 dialog 내부만 순환해야 하며, 외부 요소로 이동되지 않아야 합니다.
초기 포커스와 복귀
열릴 때 가장 덜 파괴적인 버튼(대개 취소)에 초기 포커스를 두고, 닫힐 때는 dialog를 트리거한 요소로 포커스를 복귀해야 합니다.
ESC로 닫기
ESC 키를 누르면 dialog가 닫혀야 하며, 이는 취소 동작과 동일하게 처리되어야 합니다.
배경 비활성화
dialog 외부 요소는 inert 또는 aria-hidden으로 스크린리더와 포커스에서 제외해야 합니다.
버튼 라벨 명확화
"확인"/"취소" 대신 "삭제"/"삭제 안 함"처럼 동작을 설명하는 라벨을 사용하세요.
파괴적 동작은 강조
파괴적 동작(삭제, 제거) 버튼은 색상과 위치로 주의를 환기시키고, 기본 포커스는 취소에 두세요.
배경 클릭으로 닫기 주의
중요한 확인 dialog는 overlay 클릭만으로 닫히지 않도록 해야 합니다. 사용자가 실수로 결정을 건너뛸 수 있습니다.
role="dialog"만 사용
사용자 확인이 반드시 필요한 경우 role="dialog"가 아니라 role="alertdialog"를 사용해야 스크린리더가 긴급성을 전달합니다.
설명 없이 버튼만
"정말 삭제하시겠습니까?"만 있고 무엇이 삭제되는지 설명이 없으면 사용자가 결정할 수 없습니다. 항목 이름과 결과를 명시하세요.
페이지 로드 시 자동 열림
사용자 액션 없이 페이지 로드 시 alert-dialog가 열리면 맥락을 잃어 당황스럽습니다. 반드시 사용자 동작에 대한 응답으로 열리게 하세요.
role="alertdialog" 명시적 추가
MUI Dialog는 기본적으로 role="dialog"를 사용합니다. 사용자 확인이 필요한 경우 PaperProps에 role="alertdialog"를 명시적으로 추가하세요.
aria-labelledby와 aria-describedby 설정
Dialog에 aria-labelledby로 DialogTitle의 id를, aria-describedby로 DialogContentText의 id를 연결하세요.