사용자가 잘못 입력한 값을 올바른 값으로 수정할 수 있도록 도와주는 기술을 제공해야 합니다.
기술설명
이 기술의 목적은 필드에 허용 되지 않는 값이 입력된 경우, 사용자에게 알려주는 것입니다.
잘못된 값을 입력한 경우, 오류에 대한 이유와 위치를 텍스트로 제공하여 사용자가 알 수 있게 합니다.
이런 유효성 검사를 클라이언트 측에서 하는 경우, 사용자가 필드에 잘못된 데이터를 입력하면 그 즉시 경고창이 나와 오류를 알려줍니다.
서버 측에서 유효성 검사를 하는 경우, 서버가 제출된 양식(Form)을 받고 오류를 찾으면 사용자가 입력한 값을 포함한 양식을 반환합니다. 반환한 페이지의 상단에 오류에 대한 설명을 표시합니다. 문제가 있는 필드도 쉽게 찾을 수 있는 방법도 제공합니다.
오류에 대한 설명이 제공되더라도 사용자의 이해를 돕기 위해, 아래의 방법 중 하나를 적용해야 합니다.
- 해당 필드에 올바른 데이터가 입력된 예시를 제공합니다.
- 해당 필드에 올바른 데이터 입력 방법을 설명합니다.
- 사용자가 값을 선택해서 입력해야 하는 경우, 값을 입력하는 방법과 올바른 데이터 입력 예시를 표시해야 합니다.
예시
[예시1] 사용자가 필드에 잘못된 데이터를 입력했습니다. 사용자가 필드에서 나오면, 사용자가 수정할 수 있도록 오류에 대한 이유를 경고 창으로 알려줍니다.
[예시2] 사용자가 필드에 잘못된 데이터를 입력하고 양식을 제출 합니다. 서버는 사용자가 입력 했던 값들이 그대로 있는 양식(Form)을 반환하고 페이지 상단에 오류의 이유를 표시합니다.
표시된 이유의 내용에는 어디가 어떻게 잘못 되었는지를 명확하게 표시해야 합니다.
그래야 사용자가 해당 필드로 이동하여 올바르게 수정할 수 있습니다.
[예시3] 사용자가 필드에 잘못된 데이터를 입력하고 양식을 제출하려고 합니다.
클라이언트 쪽의 스크립트가 먼저 오류를 감지하고 제출 버튼 뒤에 오류에 대한 설명을 제공합니다.
그리고 사용자가 해당 필드로 이동하여 수정 할 수 있도록 링크를 제공합니다.
그리고 문제가 있는 필드의 레이블(Label)을 강조하여 표시해 줍니다.
관련기술
점검절차
1. 양식에서 의도적으로 잘못 된 형식이나 범위에 벗어난 값을 입력합니다.
2. 오류가 있는 필드에 대한 이유와 수정 방법 등이 정보가 텍스트로 제공되는지 확인합니다.
3. 비밀번호 같이 보안이 필요한 필드를 제외하고 양식의 필드에 사용자가 입력했던 값들이 그대로 있는지 확인합니다.
나의 정리
<form>에는 다양한 <input>이 있습니다. <input>들은 주어진 역할에 따라 성격을 가지게 됩니다.
전화번호가 들어가는 <input>이라면 숫자만 입력되어야 합니다.
이름이 들어가는 <input>에는 숫자나 특수기호가 들어가서는 안 됩니다.
성별을 지정하는 <select>의 경우 지정된 <option>중 하나를 선택해야 합니다.
그런데 사용자가 실수로 잘못된 값을 입력한 경우, 사용자에게 잘 못된 이유를 알려줘야 합니다.
사용자가 잘못된 값을 입력하고 그것을 찾아내는 것을 유효성 검사라고 합니다.
이제부터 유효성 검사의 방법을 예시로 알아보겠습니다.
먼저 클라이언트가 유효성을 검사하는 방법입니다.
사용자가 전화번호를 입력해야 하는 필드에 ‘010-123-0000’라고 입력했습니다.
해당 입력필드의 레이블(Label)에는 번호만 입력해 달라는 설명이 있었지만 실수로 특수문자(-)를 포함 했습니다.
그리고 ‘제출’버튼을 클릭합니다.
클라이언트에 있는 스크립트가 서버에 제출하기 전에 전화번호 부분에 숫자이외의 다른 문자가 있다는 것을 파악하고 경고 창으로 [전화번호는 숫자만 입력해야 합니다.]라고 알려줍니다.
경고 창을 닫으면 전화전호 필드로 포커스(Focus)가 이동됩니다. 이동한 전화전호 필드의 레이블의 글자 색이 빨간색으로 되어 있습니다.
다른 방법으로는 서버가 유효성을 검사하는 방법입니다.
사용자가 이름을 입력해야하는 필드에 ‘홍길동3’이라고 입력했습니다.
해당 입력 필드의 레이블(Label)에는 ‘숫자 및 특수문자를 입력하지 마세요.’라는 설명이 있었지만 실수로 숫자가 포함되었습니다. 그리고 ‘제출’버튼을 클릭 합니다.
사용자가 입력한 양식(Form)이 서버에 제출됩니다. 서버가 유효성 검사를 하고 오류가 있음을 발견하고 받았던 양식 그대로 사용자에게 반환 합니다. 사용자는 서버가 보내준 양식(Form)을 받게 됩니다.
받은 양식에 필드에는 사용자가 입력했던 값들이 그대로 입력되어 있고 해당 양식(Form)이 있는 페이지의 제일 위에 설명글이 빨간색으로 추가되어 있습니다. 내용은 다음과 같습니다.
‘이름에 숫자 또는 특수문자가 포함되어 있습니다. 문자만 입력해 주세요.’
그리고 이름 필드의 레이블이 빨간색으로 굵게 표시 되고 해당 필드에 빨간색선 테두리가 적용되어 있습니다.
이 부분이 잘된 부분임을 직감 할 수 있습니다.
이런 방법으로 사용자가 잘못 입력한 값을 올바른 값으로 수정할 수 있도록 도와주는 기술을 제공해야 합니다.
G85: Providing a text description when user input falls outside the required format or values
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G85.html
G85: Providing a text description when user input falls outside the required format or values | Techniques for WCAG 2.0
The objective of this technique is to provide assistance in correcting input errors where the information supplied by the user is not accepted. When users enter data input that is validated, and input errors are detected, information about the nature and l
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G87] 자막을 제공해야 합니다. (0) | 2024.06.28 |
|---|---|
| [웹접근성 지침-일반기술 G86] 중등 수준의 읽기 능력을 가진 사용자도 이해할 수 있는 요약 글을 제공해야 합니다. (0) | 2024.06.27 |
| [웹접근성 지침-일반기술 G84] 사용자가 허용하지 않은 형식의 내용을 입력한 경우 텍스트로 알려줘야 합니다. (0) | 2024.06.21 |
| [웹접근성 지침-일반기술 G83] 필수 입력 필드에 내용을 입력하지 않은 경우, 이를 알리기 위한 설명이 제공되어야 한다. (0) | 2024.06.20 |
| [웹접근성 지침-일반기술 G82] 텍스트가 아닌 콘텐츠의 경우 대체 텍스트로 콘텐츠의 목적에 대한 설명이 제공되어야 합니다. (0) | 2024.06.19 |
