입력부터 제출 결과까지 함께 설계하세요
필요하지 않은 질문부터 줄이세요
문의 폼에 고객 계정 전체를 만드는 데 필요한 모든 정보가 들어갈 필요는 없습니다. 지금의 업무를 마치는 데 꼭 필요한 필드를 묻고 나머지는 제거하세요. W3C 폼 지침은 짧고 단순한 폼을 권장하며 과도하거나 무관한 정보 요청이 이탈 가능성을 높인다고 설명합니다. 특정 전환율 상승을 보장하는 것은 아닙니다.[1]
가상의 상담 폼에서는 필수 직함이나 우편주소보다 회신 주소와 유용한 요청 설명이 중요할 수 있습니다. 민감정보가 필요하면 이유를 밝히고 가능하면 적절한 대안을 제공하세요. 적게 수집하면 작성 부담과 조직이 보호해야 할 정보가 함께 줄어듭니다.[1]
네이티브 입력 요소와 항상 보이는 라벨
HTML label과 일치하는 id로 각 입력 요소를 보이는 라벨에 연결합니다. 관련 선택 항목은 fieldset과 legend로 묶으세요. placeholder는 빈 필드 안의 힌트일 뿐 지속적인 라벨이 아닙니다. 입력하면 사라지므로 유일한 설명을 맡기지 마세요.[1]
직접 만든 위젯보다 네이티브 input, button과 select를 먼저 사용합니다. 적절한 입력 타입과 자동완성 토큰을 선택하되 브라우저 검증은 우회할 수 있으므로 서버 검증을 유지하세요. 음성 입력 사용자가 화면에서 보는 이름으로 요소를 부를 수 있도록 보이는 문구가 접근 가능한 이름에도 반영돼야 합니다.[1]
거부하기 전에 제약을 설명하세요
필수·선택 여부를 텍스트로 표시하고 특이한 형식은 필드 옆에서 설명합니다. 필요하면 aria-describedby로 설명과 입력 요소를 연결하세요. 색상에만 의존하면 안 됩니다. 제출하고 나서야 전화번호에 안내되지 않은 국가 코드가 필요하다는 사실을 알게 해서는 안 됩니다.[1][2]
키 입력마다 검증하는 방식은 신중히 선택하세요. W3C는 날짜처럼 입력 도중에는 자연스럽게 불완전한 값이 있다고 설명합니다. 적절한 시점에 검증하고 보안상 필요한 예외를 제외하면 오류 뒤에도 작성한 값을 보존하세요. 설계자의 예시와 다르다는 이유만으로 실제 이름이나 주소를 거부하는 과도한 패턴 검증도 피합니다.[1][2]
오류의 위치와 돌아갈 길을 알려주세요
‘잘못된 입력’ 대신 어떤 필드가 문제인지, 어떻게 고칠지 설명하세요. 여러 오류가 있다면 해당 입력 요소로 이동하는 링크가 있는 요약과 필드 옆 메시지를 제공합니다. W3C는 aria-describedby로 필드 오류를 연결하는 예를 보여주며 aria-invalid로 오류 상태를 추가 표시할 수도 있습니다.[2]
제출 실패 후 초점은 유용한 오류 요약이나 첫 번째 잘못된 필드로 옮기세요. 관련 없는 배너로 보내지 않습니다. 동적으로 나타난 피드백은 적절한 라이브 영역이나 alert로 보조공학이 알아차릴 수 있게 합니다. 불필요한 초점 이동과 여러 라이브 영역이 같은 메시지를 중복해서 읽게 하지 마세요.[2]
서버 접수 전에 성공이라고 말하지 마세요
비활성화된 제출 버튼과 회전 표시는 진행 중 상태일 뿐입니다. 메시지가 설명하는 작업을 서버가 확인한 뒤 성공을 표시하세요. 알림을 대기열에 넣었을 뿐이라면 ‘이메일 전달 완료’보다 ‘요청 접수’가 정확합니다. 업무에 참조 번호가 있다면 사용자에게 남겨주세요.[2]
결과가 불확실한 경우도 설계합니다. 서버에는 저장됐지만 브라우저가 응답을 받지 못할 수 있습니다. 중복 예약이나 결제로 이어진다면 무조건 다시 제출하라고 안내하지 마세요. 적절한 멱등성 설계나 상태 확인·지원 경로를 사용합니다. 이는 신뢰할 수 있는 결과 안내를 위한 엔지니어링 권고이며 시각적 접근성만으로 중복 처리가 해결된다는 뜻이 아닙니다.[2]
빈 화면이 아니라 전체 여정을 시험하세요
키보드로 모든 필드에 도달하고 잘못된 값을 제출한 뒤 오류 요약 링크를 따라가 수정하고 안전한 테스트 제출을 완료해 보세요. 초점 표시와 논리적 순서를 확인합니다. 좁은 화면, 확대, 긴 번역 라벨, 오류와 완료 상태를 시험하세요. 가능하면 화면 읽기 프로그램과 보조공학 사용자도 함께 시험합니다.[1][2]
자동 검사는 일부 누락 라벨과 잘못된 속성을 찾지만 질문이 이해되는지, 안내한 결과와 실제 서버 동작이 같은지는 확인하지 못합니다. 실제로 시험한 항목을 기록하고 접근성 선언에서 근거 없는 주장은 제외하세요. 이 체크리스트는 출발점이며 완전한 WCAG 적합성 감사가 아닙니다.[1][2]
- 모든 입력 요소에 계속 보이는 의미 있는 라벨이 있습니다.
- 오류는 문제와 수정 방법을 설명합니다.
- 키보드 사용자는 처음부터 다시 쓰지 않고 복구할 수 있습니다.
- 진행 중, 실패와 확인된 성공이 구분됩니다.
- 자동 시험만을 위해 실제 문의나 결제를 만들지 않습니다.