[부트스트랩 모달 닫힐 때 발생하는 aria-hidden 오류 해결 방법]

부트스트랩을 활용하여 모달 창을 구현할 때 종종 aria-hidden 관련 오류가 발생하는 경우가 있다. 특히 모달이 닫힐 때 다음과 같은 콘솔 오류 메시지를 확인할 수 있다.

list_mat.php:1 Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus.

이 오류는 웹 접근성과 관련된 문제이며, aria-hidden 속성이 초점을 받은 요소(예: 버튼, 입력 필드 등)를 포함하는 부모 요소에 적용되었을 때 발생한다. 모달이 닫히는 순간, 초점이 여전히 모달 내부의 요소에 남아 있으면 이와 같은 경고가 나타난다. 이를 해결하기 위해 몇 가지 방법을 살펴보자.

 

 

---

1. 모달이 닫힐 때 초점을 적절한 요소로 이동하기

모달이 닫힌 후, 초점을 자동으로 다른 요소(예: 모달을 연 버튼)로 이동하면 문제를 해결할 수 있다. 부트스트랩 모달의 hidden.bs.modal 이벤트를 활용하면 쉽게 구현 가능하다.

$('#myModal').on('hidden.bs.modal', function () {
    $('#openModalButton').focus(); // 모달을 연 버튼으로 초점 이동
});

위 코드에서 #openModalButton은 사용자가 모달을 열었던 버튼이다. 이렇게 하면 모달이 닫힐 때 초점이 사라지지 않고, 모달 바깥의 적절한 요소로 이동하게 된다.

 

---

2. inert 속성 활용하기

aria-hidden 대신 inert 속성을 사용하면 초점을 방지하면서도 접근성을 유지할 수 있다. inert 속성은 요소를 비활성화하고 초점이 이동하지 않도록 막아주는 역할을 한다.

$('#myModal').on('shown.bs.modal', function () {
    $('body > *').not('#myModal').attr('inert', 'true'); // 모달 외의 요소 비활성화
});

$('#myModal').on('hidden.bs.modal', function () {
    $('body > *').not('#myModal').removeAttr('inert'); // 비활성화 해제
});

이 방식은 모달이 열릴 때 페이지의 다른 요소가 비활성화되도록 하여 초점이 모달 내부에만 머물도록 강제한다. 반대로 모달이 닫히면 다시 활성화된다.

 

---

3. data-bs-focus 옵션 활용하기

부트스트랩 5에서는 data-bs-focus="false" 속성을 추가하면 자동 초점 기능을 비활성화할 수 있다.

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true" data-bs-focus="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">모달 제목</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        내용이 들어갑니다.
      </div>
    </div>
  </div>
</div>

이렇게 설정하면 모달이 열릴 때 자동으로 특정 요소에 초점이 맞춰지는 현상을 방지할 수 있다.

 

 

---

4. setTimeout을 사용하여 초점 변경

만약 위 방법으로도 해결되지 않는다면 setTimeout을 이용하여 모달이 닫힌 후 초점을 변경할 수도 있다.

$('#myModal').on('hidden.bs.modal', function () {
    setTimeout(function () {
        $('#openModalButton').focus();
    }, 10); // 딜레이 추가
});

이 방식은 일부 브라우저에서 발생할 수 있는 초점 이동 문제를 해결하는 데 유용하다.

---

부트스트랩 모달의 올바른 활용법

부트스트랩의 모달은 웹 접근성을 고려하여 설계되어야 한다. 위의 방법을 적용하면 aria-hidden 오류를 방지하면서도 사용자 경험을 개선할 수 있다.

특히, focus()를 활용한 초점 이동, inert 속성을 이용한 접근성 강화, 그리고 data-bs-focus="false" 속성을 활용한 자동 초점 방지 등 다양한 해결 방법을 조합하면 보다 안정적인 모달 UX를 제공할 수 있다.