'제출 버튼' 앞에 입력한 내용을 한 번 더 확인해 달라는 '라벨(label)을 가진 체크박스'를 제공하여 사용자가 입력한 내용을 한 번 더 확인하게 하여 실수를 줄이게 합시다.
기술설명
이 기술의 목정은 사용자가 입력한 내용을 검토하고 작성할 내용을 제출할 준비가 되었는지를 확인하기 위해 체크박스를 제공하는 것입니다. 이는 입력오류나 잘못된 작업으로 인해 데이터가 삭제되면 복구 할 수 없는 트랜젝션 특성을 방지하기 위한 것입니다.
제작자는 '올바르게 내용을 입력하였습니다. 제출 하겠습니다.' 또는 '내용을 삭제하시겠습니까?'라는 라벨(label)을 가진 '체크가 안 된 체크 박스'를 제공해야 합니다. 이 체크 박스는 사용자가 잘 볼 수 있도록 '제출(submit) 버튼' 근처에 배치해야 합니다.
사용자가 체크박스를 체크하지 않고 양식을 제출하면, 서버는 제출을 거부하고 체크박스를 선택한 다음에 다시 제출하라는 메시지를 사용자에게 보여줍니다. 체크 박스가 선택된 상태에서 제출을 해야 트랜젝션이 처리됩니다.
*트랜잭션(Transaction): DB 상태를 변화시키는 작업으로, SQL을 사용하여 DB에 자료를 선택, 삽입, 삭제, 수정하는 것을 말합니다.
이렇게 체크박스를 이용하면 사용자가 실수로 양식을 제출하는 것을 방지하며, 정확하게 데이터를 입력하는데 큰 도움이 됩니다.
그리고 입력한 데이터가 정확한지를 알려주는 메시지를 표시하는 방법을 사용하는 것도 큰 도움이 딥니다.
이는 '제출 버튼'의 라벨을 '입력한 내용이 적확합니다. 제출하셔도 됩니다.'라고 하는 것 보다 안전합니다.
'제출 버튼'과 체크박스를 같이 제공하면 사용자는 입력한 내용을 다시 한 번 확인하게 됩니다.
즉 제출 전에 정보를 한 번 더 검토 및 수정할 수 있는 것입니다.
참고로 사용자가 체크박스를 체크하지 않고 제출한 경우, 다시 제출 할 수 있도록 양식으로 돌아 왔을 때 입력했던 내용들은 그대로 있어야 합니다.
예시
[예시1] 온라인 뱅킹 서비스를 이용하는 사용자가 다른 통화로 된 계좌 간에 이체를 하려고 합니다.
환율은 실시간으로 변하기 때문에 만약 사용자가 잘못된 금액으로 거래를 한 경우 동일한 환율로 다시 교환할 수 없게 됩니다.
그래서 금액을 입력하는 필드 외에도 '이체하려는 금액이 정확한지 확인해 주십시오.'라는 ' 라벨(label) 을 가진 체크 박스'가 제공됩니다. 체크 박스를 체크하고 '이체 실행'을 누르면 (되돌릴 수 없는) 거래가 수행됩니다.
[예시2] 온라인 결제 시스템은 결제 처리를 위해 사용자의 은행 계좌 정보를 저장하고 있습니다.
사용자가 새 계좌를 입력하려면 복잡한 인증 절차를 거쳐야 합니다.
시스템에서 저장된 계좌를 삭제할 수 있는 기능이 있습니다. 실수로 계좌를 삭제하면 복구가 어렵고 해당 계좌의 이전 거래 내역도 삭제됩니다. 따라서 계좌를 삭제하는 페이지에서는 '이 계좌를 삭제합니다.'라는 라벨이 있는 체크박스가 있습니다. 사용자는 이 체크박스를 체크하지 않으면 계좌는 삭제되지 않으며 사용자에게 오류 메시지를 보여줍니다.
체크를 해야 계좌를 삭제 할 수 있습니다.
[예시3] 쇼핑 사이트의 주문하기 페이지에는 주문, 배송, 청구 정보를 수집하는 양식이 포함되어 있습니다.
양식을 제출한 후에 사용자는 제출한 정보를 검토하기 위해 요약 페이지로 이동합니다.
요약 내용 아래에 '입력한 내용에 이상이 없음을 확인했습니다.'라는 라벨을 가진 체크박스가 있습니다.
체크 박스에 체크하고 '주문 완료' 버튼을 눌러야 거래가 완료 됩니다.
관련기술
G98: 제출하기 전에 사용자가 답변을 검토하고 수정할 수 있는 기능 제공
점검절차
사용자가 되돌릴 수 없는 거래의 페이지에서 입력해야 하는 경우:
1. '제출 버튼' 외에 입력하는 내용에 대해 확인을 하게 하는 체크 박스가 있는지 확인합니다.
2. 양식 제출 시 체크 박스가 체크 되지 않은 경우, 제출이 거부되고 사용자에게 입력 내용을 검토하고 체크 박스를 체크 한 뒤에 다시 제출 하라는 메시지가 나오는지 확인합니다.
나의 정리
웹을 이용하여 게시물을 작성하는 것에서 부터 서류제출, 은행 업무, 쇼핑 등 다양한 일들을 처리합니다.
대부분 이런 작업은 해당 홈페이지에서 양식(form)을 작성하여 제출하면 서버가 작성된 양식을 통해 일을 처리하게 됩니다.
서버는 사용자가 작성한 양식에 따라 '데이타 베이스(DB)'에 내용이 삽입되거나 수정 수정 또는 삭제할 수 있습니다.
만약 사용자의 실수로 수정 및 삭제를 해버리면 원본의 내용을 복구 할 수 없게 됩니다.
예를 들어,
인터넷 뱅킹으로 이체를 해야 하는데 잘못된 계좌번호를 입력한 경우.
원본 손상 없이 파일을 업데이트해야 하는데 원본에 덮어씌운 경우.
제품을 10개 시켜야 하는데 오타로 100개를 시킨 경우.
즉 서버로 잘못된 내용이 제출되면 그대로 처리되기 때문에 돌이킬 수 없는 상황이 생깁니다.
이런 일들을 방지하기 위해 '양식(form)'에 있는 '제출 버튼앞에 입력한 내용을 한 번 더 확인해 달라는 '라벨(label)을 가진 체크 박스'를 제공하는 것입니다.
사용자자 양식에 모든 항목을 입력하고 이 체크 박스를 만나면 입력한 내용을 한 번 더 확인하고, 체크박스를 체크 한 다음에 '제출 버튼'을 누르게 하는 겁니다.
사용자는 한 번 더 내용을 확인하기 때문에 잘못된 내용을 입력하는 실수를 줄일 수 있게 되는 것입니다.
해당 체크박스가 체크가 된 상태에서 '제출 버튼'을 누르면 입력한 내용이 서버로 제출되어 실행이 됩니다.
만약 체크가 안 되어 있다면 사용자에게 입력한 내용을 다시 확인하고 체크박스를 체크한 후에 '제출 버튼'을 눌러달라는 메시지를 보여줄 것입니다.
'제출 버튼' 앞에 입력한 내용을 한 번 더 확인해 달라는 '라벨(label)을 가진 체크박스'를 제공하여 사용자가 입력한 내용을 한 번 더 확인하게 하여 실수를 줄이게 합시다.
G155: Providing a checkbox in addition to a submit button
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G155.html
G155: Providing a checkbox in addition to a submit button | Techniques for WCAG 2.0
The objective of this technique is to provide a checkbox that users must select to indicate they have reviewed their input and are ready for it to be committed. This is important when the nature of the transaction is such that it may not be reversible if i
www.w3.org
공짜로 혼자서도 할 수 있는 웹퍼블리싱 공부 방법을 알려드립니다.
홈페이지 만들기, 혼자하기 힘들다면 무로 스터디에 들어오세요.
공부 방향을 모르겠다면 무료 과외를 신청하세요.
https://blog.naver.com/redoxup/223134941372
혼자서 웹퍼블리싱(HTML+CSS)입문과정 마스터 할 수 있다! + 도움을 받으면 더 잘 할 수 있다!!
웹디자이너, 웹퍼블리셔, 웹프로그램을 준비하시는 분들이라면, 다른 건 몰라도 HTML+CSS 입문과정...
blog.naver.com
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G157] '라이브 오디오 콘텐츠'와 '자막'은 동일한 웹페이지에서 제공되어야 한다. (3) | 2024.11.10 |
|---|---|
| [웹접근성 지침-일반기술 G156] '브라우저(=user agents)'의 일반적인 기술로 텍스트 블록의 전경과 배경을 변경하자. (5) | 2024.11.09 |
| [웹접근성 지침-일반기술 G153] 텍스트를 읽기 쉽게 만들자. (10) | 2024.11.07 |
| [웹접근성 지침-일반기술 G152] 깜빡이 있는 '애니메이션 GIF 이미지'는 5초 이내에 깜빡임이 정지되어야 합니다. (4) | 2024.11.01 |
| [웹접근성 지침-일반기술 G151] 대본에 따라 진행되는 경우, 대본에 대한 링크를 제공해야 한다. (11) | 2024.10.31 |
