[HTML] 접근성 좋은 모달 만들기

dialog 요소를 이용해서 접근성 좋은 대화 상자를 간단하게 만들 수 있습니다.

• 대화상자를 닫거나 값을 전송하기 위한 모든 키보드 이벤트와 모바일 OS의 네이티브 이벤트가 구현되어 있습니다. 네이티브 이벤트가 구현되어있다는 것은 iOS에서 VoiceOver로 두 손가락 문지르기를 통해 대화상자를 닫거나 하는 행위가 가능함을 말합니다.
• 모달로 열린 대화상자는 닫기 전까지는 대화상자 내부에서만 탐색이 가능합니다. 키보드 초점뿐만 아니라, 스크린리더의 가상커서 또한 마찬가지입니다.
• 모달로 열린 대화상자는 닫기버튼 외에 ESC 키를 눌러도 닫을 수 있습니다.

기본 속성

dialog 요소는 기본적으로 숨겨져 있으며, 표시여부는 open 속성에 따라 달라집니다.

/* 브라우저들은 유저 에이전트 스타일에 다음의 CSS를 포함하고 있습니다. */
dialog:not([open]) {
  display: none;
}

See the Pen dialog - 1 by FE4902 (@fe4902) on CodePen.

비모달 대화상자

dialog 요소는 show(), close()를 이용해서 열고 닫을 수 있습니다.

const dialog = document.querySelector('dialog');
// 비모달 대화상자 열기
dialog.show();

// 닫기
dialog.close();

See the Pen dialog - 2 by FE4902 (@fe4902) on CodePen.

모달 대화상자

showModal()을 이용하면 backdrop이 깔리고 가운데 정렬이 된 대중적인 모습의 모달을 사용할 수 있습니다.

const dialog = document.querySelector('dialog');
// 모달 대화상자 열기
dialog.showModal();

// 닫기
dialog.close();

See the Pen dialog - 3 by FE4902 (@fe4902) on CodePen.

backdrop 클릭 이벤트

backdrop을 클릭했을때 모달이 닫히는 건, 기본적으로 구현되어 있지는 않지만 이벤트 버블링을 이용해서 구현할 수 있습니다.

dialog.addEventListener('click', (event) => {
  if (event.target.nodeName === 'DIALOG') {
    dialog.close();
  }
});

See the Pen dialog - 4 by FE4902 (@fe4902) on CodePen.

스타일 수정

스타일 수정이 제한되지 않아, dialog, :modal, ::backdrop 선택자로 커스터마이징이 가능합니다.

/* 비모달 대화상자, show() */
dialog {
    ...
}

/* 모달 대화상자, showModal() */
:modal {
    ...
}

/* 모달 대화상자의 dim */
::backdrop {
    ...
}

See the Pen dialog - 5 by FE4902 (@fe4902) on CodePen.

 

 

해당 포스팅은 이 글을 참고하여 작성했습니다.