인라인 에러 메시지와 접근 가능한 유효성 검사를 포함한 폼 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
에러 메시지를 aria-describedby로 연결
입력 필드와 에러 메시지를 aria-describedby로 연결해야 합니다. 스크린리더가 필드에 포커스할 때 에러 내용을 자동으로 읽습니다.
aria-invalid 설정
유효성 검사에 실패한 필드에 aria-invalid="true"를 설정해야 합니다.
aria-required 또는 required 설정
필수 입력 필드에 required 또는 aria-required="true"를 설정해야 합니다. 별표(*)만으로는 충분하지 않습니다.
에러 발생 시 포커스 이동
폼 제출 실패 시 첫 번째 에러 필드나 에러 요약 메시지로 포커스를 이동해야 합니다.
모든 입력에 레이블 연결
모든 입력 필드에 <label>의 htmlFor 또는 aria-label/aria-labelledby로 레이블을 연결해야 합니다.
구체적인 에러 메시지
"잘못된 입력"보다 "이메일 주소 형식이 올바르지 않습니다"처럼 구체적인 에러 메시지를 제공하세요.
에러 요약 제공
여러 에러가 있을 때 페이지 상단에 모든 에러를 나열한 요약을 role="alert"로 제공하세요.
입력 형식 힌트 제공
날짜, 전화번호 등 특정 형식이 필요한 경우 aria-describedby로 형식 힌트를 제공하세요.
색상만으로 에러 표시
빨간 테두리만으로 에러를 표시하면 색맹 사용자가 인식하기 어렵습니다. 아이콘과 텍스트 메시지를 함께 제공하세요.
입력 중 실시간 에러 표시
사용자가 입력 중에 실시간으로 에러를 표시하면 혼란을 줍니다. blur 이벤트 또는 제출 시점에 검증하세요.
placeholder를 레이블로 사용
placeholder는 포커스 시 사라지므로 레이블 대용으로 사용하지 마세요.
helperText와 error prop 함께 사용
MUI TextField의 error prop과 helperText prop을 함께 사용하면 aria-invalid와 aria-describedby가 자동으로 연결됩니다.