학원 홈페이지의 과정 선택 목록은 고르는 순간 다른 페이지로 넘어가기보다, 이용자가 버튼을 눌러 이동을 정하게 하는 편이 예측하기 쉽습니다.
학원 홈페이지의 과정 선택 목록은 고르는 순간 다른 페이지로 넘어가기보다, 이용자가 버튼을 눌러 이동을 정하게 하는 편이 예측하기 쉽습니다. 목록에서 항목을 바꾸는 일과 새 페이지로 가는 일은 학부모와 학생에게 서로 다른 동작이기 때문입니다.
고르는 동작과 이동하는 동작을 나눠 보세요
W3C의 성공 기준 3.2.2 입력 시 해설은 사용자 인터페이스 구성 요소의 설정을 바꾸는 것만으로 맥락이 자동으로 바뀌지 않아야 하며, 바뀐다면 사용 전에 그 동작을 알려야 한다고 설명합니다. 같은 해설은 체크박스를 선택하거나 목록에서 선택 항목을 바꾸는 것은 설정 변경이고, 링크나 버튼을 실행하는 것은 그렇지 않다고 구분합니다.
가상의 학원 홈페이지에 '초등 코딩', '중등 수학', '창의 미술' 과정을 고르는 목록이 있다고 해 봅시다. 키보드 사용자는 화살표 키로 항목을 하나씩 훑어보는 경우가 많은데, 첫 항목으로 옮기는 순간 그 과정 페이지가 열린다면 나머지 과정을 비교하기 전에 원래 화면을 잃게 됩니다. 화면 낭독 프로그램 사용자는 화면이 바뀌었다는 사실 자체를 늦게 알아차릴 수도 있습니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
이동이 필요하면 확인 버튼을 함께 두세요
W3C 해설은 맥락 변경을 시작하는 제출 버튼을 두는 방법, 선택 목록과 실행 버튼을 함께 쓰는 방법, 변경 전에 무슨 일이 일어날지 설명하는 방법을 충분한 기법으로 소개합니다. 반대로 값이 입력되었다고 양식을 자동 제출하거나, 선택을 바꿨을 때 사전 안내 없이 새 창을 여는 것은 대표적인 실패 사례로 듭니다.
에듀지오의 운영 권장은 목록 옆에 '과정 보기'처럼 결과를 알 수 있는 버튼을 두는 것입니다. 상담 신청서의 희망 지점이나 수강 요일 선택도 고르기만 했을 때는 값만 바뀌게 하고, 다음 단계 이동은 별도 버튼에 맡기는 편이 안전합니다. 디자인상 바로 이동이 꼭 필요하다면 목록 앞에 그 동작을 글로 먼저 알려야 합니다. 상담 신청을 마친 학부모가 원하는 요일과 지점을 제대로 골랐는지 스스로 확인할 수 있어야 상담 자리에서 다시 묻는 일도 줄어듭니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
키보드와 화면 낭독으로 직접 확인하세요
점검은 마우스 없이 시작합니다. Tab 키로 과정 목록까지 이동한 뒤 화살표 키로 항목을 바꿔 보고, 주소나 페이지 제목이 저절로 바뀌는지 확인합니다. 이어서 화면 낭독 프로그램을 켜고 같은 순서를 반복하며, 버튼을 누르기 전까지 현재 위치가 유지되는지 들어 봅니다.
W3C는 내용이 바뀌는 것이 언제나 맥락이 바뀌는 것은 아니라고도 설명합니다. 목록을 바꾸면 같은 페이지 아래의 과정 설명만 바뀌는 방식이라면 판단이 달라질 수 있으므로, 실제 동작을 기록한 뒤 개발 담당자와 함께 살펴보세요. 청주·충북 학원을 포함한 일반적인 운영 점검이며 특정 홈페이지에 대한 진단 결과는 아닙니다.