aria-hidden="true" 안에 초점 요소를 방치할 때 생기는 스크린리더 침묵과 inert 해결책

대화상자나 슬라이드 메뉴를 구현할 때 백그라운드 영역에 aria-hidden='true'를 지정했음에도 내부의 <button>, <a>, <input> 등 초점 가능 컨트롤의 키보드 진입을 관리하지 않으면, 구현 방식과 브라우저·보조기술 조합에 따라 포커스와 접근성 트리의 상태가 어긋날 수 있습니다. DOM 숨김 상태와 초점 가능 상태의 충돌 원인과 inert를 활용한 구조적 격리를 분석합니다.

aria-hidden='true'와 focusable 요소의 충돌 원리

aria-hidden='true'는 해당 요소와 하위 트리를 접근성 트리(Accessibility Tree)에서만 제외할 뿐, 브라우저 렌더링 엔진의 탭 탐색 순서(Tab Navigation Sequence)에는 영향을 주지 않습니다.

결과적으로 키보드 Tab 키를 누르면 화면상 보이지 않거나 비활성화된 영역으로 초점이 이동하지만, 스크린리더는 해당 요소가 접근성 트리에 없으므로 이름을 읽지 못하고 포커스만 머무는 문제가 발생합니다.

inert 속성을 통한 초점 및 접근성 트리 동시 격리

모달 외부를 비활성화해야 하는 경우 inert가 적절한 선택이 될 수 있습니다. 숨김 방식과 브라우저 지원 범위, 포커스 관리 구현을 함께 확인해야 합니다.

지원되는 환경에서 inert는 대상 하위 트리의 상호작용과 접근성 트리 노출을 함께 제한하는 데 사용할 수 있습니다.

• 주의 패턴: <aside aria-hidden='true'><button type='button'>배경 버튼</button></aside> (초점 진입 시 불일치)
• 구조적 격리: <aside inert><button type='button'>배경 버튼</button></aside> (초점 및 접근성 트리 동시 차단)
• 모달 닫힘 복구: 모달이 닫히면 aside의 inert 속성을 제거하고 직전 열기 버튼으로 초점을 복원