WCAG 2.2 · 1. 인식의 용이성 · 1.3 적응 가능
1.3.5 입력 목적 식별
Identify Input Purpose
이름, 이메일, 전화번호처럼 사용자 본인 정보를 받는 입력 필드는 그 목적을 프로그램이 알 수 있어야 합니다.
수준 AAWCAG 2.1
한눈에 보기
- 성공 기준
- 1.3.5 입력 목적 식별
- 수준
- 수준 AA
- 원칙
- 1. 인식의 용이성
- 지침
- 1.3 적응 가능
- 도입
- WCAG 2.1
요구 사항
사용자에 관한 정보를 받는 입력 필드가 WCAG의 “사용자 인터페이스 구성 요소의 입력 목적” 목록(이름, 이메일, 전화번호, 주소, 생일, 신용카드 정보 등 53개)에 해당하면, 그 목적을 프로그램이 알 수 있어야 합니다. HTML에서는 autocomplete 속성 값으로 지정합니다. 사용자 본인이 아닌 다른 사람의 정보(예: 받는 사람 이름)를 받는 필드는 대상이 아닙니다.
왜 필요한가요
브라우저 자동 완성으로 입력 부담을 줄일 수 있어 운동장애·인지장애가 있는 사용자에게 특히 도움이 됩니다. 또한 보조기술이 필드 목적을 알면 익숙한 아이콘이나 쉬운 말로 바꿔 보여 줄 수 있습니다.
도움받는 사용자
- 운동장애가 있는 사용자(입력 부담 감소)
- 인지·학습 장애가 있는 사용자
- 기억력에 어려움이 있는 사용자
- 저시력 사용자(화면 확대 사용자)
적용 방법
<label for="name">이름</label>
<input id="name" name="name" autocomplete="name">
<label for="email">이메일</label>
<input id="email" type="email" autocomplete="email">
<label for="tel">휴대전화</label>
<input id="tel" type="tel" autocomplete="tel">autocomplete="off"로 자동 완성을 막지 않습니다. 값은 HTML 명세의 자동 완성 토큰(given-name, postal-code, bday, cc-number 등)을 정확히 씁니다.
자주 하는 실수
- 회원 가입 폼의 개인 정보 필드에
autocomplete를 쓰지 않습니다. - 잘못된 토큰(예:
autocomplete="phone")을 씁니다. 전화번호는tel입니다.
검사 방법
- 사용자 본인 정보를 받는 필드를 찾습니다.
- 각 필드에 목적에 맞는
autocomplete값이 있는지 확인합니다.