모든 패턴

Text Input

사용자가 텍스트를 입력하는 폼 컨트롤

관련 WCAG 기준 — 클릭하여 상세 보기

기본 코드 예시

Baseline (HTML)tsx
Loading...

공통 베이스라인

모든 디자인 시스템에 적용
Must4

  • 레이블 연결 필수

    <label for>로 input과 연결하거나 aria-label/aria-labelledby를 사용해야 합니다.

  • 오류 메시지 연결

    aria-describedby로 오류 메시지를 input에 연결하고 aria-invalid="true"를 설정해야 합니다.

  • 필수 입력 표시

    required 또는 aria-required="true"로 필수 여부를 명시해야 합니다.

  • 색상 대비 4.5:1

    입력 텍스트와 배경 사이 최소 4.5:1 대비율이 필요합니다.

Should3

  • placeholder 단독 사용 금지

    placeholder는 레이블을 대체할 수 없습니다. 항상 visible label과 함께 사용하세요.

  • autocomplete 속성 추가

    이름, 이메일 등 개인정보 필드에 autocomplete 속성을 설정하세요.

  • 도움말 텍스트 연결

    aria-describedby로 힌트/도움말 텍스트를 연결하세요.

Avoid2

  • placeholder를 레이블로 사용 금지

    포커스 시 placeholder가 사라져 사용자가 맥락을 잃습니다.

  • 색상만으로 오류 표시 금지

    빨간 테두리만으로 오류를 나타내지 마세요. 텍스트 메시지를 함께 제공하세요.

디자인 시스템별 구현

추가 체크포인트

  • TextField helperText와 aria 연결

    MUI TextField의 helperText는 자동으로 aria-describedby로 연결됩니다. FormHelperText id를 수동 설정하지 마세요.

  • InputLabel shrink 동작 확인

    floating label이 축소될 때 스크린리더에 레이블이 유지되는지 확인하세요.

코드 샘플

MUI TextFieldtsx
Loading...

구현 노트

  • –MUI TextField는 label, input, helperText의 aria 연결을 자동 처리합니다.
  • –error prop이 true면 helperText에 role="alert"가 자동 추가됩니다.
  • –variant="outlined"의 border 색상은 대비 3:1을 확인하세요.

참고 문서