긴 웹 폼에서 제출 오류를 놓치지 않도록 상단 요약과 필드 안내, 포커스 이동을 연결합니다.
왜 이 문제가 생길까
긴 신청서 하단의 제출 버튼을 눌렀는데 상단 필드에 오류가 생기면 사용자는 아무 반응이 없다고 느낄 수 있습니다. 화면에 빨간 테두리만 추가하면 색을 구별하기 어렵거나 화면 읽기 도구를 쓰는 사용자는 이유를 알기 어렵습니다. 오류는 발견, 이동, 수정이 이어지는 과정으로 설계해야 합니다.
시스템은 무엇을 구분해야 할까
제출 후에는 오류 개수와 필드명을 담은 상단 요약을 만들고, 각 항목을 해당 필드의 앵커로 연결합니다. 포커스를 요약에 옮겨 전체 상황을 알린 뒤 사용자가 오류를 선택하면 해당 입력으로 이동하게 합니다. 필드 옆에는 구체적인 수정 방법을 표시하고 `aria-describedby` 등으로 입력과 연결합니다. 성공적으로 고친 필드는 오류 상태를 해제하되 작성한 다른 값은 유지합니다.
현장에서 적용하면
사업자 번호 형식과 첨부파일 크기가 함께 틀렸다면 '입력 오류가 있습니다'라는 한 문장은 부족합니다. 요약에서 두 문제를 각각 선택할 수 있어야 하고, 첨부파일 오류에는 허용 용량과 대체 방법을 알려 줘야 합니다. 서버 검증 결과와 클라이언트 즉시 검증이 다를 수 있으므로 제출 후 최종 오류도 같은 형식으로 보여 줍니다.
도입할 때 놓치기 쉬운 점
타이핑할 때마다 오류 문구를 바꾸면 보조기기 알림이 과도해집니다. 필요한 시점에 검증하고 메시지를 안정적으로 유지하세요. 포커스 이동은 반드시 현재 입력을 잃지 않게 하고, 고정 헤더가 필드를 가리지 않도록 스크롤 여백도 확인해야 합니다.
시작 전 점검할 세 가지
- 제출 뒤 오류 요약에 포커스가 가는가
- 요약 항목이 실제 오류 필드로 연결되는가
- 오류 메시지가 수정 방법을 구체적으로 알려 주는가
참고 자료: W3C WAI의 폼 오류 알림 튜토리얼
#웹접근성 #폼UX #오류메시지 #포커스관리 #스크린리더 #ARIA #신청서 #사용자경험 #웹개발 #입력검증
