기본 코드 예시
공통 베이스라인
role="dialog"와 aria-modal="true"
드로어 패널에 role="dialog"와 aria-modal="true"를 설정해야 합니다.
레이블 제공
드로어에 aria-labelledby 또는 aria-label로 레이블을 제공해야 합니다.
포커스 트랩
드로어가 열렸을 때 Tab/Shift+Tab이 드로어 내부에서만 순환해야 합니다.
Escape로 닫기
Escape 키로 드로어를 닫을 수 있어야 합니다.
포커스 관리
드로어 열릴 때 내부 첫 포커스 가능 요소로 포커스 이동, 닫힐 때 트리거로 포커스 복귀해야 합니다.
배경 inert 처리
드로어가 열려 있을 때 배경 콘텐츠에 inert 속성으로 스크린리더가 배경을 읽지 못하게 하세요.
배경 오버레이 클릭으로 닫기
드로어 외부 오버레이를 클릭하면 닫히도록 구현하세요.
포커스 트랩 없이 배경 포커스 허용
드로어가 열린 상태에서 배경 요소에 Tab으로 이동할 수 있으면 스크린리더 사용자가 경계를 파악하기 어렵습니다.
시각적 닫기 버튼 미제공
모바일 사용자는 Escape 키가 없으므로 항상 시각적 닫기 버튼을 제공하세요.
디자인 시스템별 구현
추가 체크포인트
Drawer에 aria-labelledby 연결
Drawer에 aria-labelledby prop으로 드로어 제목 요소의 id를 연결해야 스크린리더가 드로어를 올바르게 식별합니다.
variant="temporary"는 Modal 기반
variant="temporary"(기본값)는 Modal 위에 렌더링되어 포커스 트랩, Escape 닫기, 배경 오버레이를 자동으로 처리합니다.
닫기 버튼에 aria-label 필수
아이콘만 있는 닫기 버튼에는 반드시 aria-label="Close navigation"처럼 목적을 설명하는 레이블을 제공하세요.
코드 샘플
구현 노트
- –MUI Drawer variant="temporary"는 Modal 기반으로 포커스 트랩, Escape 닫기, 포커스 복원을 자동 처리합니다.
- –aria-labelledby를 드로어 제목 id와 연결하면 스크린리더가 "다이얼로그, Navigation"으로 읽습니다.
- –내비게이션 목적의 드로어 내부에는 <nav aria-label>로 시맨틱 랜드마크를 제공하세요.
- –keepMounted={false}(기본값)는 닫혔을 때 DOM에서 제거하여 스크린리더 혼란을 방지합니다.