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

19 Oct 2023

javascript

작성일: 2022년 10월 3일

WAI-ARIA(Accessible Rich Internet Applications)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 표준 기술입니다. 이 기술을 활용하여 모달 윈도우와 같은 인터페이스 요소의 접근성을 개선할 수 있습니다. 이번 블로그에서는 자바스크립트를 사용하여 모달 윈도우의 접근성을 개선하는 방법을 알아보겠습니다.

WAI-ARIA 속성

WAI-ARIA는 웹 요소의 역할, 속성 및 상태를 정의하기 위한 다양한 속성을 제공합니다. 이 중에서 모달 윈도우와 관련된 속성으로는 다음과 같은 속성들이 있습니다.

role: 요소의 역할을 정의합니다. 모달 윈도우의 경우 dialog로 정의할 수 있습니다.
aria-modal: 모달 윈도우가 모달인지 아닌지를 나타냅니다. true로 설정하면 모달, false로 설정하면 모달이 아님을 나타냅니다.
aria-labelledby: 모달 윈도우의 제목을 나타내는 요소의 id를 참조합니다.
aria-describedby: 모달 윈도우에 대한 추가 설명을 나타내는 요소의 id를 참조합니다.

모달 윈도우 접근성 개선 방법

모달 윈도우 요소에 role 속성을 추가하고 값을 dialog로 설정합니다.

<div role="dialog" id="modal-window">
  <!-- 모달 윈도우 내용 -->
</div>

모달 윈도우가 모달인지 아닌지를 나타내는 aria-modal 속성을 추가하고 값을 true로 설정합니다.

<div role="dialog" aria-modal="true" id="modal-window">
  <!-- 모달 윈도우 내용 -->
</div>

모달 윈도우의 제목을 나타내는 요소의 id를 참조하는 aria-labelledby 속성을 추가합니다.

<div role="dialog" aria-modal="true" aria-labelledby="modal-title" id="modal-window">
  <h2 id="modal-title">모달 윈도우 제목</h2>
  <!-- 모달 윈도우 내용 -->
</div>

모달 윈도우에 대한 추가 설명을 나타내는 요소의 id를 참조하는 aria-describedby 속성을 추가합니다.

<div role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description" id="modal-window">
  <h2 id="modal-title">모달 윈도우 제목</h2>
  <p id="modal-description">모달 윈도우에 대한 추가 설명</p>
  <!-- 모달 윈도우 내용 -->
</div>

요약

WAI-ARIA 속성을 이용하여 자바스크립트 모달 윈도우의 접근성을 개선할 수 있습니다. role, aria-modal, aria-labelledby, aria-describedby 속성을 적절히 사용하여 모달 윈도우의 역할, 모달 여부, 제목, 추가 설명을 명시할 수 있습니다. 이를 통해 시각, 청각, 운동 장애를 가진 사용자들도 모달 윈도우를 완전히 이해하고 사용할 수 있게 됩니다.

더 자세한 정보는 WAI-ARIA 문서를 참고하십시오.

#Accessibility #WAI-ARIA