(Javascript - jQuery) 자바스크립트를 이용한 이미지 팝업 만들기

See the Pen 이미지 팝업 커스텀 코드 (접근성 준수) by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트를 이용한 이미지 팝업 만들기 자체 코드입니다.

라이브러리는 제이쿼리를 이용했고 자세한 코드는 위에 코드펜에 들어가서 확인하시면 됩니다.

 

포인트는 웹접근성 준수를 위해 키보드 접근성에 맞게 작업을 하였습니다.

즉, 키보드 탭을 누르면서도 팝업을 활성화 및 팝업창 닫기를 이용할 수 있도록 하였고

팝업창이 활성화되면 초점이 해당 팝업 내부로 이동됩니다.

그 후 x버튼을 누르게되면 팝업이 닫히면서 초점은 해당 이미지 팝업 목록으로 다시 되돌아갑니다.