레이어팝업1

728x90
[웹접근성]모달창(레이어팝업) 포커스(focus) 회귀하려면? 모바일 스크린 리더 환경에서 활성화된 레이어(모달 창) 닫기 버튼을 실행할 때, 초점을 해당 레이어를 불러온 콘텐츠로 돌리는 방법을 설명하겠습니다. 이를 위해 JavaScript와 ARIA 속성을 사용하여 웹 접근성을 보장할 수 있습니다. 단계별 구현 방법HTML 구조 설정:모달을 열기 위한 버튼모달 레이어모달 닫기 버튼JavaScript로 포커스 관리:모달을 열 때 모달 내의 첫 번째 포커스 가능한 요소에 포커스를 설정모달을 닫을 때 포커스를 모달을 연 버튼으로 복귀HTML 예시모달 열기 모달 타이틀 닫기 모달 내용이 여기에 표시됩니다. CSS 예시.modal { display: none; /* 기본적으로 모달은 보이지 않음 */ positi..
반응형