폼에서 오류가 발생했는데 화면 아래에만 메시지가 뜨면 키보드 사용자나 화면낭독기 사용자는 어디를 고쳐야 할지 찾기 어렵습니다. 오류를 표시했다는 사실만으로 충분하지 않습니다. 오류 요약과 필드 안내, 포커스 이동이 하나의 흐름으로 이어져야 합니다.
오류를 구체적으로 적는다
'입력값이 잘못되었습니다'보다 어떤 필드에 어떤 형식이 필요한지 설명합니다. 색깔만으로 상태를 알리지 않고 텍스트와 아이콘을 함께 사용합니다.
서버 검증 결과를 필드 옆에 연결하고 폼 상단에는 오류 목록을 요약합니다. 같은 문장을 중복으로 길게 읽게 하지 않도록 역할을 나눕니다.
제출 뒤 이동할 위치를 정한다
여러 오류가 있으면 첫 오류로 바로 이동하기보다 요약에 포커스를 옮겨 전체 문제를 알릴 수 있습니다. 이후 링크로 각 필드에 이동하게 합니다.
자바스크립트가 새 메시지를 넣었다면 화면낭독기가 변경을 인지할 수 있는지도 확인합니다. 시각적 위치와 키보드 포커스가 서로 다른 곳에 남지 않게 합니다.
입력값을 보존한다
오류 한 곳을 고치기 위해 긴 신청서를 다시 작성하게 하면 이탈이 큽니다. 제출 실패 뒤에도 허용되는 입력을 유지하고 잘못된 필드만 수정하도록 합니다.
보안상 보존해서는 안 되는 값은 예외로 다룹니다. 파일 업로드나 비밀번호 입력처럼 브라우저와 보안 정책의 제약도 안내합니다.
가상 사례: 여러 단계의 신청서
마지막 단계에서 전화번호와 날짜 형식 오류가 발견됐다고 가정해 봅시다. 오류를 하단에만 표시하면 사용자는 이미 지나온 단계를 되짚어야 합니다.
요약에서 단계와 필드를 알려 주고 해당 입력으로 이동할 수 있게 합니다. 수정 후에는 현재 단계와 입력값이 유지돼야 합니다.
자동 검사와 사람 검사를 함께 한다
접근성 도구가 라벨 연결 오류를 찾을 수 있지만 실제 포커스 흐름의 이해도는 별도로 확인해야 합니다. 키보드만 사용해 제출·수정·재제출을 시험합니다.
화면낭독기로 오류 알림이 한 번 명확하게 전달되는지도 확인합니다. 접근 가능한 폼은 오류를 발견하게 하는 데서 끝나지 않고 고칠 수 있게 합니다.
현장에 적용할 때의 순서
- 필드별 오류를 구체적으로 쓴다
- 상단 요약에서 해당 입력으로 연결한다
- 키보드와 화면낭독기로 재제출을 시험한다
주의할 실패: 오류를 시각적으로만 강조하면 포커스가 다른 곳에 남은 사용자는 문제를 찾기 어렵다.
관찰할 지표: 오류 후 재제출 성공률과 접근성 수동 검사를 함께 본다.
적용 전 체크리스트
- 오류 요약과 필드 메시지가 연결되는가
- 포커스 이동이 키보드 흐름에 맞는가
- 오류 뒤 입력값과 작업 맥락이 보존되는가
참고 자료
W3C WCAG 오류 식별 설명. W3C 자료는 입력 오류를 식별하고 설명하는 기준을 다룹니다. 요약과 포커스 흐름은 이를 실제 폼에 적용하는 방법입니다.
이미지와 도식은 이해를 돕기 위한 개념 시각화입니다. 특정 고객의 실제 설비·데이터·화면을 재현한 것이 아닙니다.
#웹접근성 #폼오류 #포커스관리 #WCAG #키보드접근성 #사용자경험 #웹개발 #오류메시지 #화면낭독기 #신청서UX
