비활성 배경과 aria-modal

포커스를 가두더라도 모달 뒤쪽 콘텐츠는 여전히 DOM에 있습니다. 이를 차단하지 않으면 스크린 리더가 그 안으로 들어갈 수 있습니다.

inert 특성은 한 번의 설정으로 요소와 모든 자식 요소를 포커스 불가 및 클릭 불가 상태로 만들고, 보조 기술에서 제외합니다.

모달이 열릴 때 모달 바깥의 모든 요소에 inert를 추가하세요. 이제 누구도 뒤쪽 페이지에 실제로 접근할 수 없습니다.

모달이 닫히면 inert 특성을 제거하여 페이지를 다시 조작할 수 있게 하세요. 이를 잊으면 페이지가 멈춘 상태로 남습니다.

showModal()로 연 네이티브 dialog는 나머지 페이지를 자동으로 inert 상태로 만듭니다. 따라서 추가 코드 없이 이러한 보호 기능을 얻을 수 있습니다.

aria-modal을 true로 설정하면 이 대화 상자가 열려 있는 동안 바깥 콘텐츠를 사용할 수 없다는 사실을 보조 기술에 알립니다.

주의하세요. aria-modal은 스크린 리더에 정보를 전달할 뿐입니다. 실제로 포커스나 클릭을 차단하지 않으므로 inert도 사용해야 합니다.

견고한 방식은 배경에 inert를 적용하고 대화 상자에는 aria-modal을 설정하는 것입니다. 하나는 접근을 차단하고 다른 하나는 경계를 알려 줍니다.

inert가 폭넓게 지원되기 전에는 개발자들이 배경에 aria-hidden을 설정했습니다. 이 방법은 콘텐츠를 스크린 리더에서 숨겼지만 키보드 포커스까지 막지는 못했습니다.

흔히 발생하는 오류는 aria-hidden을 너무 넓게 적용하여 대화 상자까지 포함하는 것입니다. 모달이 숨겨진 영역에 들어가지 않도록 하세요.

모달을 연 상태에서 브라우저의 접근성 트리를 여세요. 뒤쪽 페이지가 트리에서 사라지고 대화 상자만 남아 있는지 확인하세요. ✅

뒤쪽 페이지를 inert로 만들고 aria-modal을 선언하는 방법을 배웠습니다. 이제 사용자가 접근할 수 있는 것은 실제로 모달 하나뿐입니다. 🎯