'필수 입력 필드(mandatory field)'는 꼭 내용이 필요한 '필드(field)'이기 때문에 사용자가 깜빡하고 입력하지 않거나 옳지 않은 내용을 입력한 경우에는 이 사실을 사용자에게 알려주는 기술이 필요합니다.
기술설명
이 기술의 목적은 '필수 입력 필드'에 내용을 입력 하지 않은 경우, 사용자에게 알리기 위한 것입니다.
사용자가 반드시 입력해야 하는 ‘필수 입력 필드'에 사용자가 내용(=정보, 값)을 입력을 하지 않은 경우, 사용자가 입력하지 않은 필드가 무엇인지 알 수 있도록 텍스트로 알려주어야 합니다.
이런 유효성 검사를 위한 방법으로는 클라이언트 쪽에서 입력하지 않은 '필수 입력 필드'를 찾아서 '경고 창(alert dialog box)'으로 알려주는 것입니다.
다른 방법으로는 서버 쪽에서 유효성 검사를 하는 것입니다. 서버가 입력하지 않은 '필수 입력 필드'를 찾아서 해당 필드로 가서 설명해 주거나 텍스트로 해당 필드가 어디인지 설명하는 것입니다.
(서버 쪽 유효성 검사를 할 경우 다른 필드에 사용자가 입력한 내용들은 그대로 있어야 합니다.)
*참고: 일부 사용자는 '필수 입력 필드'에 입력 하지 않은 것을 인지하지 못하고 다른 오류가 있다고 착각할 수 있으므로 미리 메시지나 경고문을 넣는 것이 좋습니다.
스크린 리더를 사용하는 분들의 경우 '필수 입력 필드'를 모두 입력 했다고 착각하고 양식을 제출할 수 있습니다.
그러면 사용자는 올바르게 제출고 착각하여 다른 페이지로 이동해 버릴 수 있습니다.
그러니 <title>요소에 오류 내용을 포함 시켜 사용자가 알아 차릴 수 있도록 해야 합니다.
예시
[예시1] 사용자가 양식을 제출 했습니다. 하지만 필수 입력 필드를 입력하지 않았고, 선택 필드를 선택하지 않았습니다.
클라이언트 쪽에서 유효성 검사를 했고 누락된 부분을 감지했습니다. 그래서 사용자에게 필수 필드가 입력되지 않았음을 경고 창으로 나타냅니다. 그리고 입력되지 않은 필드의 레이블(label) 부분을 사용자가 식별 할 수 있도록 변경했습니다.
제출 버튼 뒤에 입력해야 할 필드로 이동할 수 있는 버튼도 생겼습니다.
사용자는 경고 창을 해제한 후에 해당 필드로 이동하여 내용을 입력할 수 있습니다.
[예시2] 사용자가 양식을 제출 했습니다. 하지만 필수 입력 필드를 입력하지 않았고, 선택 필드를 선택하지 않았습니다.
서버 쪽에서 유효성 검사를 했고 누락된 부분을 감지했습니다. 페이지 상단에 입력하지 않은 필드를 설명하는 글과 함께 입력양식이 다시 제공됩니다. 그리고 입력 하지 않았던 필드의 레이블을 식별가능하게 변경하였습니다.
사용자는 해당 필드를 바로 알아보고 입력할 수 있습니다.
[예시3] 사용자가 양식을 작성하고 있습니다. '필수 입력 필드'의 레이블에 필수 입력 필드임을 알려주는 설명이 포함되어 있습니다. 사용자가 필수 입력 필드에 내용을 입력하지 않고 필드 밖으로 나오게 되면, 클라이언트 쪽에서 스크립트를 이용하여 해당 필드의 레이블에 내용을 입력하라는 안내 문구를 나오게 합니다.
*참고: 일부 화면 판독기에서는 레이블의 변경된 내용을 인식하지 못할 수 있습니다. 그래서 화면 판독기가 사용자에게 오류 내용을 전달 못하는 경우가 있습니다.
관련기술
G85: 사용자 입력이 필수 형식이나 값을 벗어나는 경우 텍스트 설명 제공
SCR18: 클라이언트측 검증 및 경고 제공
점검절차
1. 하나 이상의 '필수 입력 필드'를 의도적으로 비운 상태에서 양식을 제출합니다.
2. 입력되지 않은 '필수 입력 필드'를 알려주는 설명이 제공되는지 확인합니다.
3. 비밀 번호 같이 데이터 보안 유지가 필요한 입력 필드를 제외하고 필드에 입력 했던 내용들이 그대로 표시하는지 확인합니다.
나의 생각정리
먼저 용어를 알아봅시다.
'양식(Form) '은 회원가입, 댓글 달기, 게시판 글쓰기와 같이 여러 입력 항목들의 집합을 말합니다.
예를 들어서 회원 가입 양식이라고 하면 '이름 ', '성별 ', '전화번호 ', '주소 ', '비밀번호 '등의 항목을 제공하고 이 항목들에 내용을 입력하고 [제출] 버튼을 눌러야 양식이 서버로 전달됩니다.
'이름 ', '성별 ', '전화번호 ', '주소 ', '비밀번호 ' 들의 집합을 '양식(Form) '이라고 합니다.
'필드(field) '는 앞에서 말한 항목들 '이름 ', '성별 ', '전화번호 ', '주소 ', '비밀번호 ' 각각을 말합니다.
'이름 필드 '는 사용자가 입력해야 하는 항목이므로 '입력 필드(input) '라고도 말합니다.
'성별 필드 '는 남자 또는 여자를 선택해야 하는 항목으로 '선택 필드(select)라고 말합니다.
'양식(Form) '의 여러 '필드(field) '중에서 제작자가 이 '필드(field) '의 내용은 꼭 입력되어야 한다고 설정한 것이 '필수 입력 필드(mandatory field) '입니다.
'필수 입력 필드(mandatory field) '는 꼭 내용이 필요한 '필드(field) '이기 때문에 사용자가 깜빡하고 입력하지 않거나 옳지 않은 내용을 입력한 경우에는 이 사실을 사용자에게 알려주는 기술이 필요합니다.
이런 기술에는 다음과 같이 있습니다.
클라이언트 쪽에서 입력되지 않은 '필수 입력 필드 '를 찾아내는 방식입니다. '양식(Form) '있는 페이지에 자바스크립트를 이용해서 검사를 하게 하는 것입니다.
사용자가 '필수 입력 필드 '를 하나 빼 먹고 [제출] 버튼을 누르면 입력한 내용들을 서버에 보내기 전에 자바스크립트로 만든 프로그램이 빼먹은 부분을 찾아내고 다시 입력할 수 있도록 경고 창으로 빼먹은 것을 알려주고 해당 필드로 이동시켜 줍니다.
서버 쪽에서 입력되지 않은 '필수 입력 필드 '를 찾아내는 방식도 있습니다.
'양식(Form) '작성하고 [제출] 버튼을 눌러 서버로 보냅니다. 서버는 내용을 확인하고 빼먹은 부분이 없는지 확인합니다.
빼먹은 부분이 있다면 서버는 해당 '양식(Form) '이 있는 페이지로 돌아간 다음에 잘못 된 내용을 경고창이나 안내문을 통해 보여줍니다. 그리고 입력해야 할 부분이 어디인지도 자세히 알려주어야 합니다.
중요한 점은 내용을 빼먹은 필드를 제외하고는 사용자가 입력했던 내용이 그대로 있어야 한다는 것입니다.그래야 처음부터 다시 작성하는 불편한 일이 없을 것입니다.
이런 방법으로 입력되지 않은 '필수 입력 필드 '에 사용자가 다시 잘 입력 할 수 있도록, 해당 필드의 레이블(Label) 텍스트를 굵은 빨간색으로 만들거나 해당 필드의 테두리 색을 굵게 만들어 줍니다.
눈에 잘 띄게 만들어 사용자가 바로 알아 볼 수 있게 배려해 주는 것입니다.
G83: Providing text descriptions to identify required fields that were not completed
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G83.html
G83: Providing text descriptions to identify required fields that were not completed | Techniques for WCAG 2.0
The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields w
www.w3.org
