문의 폼 오류를 누구나 고칠 수 있게 만드는 방법

문의 폼에서 '입력값을 확인하세요'라는 문구만 보여 주면 무엇을 어떻게 고쳐야 할지 알기 어렵습니다. 키보드와 화면 읽기 도구 사용자에게는 오류 위치를 찾는 일도 장벽이 됩니다. 좋은 오류 설계는 문제를 정확히 짚고 수정 경로를 안내합니다.

필수 항목과 형식을 미리 알려 준다

제출 후에야 전화번호 형식이나 첨부 제한을 알리는 폼은 불필요한 왕복을 만듭니다. 필수 여부와 예시 형식을 입력 전에 보여 주고, 설명이 필요한 필드는 레이블과 연결합니다. 자리표시자만으로 레이블을 대신하지 않습니다.

오류 발생 시 상단 요약과 해당 필드 근처 메시지를 함께 제공합니다. 메시지는 '이메일을 확인하세요'보다 '이메일 주소에 @가 필요합니다'처럼 구체적으로 씁니다. 색깔만으로 오류를 나타내지 않고 텍스트와 아이콘을 함께 사용합니다.

제출 실패 뒤 화면 맨 위에 사용자를 남겨 두면 오류를 못 찾을 수 있습니다. 오류 요약 또는 첫 번째 오류 필드로 적절히 초점을 이동시키고, 요약 링크에서 각 필드로 갈 수 있게 합니다. 이동은 사용자가 현재 맥락을 이해할 수 있게 해야 합니다.

유효성 검사 실패가 이미 입력한 긴 문의 내용을 지우면 사용자는 다시 작성해야 합니다. 안전한 범위에서 값을 유지하고, 서버 검증 결과도 동일한 메시지 구조로 보여 줍니다. 비밀번호나 민감값은 별도 보안 정책에 따라 처리합니다.

마우스를 쓰지 않고 Tab과 Enter만으로 작성·수정·제출해 봅니다. 화면 읽기 도구가 필드명, 오류, 안내를 순서대로 읽는지 확인합니다. 오류 메시지가 정확해도 제출 뒤 초점이 엉뚱한 곳에 있으면 경험은 여전히 어렵습니다.

주의할 실패: 색상만으로 오류 표시

관찰할 지표: 오류 수정 완료율과 재제출 횟수

W3C WAI Forms: User Notifications. W3C의 폼 오류 알림 지침을 참고했습니다. 실제 구현은 사용 중인 화면 읽기 도구와 브라우저 조합에서 검증해야 합니다.

이미지와 도식은 이해를 돕기 위한 개념 시각화입니다. 특정 고객의 실제 설비·데이터·화면을 재현한 것이 아닙니다.

#웹접근성 #문의폼 #폼검증 #오류메시지 #키보드접근성 #스크린리더 #UX #WCAG #사용성 #웹개발