보이지 않는 배경이 조작되는 문제
모바일 drawer를 화면 위에 올렸지만 Tab을 누르면 뒤쪽 main의 link로 focus가 이동합니다. CSS로 가리거나 pointer-events: none만 적용하면 pointer는 막아도 keyboard와 접근성 API의 상태는 그대로일 수 있습니다.
inert가 설정된 element와 flat tree descendant는 일반적으로 focus할 수 없고 hit testing과 접근성 API에서도 제외되므로, 보이지 않거나 사용할 수 없는 영역에만 적용해야 합니다.
interaction 경계를 만드는 흐름
custom drawer가 열릴 때 header·main·footer를 묶은 background shell에 inert를 적용하고 닫을 때 제거합니다. drawer 자신을 포함한 공통 ancestor에 inert를 설정하면 drawer도 사용할 수 없으므로 두 영역을 sibling으로 둡니다.
const background = document.querySelector('#page-shell');
const drawer = document.querySelector('#course-drawer');
const openButton = document.querySelector('#open-courses');
function openDrawer() {
background.inert = true;
drawer.hidden = false;
drawer.querySelector('button, a')?.focus();
}
function closeDrawer() {
drawer.hidden = true;
background.inert = false;
openButton.focus();
}
보이는 상태와 focus 검증
inert에는 기본 시각 표현이 없으므로 overlay나 off-canvas 위치로 사용할 수 없는 영역임을 sighted user에게도 보여 줍니다. 닫힌 drawer는 hidden 등으로 접근성 트리와 layout에서 제외하고, 열린 동안 Esc 닫기와 focus 복귀를 구현합니다. modal 요구에 맞는 화면이라면 수동 inert 조합보다 browser가 바깥 문서를 inert로 만드는 dialog.showModal()을 먼저 검토합니다. keyboard, screen reader와 200% 확대에서 배경 조작이 차단되는지 확인합니다.
공식 문서
현재 지원 browser에서 inert, hidden과 focus 복귀를 실제 보조 기술로 확인합니다.