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

dialog 요소를 이용해서 접근성 좋은 대화 상자를 간단하게 만들 수 있습니다. 대화상자를 닫거나 값을 전송하기 위한 모든 키보드 이벤트와 모바일 OS의 네이티브 이벤트가 구현되어 있습니다. 네이티브 이벤트가 구현되어있다는 것은 iOS에서 VoiceOver로 두 손가락 문지르기를 통해 대화상자를 닫거나 하는 행위가 가능함을 말합니다. 모달로 열린 대화상자는 닫기 전까지는 대화상자 내부에서만 탐색이 가능합니다. 키보드 초점뿐만 아니라, 스크린리더의 가상커서 또한 마찬가지입니다. 모달로 열린 대화상자는 닫기버튼 외에 ESC 키를 눌러도 닫을 수 있습니다. 기본 속성 dialog 요소는 기본적으로 숨겨져 있으며, 표시여부는 open 속성에 따라 달라집니다. /* 브라우저들은 유저 에이전트 스타일에 다음의 C..

원문링크 : [HTML] 접근성 좋은 모달 만들기