다음 입력 요소에 오류가 발생했다. 스크린 리더와 키보드 사용자도 오류를 찾고 수정할 수 있도록 오류 메시지 표현, 입력 요소와 메시지의 연결, 제출 뒤 초점 처리의 세 측면을 쓰시오.
<label for="email">이메일</label>
<input id="email" class="error">
<span id="email-error"></span>모범답안
오류 내용을 색상 외의 텍스트로 명확히 표시하고 오류 메시지를 해당 입력과 프로그램적으로 연결한다. 제출 후 첫 오류 필드나 오류 요약으로 초점을 이동해 키보드와 스크린 리더 사용자가 바로 수정할 수 있게 한다.
풀이와 판단 근거
색상만으로 오류를 구분하면 색각 이상 사용자와 스크린 리더 사용자가 상태를 알기 어렵다. 오류 문구는 무엇이 잘못됐고 어떻게 고칠지를 텍스트로 알려야 하며 label, aria-describedby 같은 관계를 이용해 해당 입력과 연결해야 한다.
제출 뒤에는 첫 오류 필드 또는 오류 요약으로 초점을 이동하되 사용자의 예상치 못한 위치로 무조건 이동시키지 않도록 일관된 규칙을 적용한다.
자주 틀리는 지점
- 입력 테두리를 빨간색으로 바꾸는 것만 제시
- 오류 텍스트를 입력 필드와 연결하지 않음
- 초점 이동 없이 화면 상단에만 메시지를 표시
자동 판정 방식
한글·영문 동의어와 문항별 필수 개념을 확인하며, 정답 단어가 부정되거나 반대 개념과 함께 쓰이면 자동 정답으로 확정하지 않습니다. 부분점수는 ITPASSLAB의 학습용 예상 점수입니다.