WAI-ARIA 속성을 이용한 자바스크립트 모달 윈도우 접근성 개선 방안

19 Oct 2023

javascript

접근성(Accessibility)은 모든 사용자가 웹사이트 또는 앱을 사용할 수 있도록 하는 것을 의미합니다. 특히 시각, 청각, 운동 장애를 가진 사용자들에게 접근성을 제공하는 것은 매우 중요합니다. 이번 블로그 포스트에서는 WAI-ARIA 속성을 이용하여 자바스크립트 모달 윈도우의 접근성을 개선하는 방법을 알아보겠습니다.

WAI-ARIA 속성이란?

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 기술입니다. 이는 HTML 요소에 특정 속성을 추가하여 스크린리더 등의 보조 기기가 해당 요소를 인식하고 다룰 수 있도록 돕습니다.

모달 윈도우의 접근성 문제점

모달 윈도우는 특정 작업을 수행하기 위해 주 창 위에 띄워지는 팝업 창입니다. 하지만 모달 윈도우는 기본적으로 접근성 문제를 가지고 있습니다. 주요 문제점은 다음과 같습니다.

키보드 포커스 제어: 모달 윈도우가 주 창 위에 띄워질 때, 주 창의 내용에 접근할 수 없습니다. 이는 키보드 포커스가 모달 윈도우에 머무르기 때문입니다.
스크린리더 읽기 제어: 모달 윈도우가 화면 상에 표시되면, 스크린리더는 주 창의 내용을 읽지 않습니다. 사용자는 모달 윈도우와 관련된 정보를 제공받지 못하게 됩니다.

WAI-ARIA 속성을 이용한 해결 방안

WAI-ARIA 속성을 사용하여 모달 윈도우의 접근성 문제를 해결할 수 있습니다. 다음은 사용할 수 있는 몇 가지 WAI-ARIA 속성입니다.

aria-modal: 해당 요소가 모달 윈도우임을 나타냅니다. 이 속성을 설정하면 스크린리더 등의 보조 기기가 해당 요소를 모달 윈도우로 인식합니다.
aria-hidden: 모달 윈도우가 활성화되면, 주 창의 내용을 숨기기 위해 aria-hidden 속성을 설정합니다. 이렇게 하면 사용자는 주 창의 내용을 읽지 못하게 됩니다.
aria-labelledby: 모달 윈도우 내에 있는 제목 요소를 가리키는 역할을 합니다. 이는 모달 윈도우에 접근성 있는 제목을 제공하기 위해 사용됩니다.

아래는 WAI-ARIA 속성을 추가한 자바스크립트 모달 윈도우의 예시 코드입니다.

const modal = document.getElementById("modal");
const openButton = document.getElementById("openButton");
const closeButton = document.getElementById("closeButton");

openButton.addEventListener("click", () => {
  modal.style.display = "block";
  modal.setAttribute("aria-modal", "true");
  modal.setAttribute("aria-hidden", "false");
  document.body.classList.add("no-scroll");
});

closeButton.addEventListener("click", () => {
  modal.style.display = "none";
  modal.setAttribute("aria-modal", "false");
  modal.setAttribute("aria-hidden", "true");
  document.body.classList.remove("no-scroll");
});

요약

WAI-ARIA 속성을 사용하여 자바스크립트 모달 윈도우의 접근성을 개선할 수 있습니다. 이를 통해 키보드 포커스 제어와 스크린리더 읽기 제어를 활성화할 수 있습니다. 접근성을 고려한 모달 윈도우를 개발함으로써 모든 사용자가 웹사이트를 동등하게 이용할 수 있도록 보장할 수 있습니다.

참고 자료

#A11y #WAIARIA