WCAG 2.2 · 3. 이해의 용이성 · 3.3 입력 지원
3.3.4 오류 방지 (법률, 금융, 데이터)
Error Prevention (Legal, Financial, Data)
법적 약속, 금융 거래, 데이터 변경·삭제, 시험 응시 같은 중요한 제출은 되돌리기·검사·확인 중 하나 이상을 제공해야 합니다.
수준 AAWCAG 2.0
한눈에 보기
- 성공 기준
- 3.3.4 오류 방지 (법률, 금융, 데이터)
- 수준
- 수준 AA
- 원칙
- 3. 이해의 용이성
- 지침
- 3.3 입력 지원
- 도입
- WCAG 2.0
요구 사항
사용자에게 법적 약속이나 금융 거래가 발생하는 페이지, 사용자가 관리할 수 있는 저장 공간의 데이터를 수정·삭제하는 페이지, 사용자의 시험 응답을 제출하는 페이지에는 다음 중 최소 하나가 있어야 합니다.
- 되돌리기: 제출을 취소·철회할 수 있습니다(예: 일정 시간 안에 주문 취소).
- 검사: 입력한 데이터의 오류를 검사하고 고칠 기회를 줍니다.
- 확인: 최종 제출 전에 정보를 검토·확인·수정할 수 있는 단계가 있습니다.
왜 필요한가요
장애가 있는 사용자는 실수할 가능성이 더 높습니다. 예를 들어 운동장애가 있으면 잘못 누르기 쉽고, 읽기장애가 있으면 숫자를 바꿔 입력할 수 있습니다. 송금이나 계약처럼 되돌릴 수 없는 결과는 큰 피해가 되므로 한 번 더 확인할 기회가 필요합니다.
도움받는 사용자
- 운동장애 사용자
- 읽기장애·인지장애 사용자
- 시각장애인(화면낭독기 사용자)
- 모든 사용자
적용 방법
결제·송금·계약 전에 입력 내용을 요약한 확인 화면을 보여 주고 "수정" 버튼을 둡니다. 삭제는 확인 대화상자나 휴지통(복구 기간)을 제공합니다.
<h2>송금 내용 확인</h2>
<dl>
<dt>받는 분</dt><dd>홍길동 (예시은행 123-45-678901)</dd>
<dt>금액</dt><dd>100,000원</dd>
</dl>
<button type="button">수정</button>
<button type="submit">송금하기</button>삭제 확인에는 alertdialog를 쓸 수 있습니다. 구현은 대화상자 패턴을 참고하세요.
<div role="alertdialog" aria-modal="true" aria-labelledby="del-t" aria-describedby="del-d">
<h2 id="del-t">게시글을 삭제할까요?</h2>
<p id="del-d">삭제한 게시글은 30일 동안 휴지통에서 복구할 수 있습니다.</p>
<button type="button">취소</button>
<button type="button">삭제</button>
</div>자주 하는 실수
- 결제 버튼을 누르면 확인 단계 없이 즉시 결제되고 취소할 수도 없습니다.
- 계정·데이터 삭제가 확인이나 복구 수단 없이 한 번의 클릭으로 실행됩니다.
- 온라인 시험 답안이 검토 기회 없이 즉시 최종 제출됩니다.
검사 방법
- 법적·금융·데이터 변경·시험 제출이 일어나는 과정을 찾습니다.
- 되돌리기, 오류 검사, 최종 확인 중 하나 이상이 제공되는지 확인합니다.