성공기준 이해 3.3.1:오류 식별 (Level A)
요약
- 목표
- 사용자는 오류가 존재하고 무엇이 잘못되었는지 안다.
- 할 일
- 오류에 대한 설명적인 알림을 제공한다.
- 중요성
- 오류 표시는 시력 및 인지 장애가 있는 사람들이 오류를 해결하는 데 도움이 된다.
의도
이 성공 기준의 목적은 사용자가 오류가 발생했음을 인식하고 무엇이 잘못되었는지 확인할 수 있도록 하는 것이다. 오류 메시지는 최대한 구체적이어야 한다. 양식 제출이 실패한 경우 양식을 다시 표시하고 오류가 있는 필드를 표시하는 것만으로는 일부 사용자가 오류가 발생했음을 인식하기에 충분하지 않다. 예를 들어 화면 낭독기 사용자는 표시기 중 하나가 나타날 때까지 오류가 발생했다는 사실을 알 수 없다. 오류 표시가 나타나기 전에 페이지가 단순히 작동하지 않는다고 생각하여 양식을 완전히 포기할 수도 있다. 정의에 따르면 "입력 오류"는 사용자가 제공한 정보가 허용되지 않는다. 여기에는 다음이 포함된다.
- 웹 페이지에서 요구하는 정보로서 이용자가 빠뜨린 정보, 또는
- 사용자가 제공했지만 필수 데이터 형식이나 허용된 값을 벗어나는 정보
예를 들면,
- 사용자가 주, 도, 지역 등의 필드에 적절한 약어를 입력하지 않은 경우
- 사용자가 유효한 상태가 아닌 상태 약어를 입력한 경우
- 사용자가 존재하지 않는 우편번호를 입력한 경우
- 사용자가 2년 후의 생년월일을 입력한 경우
- 사용자가 숫자만 허용하는 전화번호 필드에 알파벳 문자나 괄호를 입력한 경우
- 사용자가 이전 입찰가 또는 최소 입찰 증가분보다 낮은 입찰가를 입력한 경우
참고
사용자가 너무 높거나 낮은 값을 입력하고 페이지의 코딩이 해당 값을 허용 범위 내에 있도록 자동으로 변경하는 경우에도 성공 기준에서 요구하는 대로 사용자의 오류를 사용자에게 설명해야 한다. 변경된 값을 사람에게 알리는 오류 설명은 이 성공 기준(오류 식별)과 성공 기준 3.3.3(오류 수정 제안)을 모두 충족한다.
오류의 식별 및 설명은 사용자 에이전트 또는 보조 기술이 오류를 식별하고 사용자에게 오류 정보를 제공하는 데 사용할 수 있는 프로그래밍 정보와 결합될 수 있다. 예를 들어, 특정 기술에서는 사용자 입력이 특정 범위를 벗어나서는 안 되며 양식 필드가 필요하다고 지정할 수 있다. 이러한 유형의 프로그래밍 정보는 이 성공 기준에 필요하지 않지만 4.1.2 이름, 역할, 값과 같은 다른 기준에 의해 포함될 수 있다.
텍스트 설명 외에 이미지, 색상 등 다른 방법으로 오류를 표시하는 것이 완전히 허용된다.
참조하라 3.3.3: 오류 수정 제안.
이점
- 입력 오류에 대한 정보를 텍스트로 제공함으로써 시각 장애나 색맹인 사용자도 오류가 발생했다는 사실을 인지할 수 있다.
- 이 성공 기준은 아이콘과 기타 시각적 단서가 나타내는 의미를 이해하는 데 어려움을 겪는 인지 장애, 언어 장애, 학습 장애가 있는 사람들에게 도움이 될 수 있다.
예제
- 양식 제출 시 오류 식별
-
항공사 웹사이트에서는 할인된 항공편에 대한 특별 프로모션을 제공한다. 사용자는 이름, 주소, 전화번호, 선호 좌석, 이메일 주소 등의 개인 정보를 묻는 간단한 양식을 작성해야 한다. 양식의 필드 중 하나라도 작성되지 않았거나 잘못 작성되면 사용자에게 누락되었거나 잘못된 필드를 알리는 경고가 표시된다.
참고
이 성공 기준은 오류를 표시하는 데 색상이나 텍스트 스타일을 사용할 수 없다는 의미는 아니다. 단순히 텍스트를 사용하여 오류도 식별해야 한다. 이 예에서는 색상 외에 두 개의 별표가 사용되었다.
- 다양한 단서 제공
- 사용자가 양식의 두 필드를 채우지 못했다. 오류를 설명하고 필드를 쉽게 검색할 수 있도록 고유한 문자를 제공하는 것 외에도 필드를 노란색으로 강조 표시하여 시각적으로 쉽게 검색할 수 있다.
기법
이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.
충분 기법
아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.
상황 A: If a form contains fields for which information from the user is mandatory.
- G83: Providing text descriptions to identify required fields that were not completed
- ARIA2: Identifying a required field with the aria-required property
- ARIA21: Using aria-invalid to Indicate An Error Field
- SCR18: Providing client-side validation and alert
- PDF5: Indicating required form controls in PDF forms
상황 B: If information provided by the user is required to be in a specific data format or of certain values.
- ARIA18: Using aria-alertdialog to Identify Errors
- ARIA19: Using ARIA role=alert or Live Regions to Identify Errors
- ARIA21: Using aria-invalid to Indicate An Error Field
- G84: Providing a text description when the user provides information that is not in the list of allowed values
- G85: Providing a text description when user input falls outside the required format or values
- SCR18: Providing client-side validation and alert
- SCR32: Providing client-side validation and adding error text via the DOM
- PDF22: Indicating when user input falls outside the required format or values in PDF forms
조언 기법
준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.
점검 규칙
다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.