폼 유효성 검사 오류 메시지를 스크린리더가 읽지 못하는 이유: aria-invalid와 aria-describedby 동적 연결 기법

폼 제출 시 빈 입력값이나 유효하지 않은 형식으로 인해 동적 오류가 발생했을 때, 오류 안내 텍스트가 시각적으로만 노출되고 input 요소와 연결되지 않으면 보조기술 사용자는 오류 원인을 파악하기 어렵습니다. 초기 입력 상태에서 오류 발생 상태로 전환될 때 aria-invalid와 aria-describedby를 통한 접근성 트리 연결 구조와 복구 절차를 분석합니다.

동적 오류 발생 시점의 시각·접근성 트리 상태 차이

초기 상태의 <input id='email'>는 일반 텍스트 필드로 노출됩니다. 사용자가 빈 값으로 폼을 제출하면 자바스크립트에 의해 오류 메시지 <p id='email-err'>이메일 주소를 입력해 주세요.</p>가 화면에 동적으로 삽입됩니다.

이때 input 요소에 aria-invalid나 aria-describedby 연결이 없으면, 시각적으로는 빨간 테두리와 안내문이 보이지만 접근성 트리에서는 해당 필드가 유효하지 않다는 정보와 오류 설명 관계가 누락됩니다.

오류 식별 및 설명 연결 표준 구현

오류가 발생하면 input 요소에 aria-invalid='true'와 aria-describedby='email-err'를 프로그래밍 방식으로 부여하여 접근성 트리에 오류 상태와 설명 텍스트를 연결합니다.

이 속성은 브라우저와 보조기술이 접근성 트리에서 오류 상태와 설명 관계를 노출할 수 있도록 돕는 표준 연결 방식입니다. 실제 발표 순서와 표현은 브라우저·스크린리더 조합에 따라 확인해야 합니다.

• 초기 정상 상태: <input type='email' id='email'>
• 오류 발생 상태: <input type='email' id='email' aria-invalid='true' aria-describedby='email-err'>
• 오류 메시지 노출: <p id='email-err' class='error-msg'>올바른 이메일 형식을 입력하세요.</p>

오류 복구 및 초점 재배치 점검 순서

이 절차는 공개 fixture에서 오류 상태와 설명 연결이 예상대로 구성되었는지 확인하는 수동 점검 예시입니다. 실제 서비스의 모든 브라우저·보조기술 조합에서의 적합성을 보증하지 않으므로, 배포 환경에서 별도의 키보드·스크린리더 검토가 필요합니다.

오류 수정 후 재제출 시 aria-invalid 속성을 false로 되돌리거나 제거하고, aria-describedby 참조 또한 정상 상태로 정리하는 회복 조건이 함께 동작해야 합니다.