색상에만 의존하는 폼 오류 표시와 오류 설명의 부재
오류를 #EF4444 테두리 색상만으로 표시하면 원인과 해결 방법이 전달되지 않습니다. 텍스트 오류 설명과 필드 연결이 필요합니다.
1. 문제 정의 및 발생 메커니즘
색상만 바뀐 입력 필드는 오류 원인을 설명하지 않습니다. 색상 구별이 어려운 사용자와 보조기술 사용자 모두를 위해 필드에 연결된 구체적인 텍스트 설명이 필요합니다. 실제 음성 출력은 스크린리더별로 다를 수 있습니다.
“올바른 이메일 주소 형식(예: user@example.com)으로 입력해 주세요. (영문, 숫자, 특수문자 @ 포함 필요)”
실험 재현 환경 및 조건
- 대상 뷰포트: 브라우저 입력 폼 예시. 실제 스크린리더 음성 출력은 별도로 검증하지 않았습니다.
- 적용 UI 엘리먼트: <input type="email"> 회원가입/문의 입력 폼 필드
- 문제를 유발하는 기존 CSS 속성: border-color: #EF4444; outline: none
아래 상자는 결함 조건이 적용된 실제 렌더링 결과이며, 사이트 본체의 UI와 격리되어 있습니다.
2. 측정 결과와 확인 범위
붉은 테두리만 표시하고 오류 설명과 aria-invalid가 없음
텍스트 오류 설명, aria-invalid 및 aria-describedby를 입력 필드에 연결
측정 환경: HTML/ARIA 구조와 브라우저 접근성 속성 확인. 실제 NVDA·VoiceOver 음성 출력은 별도로 검증하지 않았습니다.
확인 기록: 이 사례 페이지는 오류가 이미 발생한 정적 상태를 보여 줍니다. 개선 입력은 aria-invalid="true"와 aria-describedby="email-error-msg"로 보이는 설명에 연결됩니다. 실험 4에서는 잘못된 값 제출 후 오류가 표시되고 입력을 고치면 표시가 사라지지만, 오류 필드로 포커스를 자동 이동하지는 않습니다. 실제 NVDA·VoiceOver 음성 출력은 검증하지 않았습니다.
3. 웹 접근성 기반 엔지니어링 해결책
오류가 발생하면 붉은 테두리와 함께 무엇을 고쳐야 하는지 설명하는 문구를 표시하고, input의 aria-invalid와 aria-describedby로 해당 문구를 연결합니다. 이 사례의 미리보기는 메시지 영역의 최소 높이도 확보합니다. 실험 4에서 제출·수정 흐름을 비교할 수 있으며 자동 포커스 이동은 구현되어 있지 않습니다.
⚠️ 올바른 이메일 주소를 입력해 주세요.
적용 가능한 CSS 예시
/* 접근성 보장 폼 오류 마크업 및 스타일 */
/* HTML:
<label for="user-email">이메일 주소 <span aria-hidden="true">*</span></label>
<input
id="user-email"
type="email"
aria-invalid="true"
aria-describedby="email-error-msg"
class="input-error-accessible"
/>
<p id="email-error-msg" class="error-msg-accessible" role="alert">
<span aria-hidden="true">⚠️</span> 올바른 이메일 형식(예: name@domain.com)으로 입력해 주세요.
</p>
*/
.input-error-accessible {
border: 2px solid #DC2626 !important;
background-color: #FEF2F2;
border-radius: 6px;
padding: 10px 12px;
}
.error-msg-accessible {
min-height: 1.5em; /* 오류 공간 예약으로 레이아웃 이동 완화 */
display: flex;
align-items: center;
gap: 6px;
color: #B91C1C;
font-size: 13px;
font-weight: 500;
margin-top: 6px;
}⚖️ 기술적 트레이드오프 및 한계점 고지
오류 공간을 예약하면 빈 상태에서도 해당 높이를 차지합니다. 실제 동적 폼에서 레이아웃 이동이 얼마나 줄어드는지는 별도로 측정해야 합니다.
본 사례 관련 실무 FAQ
Q. role="alert"와 aria-live의 차이는 무엇인가요?
A. role="alert"는 강한 알림 의도를 전달하지만 실제 음성 출력 시점과 내용은 스크린리더 및 브라우저 조합에 따라 다릅니다. 이 사이트에서 실제 NVDA·VoiceOver 음성 출력은 검증하지 않았습니다.
Q. placeholder(입력 힌트)에 오류 메시지를 넣으면 안 되나요?
A. placeholder는 입력을 시작하면 사라지므로 오류 설명의 유일한 수단으로 쓰지 마세요. 별도의 레이블과 필드에 연결된 오류 문구를 유지해야 합니다.