병원 문의 양식, 입력을 시작해도 항목 이름이 남아 있어야 합니다
2026-10-26 · 플라톤마케팅 · 약 4분 읽기

입력칸 안에만 '연락처'라고 적혀 있고 숫자를 입력하면 그 글자가 사라지는 양식이 있습니다. 이용자가 여러 칸을 채운 뒤 돌아오면 어떤 정보를 입력한 칸인지 다시 확인하기 어려울 수 있습니다. 항목 이름은 입력 후에도 식별할 수 있게 제공하고, 예시와 형식 안내는 별도의 역할로 다루는 편이 좋습니다.
항목 이름과 입력 예시를 구분합니다
항목 이름은 '이메일'처럼 무엇을 입력하는지 알려 줍니다. 예시는 형식을 이해하도록 돕는 참고값입니다. 입력칸 안의 placeholder만으로 이름을 대신하면 입력한 뒤 안내가 사라지는 문제를 검토해야 합니다. 화면이 간결해 보이는지만 보지 말고 작성 중인 상태에서도 뜻이 분명한지 봅니다.
W3C WAI는 입력 요소에 목적을 설명하는 이름을 제공하고, 이름과 요소를 코드에서도 연결하도록 안내합니다. 명시적 label 연결에서는 for와 입력 요소의 id가 일치해야 합니다. W3C 입력 요소 라벨 안내 기술 구현은 개발자가 확인하되, 운영자는 각 항목이 어떤 질문에 답하는지 먼저 명확히 정해야 합니다.

화면에 보이는 이름과 전달되는 이름을 대조합니다
눈으로 볼 때 가까이 붙어 있는 글자가 코드상 같은 입력칸의 이름으로 연결됐다는 보장은 없습니다. 개발자에게 접근성 트리에서 입력 요소의 이름을 확인해 달라고 요청할 수 있습니다. 화면에는 '문의 내용'인데 보조기술에는 다른 이름이 전달된다면 연결 관계를 수정해야 합니다.
가정으로 이름, 연락처, 이메일, 문의 내용의 4개 입력칸이 있다고 하겠습니다. 각 칸을 빈 상태, 입력 상태, 오류 상태의 3가지로 살피면 기본 확인표는 12칸입니다. 이것은 점검 범위를 빠뜨리지 않기 위한 운영 예시이며 접근성 점수나 인증 기준이 아닙니다. 입력항목 자체가 필요한지도 별도로 검토해야 합니다.
반복 양식에서는 잘못 연결된 이름을 찾습니다
한 페이지에 본문 문의 양식과 팝업 문의 양식이 함께 있으면 구현을 복사하는 과정에서 식별자가 중복될 수 있습니다. 개발자는 각 라벨이 의도한 입력칸과 연결되는지 확인해야 합니다. 본문의 연락처 이름을 눌렀는데 팝업의 다른 칸으로 이동하는 등의 현상이 있다면 재현 경로를 기록합니다.
운영자는 페이지 주소와 양식 위치를 구분해 검수합니다. 홈페이지 첫 화면의 양식이 정상이라고 모든 페이지의 양식도 같다고 가정하지 않습니다. 비슷하게 보여도 서로 다른 템플릿이나 외부 서비스에서 제공될 수 있습니다. 수정 요청에는 어느 양식의 어느 칸인지 포함합니다.

필수 여부와 형식 안내도 입력 전에 알 수 있게 합니다
필수 항목인지, 특정 형식이 필요한지 제출 실패 후에야 알려 주면 반복 입력이 생깁니다. 항목 이름 옆이나 관련 안내에서 조건을 알 수 있게 하고, 별표를 쓴다면 의미를 설명합니다. 설명 문구와 실제 검증 조건이 일치하는지도 확인합니다. 안내는 하이픈을 허용하는데 시스템은 거부한다면 문구 또는 처리 규칙을 고쳐야 합니다.
보조 설명이 길어질 때에는 항목 이름에 모든 내용을 넣기보다 설명 영역과의 연결을 검토합니다. 화면에서 안내가 보인다는 이유만으로 보조기술에도 적절한 순서로 전달된다고 단정하지 않습니다. 실제 사용 환경에서 읽히는 결과를 확인해야 합니다.
마지막 검수에서는 입력된 값을 유지한 상태로 양식을 다시 읽어 봅니다. 어떤 칸인지 식별할 수 있는지, 필수 여부를 찾을 수 있는지, 오류가 나면 무엇을 고쳐야 하는지 확인합니다. 접수 저장과 측정의 정상 여부는 문의 완료 화면 검증에서 별도로 다룹니다. 출처 확인일: 2026-10-26. 이 점검만으로 전체 접근성 적합성을 판정하지 않습니다.

이 글과 이어지는 주제