입력한 내용에 대한 오류를 찾아주는 기술을 이용하여 사용자가 잘못된 내용을 제출 하지 않게 도와 주어야 합니다.
기술설명
이 기술의 목적은 사용자가 잘못 입력한 오류를 찾는데 도움을 주는 것입니다.
여기에서 말하는 오류는 필수 입력 사항에 입력을 하지 않거나 잘 못된 내용을 입력한 상황을 말합니다.
사용자가 내용을 입력하고 제출하면 오류를 감지하고 오류가 있는 부분으로 이동하는 링크가 제공됩니다.
즉 사용자는 오류가 난 부분을 찾을 필요가 없습니다. 링크른 통해 이동하면 됩니다.
다른 방법으로는 서버가 입력받은 내용을 검사하고 오류가 있으면 이전에 입력한 내용을 양식에 다시 표시하고 상단에 오류에 대한 설명과 오류 부분으로 이동하는 링크를 제공해 주는 것입니다.
예시
[예시1] 서버 측 오류 검사
사용자가 양식 필드에 잘못된 데이터를 입력하고 양식을 제출 했습니다.
서버는 오류를 감지하고 입력 받았던 데이터들을 양식과 함께 반환합니다.
상단에는 오류를 감지한 내용을 명확하게 텍스트로 표시합니다.
텍스트는 오류의 특징을 설명하고 문제가 있는 부분으로 이동할 수 있는 링크를 제공합니다.
사용자는 링크를 통해 오류가 있는 곳을 이동하여 문제를 해결합니다.
[예시2] 팝업을 통한 클라이언트 측 오류 검사
사용자가 양식 필드에 잘못된 데이터를 입력하고 제출을 합니다.
클라이언트 측에서 스크립트로 오류를 감지하고 제출을 취소합니다. 그리고 오류에 대한 메시지와 오류가 있는 필드로 이동하는 링크를 제공합니다. 스크립트 또한 문제가 있는 필드의 레이블(label)에 수정해양 되는 부분란 것 강조하여 표시합니다.
[예시3] 팝업 없이 클라이언트 측 오류 검사
사용자가 양식 필드에 잘못된 데이터를 입력하고 제출합니다.
스크립트는 그 오류를 인식하고 새 페이지로 이동하는 것을 막은 다음에 '오류가 있습니다.'라는 텍스트가 나타나며 이 텍스트 링크에 초점을 맞춥니다.
그 링크는 '오류들을 설명한 목록'입니다. 목록에서 첫 번째 항목으로 이동합니다.
각 항목은 오류가 발생한 부분에 대한 링크입니다. 그리고 오류가 있는 부분에는 '오류들을 설명한 목록'으로 돌아갈 수 있는 링크가 제공됩니다. 이를 통해 모든 오류들을 순차적으로 처리할 수 있습니다.
관련기술
G83: 완료되지 않은 필수 필드를 식별하기 위한 텍스트 설명 제공
G85: 사용자 입력이 필요한 형식이나 값을 벗어날 때 텍스트 설명 제공
점검절차
1. 의도적으로 필수 입력란은 비워두고 나머지는 잘못된 내용을 입력하고 양식을 제출합니다.
2. 누락된 필수 입력에 대한 메시지가 나오는지 확인합니다.
3. 잘못 입력한 부분에 대한 메시지가 나오는지 확인합니다.
4. 누락된 필수 입력 부분으로 이동하는 링크가 제공되는지 확인합니다.
5 .잘못 입력한 부분으로 이동하는 링크가 제공되는지 확인합니다.
나의 정리
웹 페이지에 항목을 입력하는 양식(form)이 있습니다. 이 양식에 잘못된 값을 넣고 서버로 제출 할 경우, 잘 못된 값을 인지하여 사용자가 올바르게 수정하여 제출 할 수 있도록 도와주는 기술을 말하고 있습니다.
잘못 입력된 내용은 메시지나 텍스트로 알려주고, 수정할 수 있도록 잘 못된 값이 들어간 부분으로 이동 할 수 있는 링크가 있어야 합니다.
잘못 된 입력을 판단하는 '유효성'의 기능을 서버 또는 클라이언트에서 제공해 주어야 합니다.
먼저 서버가 유효성을 판단하는 경우를 알아봅니다.
이름과 전화번호를 입력 받는 폼입니다. 이름은 필수 입력사항이며 전화번호는 번호만 넣어야 합니다.
사용자는 이름을 적어 넣지 않고 전화번호에는 숫자사이에 특수문자 '-'를 입력하고 '제출'버튼을 눌렀습니다.
서버가 제출된 내용을 확인 합니다. 이름에 대한 값이 없으며, 전화번호에는 특수문자가 감지되었습니다.
서버는 사용자에게 입력했던 웹 페이지에 사용자가 입력했던 데이터를 담아 그대로 반환합니다.
그리고 웹 페이지 상단에 텍스트로 "이름을 입력하지 않았습니다.[수정하기]"와 "전화번호에 특수문자를 제거해주세요.[수정하기]"가 목록형식으로 나타납니다.
사용자는 [수정하기]를 링크를 눌러 해당 위치로 이동하여 수정할 수 있습니다.
수정을 마치고 다시 제출합니다.
클라이언트가 유효성을 판단하는 경우입니다.
이름과 전화번호를 입력 받는 폼입니다. 이름은 필수 입력사항이며 전화번호는 번호만 넣어야 합니다.
이름을 입력하지 않고 전화번호를 입력하려고 합니다.
그러자 클라이언트의 스크립트가 이름 부분에 값이 없는 것을 인지하고 경고 창으로 "이름을 입력해주세요."라고 안내합니다. 경고 창을 닫자 이름을 입력하는 항목으로 초점이 자동 이동합니다.
이름을 입력하고 이번에는 전화번호를 입력하는데 특수문자 '-'를 넣었습니다.
스크립트가 이를 인지하고 경고 창으로 '전화번호에는 숫자만 넣어주세요.'라고 안내합니다. 경고 창을 닫자 전화번호를 입력하는 항목으로 초점이 자동 이동합니다.
사용자는 번호만 입력하고 양식을 제출합니다.
이 외에도 다른 다양한 방식으로 사용자의 오류를 감시 하고 빠르고 정확하게 수정할 수 있게 해주는 기술이 많이 있습니다.
입력한 내용에 대한 오류를 찾아주는 기술을 이용하여 사용자가 잘못된 내용을 제출 하지 않게 도와 주어야 합니다.
G139: Creating a mechanism that allows users to jump to errors
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G139.html
G139: Creating a mechanism that allows users to jump to errors | Techniques for WCAG 2.0
The objective of this technique is to help users find input errors where the information supplied by the user is not accepted. This includes fields with missing required information and fields with incorrect information. When users enter data input that is
www.w3.org
독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다.
2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다.
참여하기: https://blog.naver.com/redoxup/223601934677
[조립]에서 2024년 11월 한 달 무료 과외(HTML/CSS/jQuery)를 합니다. - 과외 신청하세요!!
HTML+CSS+ jQuery(제이쿼리) 입문자 인가요? 웹퍼블리셔, 프런트엔드 개발자, 웹디자이너를 시작해...
blog.naver.com
