[웹접근성]모달창(레이어팝업) 포커스(focus) 회귀하려면?

모바일 스크린 리더 환경에서 활성화된 레이어(모달 창) 닫기 버튼을 실행할 때, 초점을 해당 레이어를 불러온 콘텐츠로 돌리는 방법을 설명하겠습니다. 이를 위해 JavaScript와 ARIA 속성을 사용하여 웹 접근성을 보장할 수 있습니다.

 

단계별 구현 방법

1. HTML 구조 설정:
   • 모달을 열기 위한 버튼
   • 모달 레이어
   • 모달 닫기 버튼
2. JavaScript로 포커스 관리:
   • 모달을 열 때 모달 내의 첫 번째 포커스 가능한 요소에 포커스를 설정
   • 모달을 닫을 때 포커스를 모달을 연 버튼으로 복귀

HTML 예시

<button id="openModal">모달 열기</button>

<div id="myModal" class="modal" role="dialog" aria-hidden="true" aria-labelledby="modalTitle" tabindex="-1">
    <div class="modal-content">
        <h2 id="modalTitle">모달 타이틀</h2>
        <button id="closeModal" class="close-button">닫기</button>
        <p>모달 내용이 여기에 표시됩니다.</p>
    </div>
</div>

CSS 예시

.modal {
    display: none; /* 기본적으로 모달은 보이지 않음 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex; /* 모달을 보이게 설정 */
}

JavaScript 예시

document.addEventListener('DOMContentLoaded', function() {
    const openModalButton = document.getElementById('openModal');
    const closeModalButton = document.getElementById('closeModal');
    const modal = document.getElementById('myModal');

    openModalButton.addEventListener('click', function() {
        modal.classList.add('show');
        modal.setAttribute('aria-hidden', 'false');
        modal.setAttribute('tabindex', '-1');
        
        const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
        
        if (firstFocusableElement) {
            firstFocusableElement.focus();
        }
    });

    closeModalButton.addEventListener('click', function() {
        modal.classList.remove('show');
        modal.setAttribute('aria-hidden', 'true');
        openModalButton.focus();
    });

    modal.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            modal.classList.remove('show');
            modal.setAttribute('aria-hidden', 'true');
            openModalButton.focus();
        }
    });

    // 모달 외부 클릭 시 닫기
    modal.addEventListener('mousedown', function(event) {
        if (!modal.contains(event.target)) {
            modal.classList.remove('show');
            modal.setAttribute('aria-hidden', 'true');
            openModalButton.focus();
        }
    });
});

설명

1. HTML 구조:
   • id="openModal" 버튼을 클릭하면 모달이 열립니다.
   • 모달은 role="dialog"와 aria-hidden="true" 속성을 갖습니다. aria-hidden 속성은 모달이 보이지 않을 때 true로 설정되어 스크린 리더가 모달을 무시하도록 합니다.
   • tabindex="-1"는 모달이 포커스를 받을 수 있도록 합니다.
2. CSS:
   • .modal 클래스는 모달의 기본 스타일을 정의합니다.
   • .modal.show 클래스는 모달을 화면에 표시합니다.
3. JavaScript:
   • 모달 열기 버튼을 클릭하면 모달이 보이고(display: flex), 모달의 첫 번째 포커스 가능한 요소로 포커스가 이동합니다.
   • 모달 닫기 버튼을 클릭하면 모달이 닫히고(display: none), 포커스가 다시 모달 열기 버튼으로 이동합니다.
   • Escape 키를 누르거나 모달 외부를 클릭하면 모달이 닫히고, 포커스가 다시 모달 열기 버튼으로 이동합니다.

이렇게 하면 스크린 리더를 사용하는 사용자도 모달을 쉽게 열고 닫을 수 있으며, 모달을 닫았을 때 초점이 모달을 연 버튼으로 돌아가도록 보장할 수 있습니다.