WAI-ARIA(Attribute in Rich Internet Applications)는 웹 접근성을 향상시키기 위한 표준으로, 웹 컨텐츠와 웹 애플리케이션의 접근성이 뛰어나도록 돕는 역할을 합니다. 이번 글에서는 WAI-ARIA 속성을 활용하여 자바스크립트를 이용한 모달 다이얼로그(dialog)를 개발하는 방법에 대해 알아보겠습니다.

WAI-ARIA 속성 소개

WAI-ARIA는 브라우저가 컨텐츠의 구조와 기능을 이해할 수 있도록 도와주는 역할을 합니다. 모달 다이얼로그는 일반적으로 특정 컨텐츠 위로 다른 컨텐츠가 나타나는 팝업 형태로 사용됩니다. 이때 WAI-ARIA 속성을 사용하여 스크린 리더(Screen Reader)와 같은 보조 기술이 모달 다이얼로그를 인식할 수 있도록 해야 합니다.

모달 다이얼로그 구현

자바스크립트를 사용하여 모달 다이얼로그를 구현하는 방법은 여러 가지가 있지만, 이번 예제에서는 role, aria-hidden, aria-modal 등의 WAI-ARIA 속성을 활용하여 구현해보겠습니다.

HTML 구조

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

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalContent" aria-hidden="true">
  <h2 id="modalTitle">모달 제목</h2>
  <p id="modalContent">모달 내용</p>
  <button id="closeModalButton">모달 닫기</button>
</div>

CSS 스타일링

#modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}

#modal[aria-hidden="true"] {
  display: none;
}

JavaScript 이벤트 처리

const openModalButton = document.getElementById('openModalButton');
const closeModalButton = document.getElementById('closeModalButton');
const modal = document.getElementById('modal');

openModalButton.addEventListener('click', function() {
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
});

closeModalButton.addEventListener('click', function() {
  modal.style.display = 'none';
  modal.setAttribute('aria-hidden', 'true');
});

위의 코드는 간단한 모달 다이얼로그를 구현한 예제입니다. 모달을 열기 위한 버튼과 모달 내 닫기 버튼을 클릭하면 모달이 나타나거나 사라지도록 동작합니다. 또한, WAI-ARIA 속성인 aria-hidden을 사용하여 모달이 열려있는지 여부를 스크린 리더에게 알릴 수 있습니다.

결론

본 글에서는 WAI-ARIA 속성을 활용하여 자바스크립트 기반의 모달 다이얼로그를 개발하는 방법에 대해 알아보았습니다. WAI-ARIA는 웹 접근성을 향상시키는 데 매우 유용한 도구이므로, 웹 애플리케이션 개발 시에 적극적으로 활용할 것을 권장합니다.

참고: WAI-ARIA in MDN

#WAI-ARIA #웹접근성