[React][Error] React-modal ariaHideApp이란?

https://reactcommunity.org/react-modal/accessibility/

Accessibility - react-modal documentation

react-modal을 사용하다가 이러한 경고 메세지를 봤는데 ariaHideApp이란 무엇일까?

 

ariaHideApp는 React 모달 컴포넌트 라이브러리인 react-modal에서 제공하는 옵션 중 하나이고,

aria는 "Accessible Rich Internet Applications"의 약자로, 웹 사이트나 앱이 접근성을 고려한 디자인을 할 수 있도록 도와주는 W3C의 표준이며, ariaHideApp 옵션은 이러한 웹 접근성을 고려하여 모달을 구현할 때 사용된다.

 

기본적으로 ariaHideApp 옵션은 true로 설정되어 있으며, 모달이 열릴 때 기존에 있는 앱의 요소들에 대한 aria-hidden 속성을 자동으로 추가하고, 이렇게 함으로써 스크린 리더 등의 보조 기술 사용자들이 모달 이외의 부분에 대한 내용을 듣지 못하도록 차단할 수 있다.

 

만약 ariaHideApp 옵션을 false로 설정하면, 모달을 열 때 기존에 있는 앱의 요소들에 대한 aria-hidden 속성이 추가되지 않고 이 경우, 모달 이외의 부분에 대한 내용도 보조 기술 사용자들이 들을 수 있으므로, 접근성 문제가 발생할 수 있다.

 

따라서 코드에서는

<ReactModal
  isOpen={openModal}
  style={modalStyle}
  ariaHideApp={false}
  onAfterOpen={setAfterOpenInfo}
  onAfterClose={setAfterCloseInfo}
>

  ariaHideApp={false} 이 부분을 추가해주면 된다.