WAI-ARIA 속성을 이용하여 자바스크립트로 구현하는 모달 다이얼로그 접근성 개선

19 Oct 2023

javascript

모달 다이얼로그는 웹 페이지에서 중요한 정보를 팝업 형태로 제공하는데 유용한 컴포넌트입니다. 그러나 모달 다이얼로그는 기본적으로 접근성에 문제가 있을 수 있습니다. 시각, 운동, 인지 등의 장애가 있는 사용자들이 모달 다이얼로그에 접근하고 조작하는 데 어려움을 겪을 수 있기 때문입니다. 이를 해결하기 위해 WAI-ARIA (웹 접근성 이니셔티브-전자 및 정보 기술 분야에서의 접근성 개발을위한 웹 표준) 속성을 이용하여 접근성을 개선할 수 있습니다.

WAI-ARIA 속성의 활용

WAI-ARIA 속성은 웹 페이지의 요소들에 추가되는 접근성 관련 역할, 속성, 상태를 정의합니다. 모달 다이얼로그의 접근성 개선을 위해 아래 세 가지 중요한 WAI-ARIA 속성을 활용할 수 있습니다.

role 속성을 사용하여 모달 다이얼로그에 대한 역할을 정의합니다. 모달 다이얼로그의 역할을 “dialog”로 지정하여 화면 팝업에 대한 역할이라는 것을 명시합니다.

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true" tabindex="-1">
  <!-- 모달 내용 -->
</div>

aria-labelledby 속성을 사용하여 모달 다이얼로그의 제목을 연결합니다. 제목 요소에는 id 속성을 부여하고, 모달 다이얼로그에는 해당 제목 요소를 가리키도록 aria-labelledby 속성값에 지정합니다.

<h2 id="dialog-title">모달 다이얼로그 제목</h2>

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true" tabindex="-1">
  <!-- 모달 내용 -->
</div>

aria-modal 속성을 사용하여 모달 다이얼로그가 현재 화면에 가장 중요한 컨텐츠임을 나타냅니다. aria-modal 속성을 “true”로 지정하면 모달 다이얼로그가 화면의 주요 컨텐츠로 간주되어 다른 부분에 대한 접근이 차단됩니다.

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true" tabindex="-1">
  <!-- 모달 내용 -->
</div>

자바스크립트로 구현하는 모달 다이얼로그 접근성 개선

모달 다이얼로그를 자바스크립트로 구현할 때에는 접근성을 고려한 개선이 필요합니다. 아래는 예시로 임의의 자바스크립트 함수를 사용하여 모달 다이얼로그를 열고 닫는 과정에서 WAI-ARIA 속성을 적용하는 방법입니다.

const openModal = () => {
  const modal = document.getElementById("modal");
  modal.classList.add("active");
  modal.setAttribute("aria-hidden", "false");
}

const closeModal = () => {
  const modal = document.getElementById("modal");
  modal.classList.remove("active");
  modal.setAttribute("aria-hidden", "true");
}

위의 함수에서는 모달 다이얼로그가 열릴 때 aria-hidden 속성을 “false”로 설정하여 다이얼로그 내용이 스크린 리더 등에 읽힐 수 있도록 합니다. 반대로 모달 다이얼로그가 닫힐 때는 aria-hidden 속성을 “true”로 설정하여 모달 다이얼로그를 스크린 리더 등이 무시하도록 합니다.

마무리

WAI-ARIA 속성을 이용하여 자바스크립트로 구현하는 모달 다이얼로그의 접근성을 개선하는 방법에 대해 알아보았습니다. 이를 통해 모든 사용자가 웹 페이지의 모달 다이얼로그에 접근하고 조작하는 데 어려움을 겪지 않도록 할 수 있습니다. WAI-ARIA 속성을 잘 활용하여 웹 접근성을 개선하는데 더 나은 노력을 기울이길 바랍니다.

참고 문서: WAI-ARIA