미용실 방문 준비 목록에서 ‘출입 방법 보기’를 눌렀을 뿐인데 옆의 준비 완료 칸이 채워진다면 고객의 행동이 잘못 기록된 것입니다. 설명을 열어 보는 행동과 확인을 마쳤다고 표시하는 행동은 따로 실행할 수 있어야 합니다. 온라인 체크리스트를 검수할 때에는 도움말이 잘 열리는지만 보지 말고 그 순간 원래 체크 상태가 바뀌는지도 살펴야 합니다.
먼저 실제로 조작할 수 있는 목록인지 확인합니다. 인쇄용 문서의 네모 기호에는 이 시험을 적용하지 않습니다. 체크 기능이 있는 화면이라면 한 항목에서 체크 칸, 그 칸의 이름, 보충 설명을 여는 링크나 버튼을 각각 찾습니다. ‘출입 안내를 확인했어요’라는 항목 이름을 누르는 것과 ‘출입 안내 읽기’라는 도움말을 누르는 것은 목적이 다릅니다. 둘이 한 줄에 나란히 있다는 이유로 같은 동작으로 처리하지 않습니다.
시험용 목록을 체크하지 않은 상태로 두고 도움말만 한 번 엽니다. 펼쳐지는 설명이라면 열린 직후, 다른 화면으로 이동한다면 돌아온 뒤에 체크 상태를 확인합니다. 이어서 이미 체크한 상태에서도 같은 도움말을 엽니다. 앞의 시험에서는 마음대로 완료가 되지 않아야 하고 뒤의 시험에서는 이미 남긴 표시가 풀리지 않아야 합니다. 두 경우를 살펴야 ‘아무 곳이나 누르면 체크를 반대로 바꾸는’ 동작을 발견할 수 있습니다. 실제 예약이나 상담 전송 없이 준비한 시험 화면에서 재현합니다.
기술 담당자에게는 어떤 글자를 눌렀고 어떤 칸이 어떻게 변했는지 전달합니다. 원인 후보로는 도움말까지 포함한 행 전체에 체크 변경 처리를 붙인 경우가 있습니다. 다만 겉으로 나타난 증상만으로 원인을 확정하지는 않습니다. 브라우저가 제공하는 체크 동작과 사이트가 덧붙인 클릭 처리를 함께 조사해야 하며, 도움말을 열 때는 다음 안내를 보여 주고 체크를 바꾸지 않도록 동작의 담당 범위를 정합니다.
HTML의 label은 입력 요소에 붙이는 이름입니다. WHATWG 표준은 label 안의 링크 같은 상호작용 요소를 대상으로 한 동작에서 label 자체가 입력을 활성화하지 않도록 정합니다. MDN도 체크 칸에 연결된 label 안에 별도의 링크나 버튼을 함께 넣지 않는 구성을 권합니다. 이 설명을 모든 사이트의 원인이 같다는 뜻으로 읽지는 않습니다. 구현을 고칠 때에는 확인 표시를 위한 이름과 추가 설명을 여는 장치를 분리하는 근거로 활용합니다.
분리한다고 체크 칸 옆의 이름까지 단순한 장식 글자로 바꾸어서는 안 됩니다. 고객이 항목 이름을 눌러 해당 체크를 조작하는 기능은 유지하고, 도움말은 ‘설명 열기’처럼 다른 행동임을 알 수 있게 둡니다. 클릭을 모두 막아 오류를 숨기면 정작 필요한 설명도 읽을 수 없게 됩니다. 도움말의 목적지와 체크할 내용의 관계가 눈으로도 이해되는지, 좁은 화면에서 두 영역을 잘못 누르기 쉬워지지 않았는지도 봅니다.
수정 뒤에는 도움말만 열기, 체크만 바꾸기, 도움말을 읽은 뒤 의도적으로 체크하기를 차례로 실행합니다. 마우스나 터치로 성공한 결과를 키보드 조작의 확인으로 대신하지 않고, 화면 읽기 도구에서는 두 장치의 이름과 체크 상태가 구별되는지도 시험합니다. 사용한 환경과 실제로 확인한 범위를 적으며, 시험하지 않은 조작 방식까지 통과했다고 기록하지 않습니다.
최종 확인에서는 체크가 없는 항목의 도움말을 여러 번 열어도 표시가 그대로인지, 사용자가 체크를 선택했을 때만 그 항목의 상태가 바뀌는지를 봅니다. 미용실 체크리스트가 다음 행동을 돕기 위해서는 고객이 아직 알아보는 중인 일을 완료했다고 대신 판단하지 않아야 합니다. 설명을 자유롭게 읽고 스스로 확인 표시를 남길 수 있는 두 경로가 각각 정상적으로 작동할 때 이 오류의 수정을 마칩니다.
기술 근거: WHATWG HTML Standard, label 요소의 동작 https://html.spec.whatwg.org/multipage/forms.html#the-label-element 구성 참고: MDN, label 요소의 Interactive content 설명 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#interactive_content