키보드로 들어간 화면 요소에서 키보드만으로 다시 빠져나올 수 있어야 W3C 웹 접근성 기준 2.1.2를 충족합니다. 학원 홈페이지의 상담 신청 팝업창은 닫기 버튼, Esc 키, 닫은 뒤 초점이 돌아가는 위치를 함께 확인해야 합니다.
키보드로 들어간 화면 요소에서 키보드만으로 다시 빠져나올 수 있어야 W3C 웹 접근성 기준 2.1.2를 충족합니다. 신학기 상담 신청을 받으려고 학원 홈페이지 첫 화면에 팝업창을 띄우기도 하는데, 마우스로는 오른쪽 위 닫기 표시를 누르면 끝나지만 키보드만 쓰는 학부모는 Tab 키를 눌러도 팝업창 밖으로 나가지 못하고 닫는 방법도 찾지 못할 수 있습니다. 이 글은 팝업창을 없애자는 이야기가 아니라 팝업창 안에서 초점이 어떻게 움직이고 어떻게 닫혀야 하는지를 W3C 문서로 정리한 것입니다.
기준이 막는 것은 '갇힘'이고, 팝업창 안의 순환은 허용됩니다
W3C의 성공 기준 2.1.2 키보드 함정 없음 해설(수준 A)에 실린 기준 문장은 키보드로 페이지의 어떤 구성 요소에 초점을 옮길 수 있다면 키보드만으로 그 구성 요소에서 초점을 다시 옮길 수 있어야 하고, 수정 키 없는 화살표 키나 Tab 키 같은 표준 빠져나가기 방법 말고 다른 방법이 필요하다면 그 방법을 이용자에게 알려야 한다는 내용입니다. 해설은 이 기준을 지키지 못한 콘텐츠가 페이지 전체 이용을 방해할 수 있으므로 페이지의 모든 콘텐츠가 이 기준을 충족해야 한다고 덧붙입니다.
해설은 모달 대화상자나 팝오버 안에 있을 때처럼 초점을 페이지 일부에 묶어 두는 것이 적절한 경우도 있다고 설명합니다. 이용자가 초점을 풀고 그 구성 요소를 떠나는 방법을 알고 있다면 기준 위반이 아니라는 것입니다. 물리 키보드가 있는 대부분의 환경에서는 Esc 키가 흔히 쓰이는 표준 빠져나가기 방법이라고 소개합니다.
해설의 모달 대화상자 예시는 다음과 같습니다.
- 대화상자 아래쪽에 '취소'와 '확인' 버튼이 있습니다.
- 대화상자가 열려 있는 동안 초점은 그 안에 머물고, 마지막 요소에서 Tab 키를 누르면 첫 요소로 돌아갑니다.
- '취소' 버튼, '확인' 버튼, Esc 키 가운데 하나로 대화상자를 닫을 수 있습니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
팝업창의 키보드 동작은 이렇게 정리되어 있습니다
W3C ARIA 제작 실무 안내(APG)의 모달 대화상자 패턴은 모달 대화상자 아래의 창은 조작할 수 없는 상태가 되고, 모달 대화상자는 대화상자를 닫지 않고는 키보드 초점을 바깥으로 옮기는 방법을 제공하지 않는다고 설명합니다. 그만큼 닫는 방법이 분명해야 합니다. 패턴이 정리한 키보드 동작은 다음과 같습니다.
- 대화상자가 열리면 초점이 대화상자 안의 요소로 옮겨 갑니다. 보통은 처음으로 초점을 받을 수 있는 요소지만, 내용이 길면 제목이나 첫 문단에 초점을 두는 편이 낫다고 안내합니다.
- Tab 키는 대화상자 안의 다음 요소로, Shift+Tab 키는 이전 요소로 옮기며 끝에 닿으면 반대쪽 끝으로 돌아갑니다.
- Esc 키는 대화상자를 닫습니다.
- 모든 대화상자의 Tab 순서 안에 닫기 아이콘이나 취소 버튼처럼 대화상자를 닫는 눈에 보이는 버튼을 두는 것을 강하게 권장합니다.
- 대화상자가 닫히면 초점은 대화상자를 연 요소로 돌아갑니다. 그 요소가 사라졌다면 작업 흐름상 자연스러운 다른 요소로 옮깁니다.
W3C의 성공 기준 2.4.3 초점 순서 해설도 모달 대화상자 예시에서 대화상자가 열린 동안 바깥 콘텐츠는 초점을 받을 수 없고, 닫히면 초점이 대화상자를 연 버튼이나 그 다음 요소로 돌아간다고 설명합니다. 페이지가 열리자마자 저절로 뜨는 팝업창이라면 따로 누른 버튼이 없으므로, 닫은 뒤 초점이 페이지 맨 앞이나 본문 시작처럼 학부모가 이어서 읽기 자연스러운 곳으로 가는지 확인해 두면 좋습니다.
APG는 대화상자를 모달로 표시해 놓고 실제로는 바깥 콘텐츠를 조작할 수 있게 두면 일부 보조기술 이용자가 바깥 내용을 인식하지 못해 큰 불편을 겪을 수 있다고 주의합니다. 모달 표시는 실제로 바깥 조작을 막을 때만 쓰라는 뜻입니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
학원 홈페이지에서 점검하는 순서
에듀지오의 운영 권장은 마우스를 치워 두고 키보드만으로 상담 신청 팝업창을 끝까지 다뤄 보는 것입니다.
- 첫 화면을 열고 팝업창이 뜨면 Tab 키를 눌러 초점이 팝업창 안의 요소에 먼저 가는지 봅니다. 초점이 팝업창에 가려진 뒤쪽 메뉴로 간다면 초점 처리부터 고쳐야 합니다.
- Tab 키와 Shift+Tab 키를 여러 번 눌러 초점이 팝업창 안에서만 돌고 '닫기' 버튼도 그 순서에 들어 있는지 확인합니다.
- Esc 키를 눌러 팝업창이 닫히는지 확인합니다.
- 닫은 뒤 다시 Tab 키를 눌러 초점이 팝업창을 연 버튼이나 페이지 앞쪽처럼 예상할 수 있는 곳에서 이어지는지 봅니다.
- '오늘 하루 보지 않기' 같은 확인란이 있다면 키보드만으로 선택하고 닫을 수 있는지 확인합니다.
- 팝업창 안에 상담 신청서를 넣었다면 입력칸 사이를 Tab 키로 오가다 신청서 밖으로 빠져나가지 못하거나 Esc 키가 듣지 않는 곳이 없는지 확인합니다.
이 글은 청주·충북 지역 학원을 포함한 일반적인 홈페이지 점검 방법을 W3C 문서에 따라 정리한 것이며 특정 학원 홈페이지를 진단한 결과가 아닙니다.