기본 코드 예시
공통 베이스라인
role="dialog" 설정
role="dialog"와 aria-modal="true"를 설정해야 합니다.
aria-labelledby 연결
모달 제목을 aria-labelledby로 dialog에 연결해야 합니다.
포커스 트랩
모달 내부로 포커스를 가두고 외부로 이동하지 않아야 합니다.
열릴 때 포커스 이동
모달 열림 시 첫 번째 포커스 가능 요소 또는 제목으로 포커스를 이동해야 합니다.
ESC 키로 닫기
Escape 키로 모달을 닫을 수 있어야 합니다.
닫힐 때 포커스 복원
모달 닫힘 시 모달을 열었던 트리거 요소로 포커스를 반환해야 합니다.
배경 스크롤 방지
모달 열림 시 배경 콘텐츠 스크롤을 막아 혼란을 방지하세요.
배경 inert 처리
모달 외부 콘텐츠에 inert 속성을 적용해 스크린리더 접근을 차단하세요.
aria-describedby로 설명 추가
모달 본문 설명이 있을 경우 aria-describedby로 연결하세요.
스크롤 가능한 배경 허용 금지
모달 열림 중 배경이 스크롤되면 사용자가 맥락을 잃습니다.
포커스 트랩 없는 구현 금지
Tab 키가 모달 외부로 나가면 시각 장애 사용자가 길을 잃습니다.
디자인 시스템별 구현
추가 체크포인트
aria-labelledby와 aria-describedby 명시
Dialog에 aria-labelledby로 DialogTitle의 id를, aria-describedby로 DialogContent의 id를 연결하세요. 자동 처리되지 않으므로 직접 설정해야 합니다.
keepMounted 사용 금지
keepMounted={true}는 닫힌 Dialog를 DOM에 유지합니다. 스크린리더가 숨겨진 콘텐츠를 읽을 수 있으므로 사용하지 마세요.
autoFocus로 초기 포커스 제어
모달 열릴 때 포커스를 특정 요소로 이동하려면 해당 요소에 autoFocus prop을 추가하세요.
코드 샘플
구현 노트
- –MUI Dialog는 포커스 트랩, Escape 닫기, 배경 클릭 닫기, 포커스 복원을 자동으로 처리합니다.
- –aria-labelledby와 aria-describedby는 MUI가 자동 처리하지 않으므로 직접 설정해야 합니다.
- –autoFocus prop으로 모달 열릴 때 첫 포커스 위치를 지정하세요. 일반적으로 기본 확인 버튼에 설정합니다.
- –DialogContentText는 자동으로 올바른 색상 대비와 타이포그래피를 적용합니다.