3.3.7 반복 입력

요구 사항

사용자가 이전에 입력했거나 사용자에게 제공된 정보를 같은 과정(process) 안에서 다시 입력해야 한다면, 그 정보는 다음 중 하나여야 합니다.

• 자동 입력(auto-populated): 이전 값이 미리 채워져 있습니다.
• 선택 가능(available for the user to select): 드롭다운에서 고르기, "배송지와 동일" 체크박스, 같은 페이지에 보이는 이전 값 복사 등으로 고를 수 있습니다.

예외

• 다시 입력하는 것이 필수적인 경우(예: 기억력 게임)
• 보안을 위해 필요한 경우(예: 새 비밀번호 확인 입력)
• 이전 정보가 더 이상 유효하지 않은 경우

"과정"은 하나의 활동을 마치기 위한 일련의 사용자 동작입니다(예: 장바구니 → 배송 정보 → 결제). 세션을 닫았다가 나중에 다시 방문하는 경우는 포함하지 않습니다. 외부 결제 대행사로 넘어가는 것처럼 도메인이 달라져도 같은 과정이면 적용됩니다. 브라우저의 자동 완성 기능만으로는 이 기준을 충족한 것으로 보지 않습니다. 사이트가 직접 이전 값을 제공해야 합니다.

왜 필요한가요

인지장애나 기억력에 어려움이 있는 사용자는 앞에서 입력한 내용을 기억해 다시 쓰기 어렵고, 운동장애가 있는 사용자에게는 같은 내용을 다시 타이핑하는 것 자체가 큰 부담입니다. 다시 입력하는 과정에서 오류도 늘어납니다.

도움받는 사용자

• 인지장애·기억력 장애 사용자
• 운동장애 사용자(타이핑 부담)
• 화면낭독기 사용자
• 스위치·음성 입력 사용자

적용 방법

다단계 양식에서는 앞 단계 값을 저장해 두었다가 뒤 단계에 미리 채우거나 선택지로 제공합니다.

<fieldset>
  <legend>청구지 주소</legend>
  <label>
    <input type="checkbox" id="same-addr" checked>
    배송지 주소와 같음
  </label>
  <div id="billing-fields" hidden>
    <label for="bill-addr">주소</label>
    <input id="bill-addr" name="bill-addr" autocomplete="billing street-address">
  </div>
</fieldset>

var same = document.getElementById('same-addr');
var fields = document.getElementById('billing-fields');
same.addEventListener('change', function () {
  fields.hidden = same.checked;          // 체크하면 배송지 값을 그대로 사용
});

autocomplete 속성(1.3.5 입력 목적 식별)은 브라우저 자동 완성을 돕지만, 그것만으로는 이 기준을 충족하지 않습니다. 같은 과정 안의 정보는 사이트가 직접 채우거나 선택할 수 있게 합니다.

사례

<!-- 1단계에서 이메일을 받았는데 3단계에서 빈칸으로 다시 요구 -->
<label for="email2">이메일</label>
<input id="email2" type="email">

<label for="email2">영수증 받을 이메일</label>
<input id="email2" type="email" value="user@example.com">

자주 하는 실수

• 주문 과정에서 배송지 주소를 입력했는데, 결제 단계에서 청구지 주소를 처음부터 다시 입력하게 합니다.
• 신청서 앞 단계에서 받은 이름·연락처를 뒤 단계에서 빈칸으로 다시 요구합니다.
• 브라우저 자동 완성에만 의존하고 사이트는 이전 값을 제공하지 않습니다.

검사 방법

• 여러 단계로 된 과정(회원 가입, 주문, 신청)을 끝까지 진행합니다.
• 같은 정보를 다시 입력하라는 곳이 있는지 찾습니다.
• 있다면 자동으로 채워지거나 선택할 수 있는지, 아니면 예외(필수, 보안, 유효하지 않음)에 해당하는지 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.3.7 (새 창)