필드(Field)에 잘못된 형식의 내용이 들어갔다면, 무엇이 잘못되었고 어디에서 어떻게 수정해야 하는지를 알려주어야 합니다. 그 내용이 친절하고 상세할수록 사용자는 쉽고 빠르게 문제를 해결 할 수 있습니다.
기술설명
사용자가 '입력 필드(Input field)'에 내용을 입력할 때, 형식에 맞지 않는 내용을 입력하면 사용자에게 무엇이 잘못되었는지를 알려주는 설명문이 제공되어야 합니다. 물론 사용자가 접근해서 알 수 있는 방법으로 말입니다.
다음과 같은 방법이 있습니다.
사용자가 잘못된 내용을 입력한 후에 양식을 제출하면 오류가 있는 필드에 대한 설명을 '경고 창(Alert dialog)'으로 알려주는 것입니다.
또 다른 방법으로는 서버가 유효성을 검사하는 방식으로, 양식을 제출하면 서버가 확인하고 오류가 있을 시 해당 '양식(Form)'이 있는 페이지로 돌아가서 그 페이지 제일 상단에 오류에 대한 설명을 텍스트로 합니다.
그리고 오류가 있는 필드를 빠르고 쉽게 찾을 수 있는 방법도 제공해야 합니다.
오류가 있는 해당 필드의 레이블(Label)에 별(*)표시를 하고 레이블의 글자 색을 빨간색으로 바꾸는 것만으로는 충분하지 않습니다. 오류에 대한 설명도 같이 제공되어야 합니다.
입력 가능한 값이 여러 가지 중 하나인 경우에는 텍스트로 설명로 설명해주어야 합니다.
가능하면 입력 가능한 값을 목록으로 보여주거나, 가장 유용한 값을 예시로 보여주어야 합니다.
예시
[예시1] 사용자가 양식에 있는 필드에 잘못된 내용을 입력했습니다. 사용자가 양식을 제출하기 전에 사용자가 수정할 수 있도록 무엇이 잘못되었는지를 경고 창으로 알려줍니다.
[예시2] 사용자가 양식에 있는 필드에 잘못된 내용을 입력한 후에 서버에 제출 했습니다.
서버는 사용자가 양식에 입력한 내용들을 그대로 반한하고 반환한 페이지 상단에 어떤 오류가 있었는지를 명확하게 표시 합니다. 사용자가 필드에 어떤 잘못된 값을 입력해서 오류가 났는지를 명확하게 알려주었기 때문에, 사용자는 해당 필드로 이동하여 문제를 해결 할 수 있게 됩니다.
점검절차
1. 양식 필드에 잘못된 내용을 입력합니다.
2. 오류에 대한 정보가 텍스트로 제공되는지 확인합니다.
나의 정리
예를 들어서 보겠습니다.
'이름 ', '성별 ', '연락처 ', '비밀번호 '를 입력해야 하는 회원 가입 양식(Form)이 있습니다.
'이름 ', '성별 ', '연락처 ', '비밀번호 '이라는 각각의 필드(Field)에 내용을 입력 합니다.
각각의 필드(Field)는 성격을 가지고 있으며 그 성격에 맞게 내용을 입력해야 오류가 나지 않습니다.
각각의 성격을 알아봅시다.
- '이름'필드에는 숫자가 들어가서는 안 됩니다. 사람 이름에 숫자는 들어가지 않으니까요.
- '성별'필드에는 남/여(/양성)라는 값 중에 선택해야 합니다.
- '연락처'필드에는 숫자만 들어가야 합니다.
- '비밀번호'는 4자 이상 들어가면 안 됩니다.
만약 사용자가 '이름 '필드에 실수로 숫자를 넣어 '김철수3 '이라고 입력하고 나머지 필드에는 정상 적인 내용을 입력했습니다. 그리고 [제출]버튼을 누른다면, [이름에 숫자가 들어있습니다.]라는 경고창이 나타날 것입니다.
서버에서 오류를 검사할 경우에는, 서버가 양식의 내용을 파악하고 오류가 있을 경우 '양식(Form) '이 있는 페이지로 돌아갑니다. 각 필드마다 사용자가 입력했던 값을 그대로 반환된 페이지 상단에 '등록된 내용에 이상이 있습니다. '라고 표시하고 수정해야 하는 필드의 레이블(Label)에 별(*) 표시도하고 색상도 빨간색으로 하여 눈에 잘 보이게 합니다.
그리고 '이름에는 숫자가 들어가면 안 됩니다. '라는 설명도 제공해 줍니다.
필드(Field)에 잘못된 형식의 내용이 들어갔다면 무엇이 잘못되었고 어디에서 어떻게 수정해야 하는지를 알려주어야 합니다. 그 내용이 친절하고 상세할수록 사용자는 쉽고 빠르게 문제를 해결 할 수 있습니다.
G84: Providing a text description when the user provides information that is not in the list of allowed values
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G84.html
G84: Providing a text description when the user provides information that is not in the list of allowed values | Techniques for
When users enter input that is validated, and errors are detected, the nature of the error needs to be described to the user in manner they can access. One approach is to present an alert dialog that describes fields with errors when the user attempts to s
www.w3.org
