이용자 본인에 관한 정보를 받는 입력 칸은 그 목적을 프로그램이 알 수 있게 표시해야 W3C 웹 접근성 기준 1.3.5를 충족합니다. 병원 홈페이지의 예약 신청서에 이름, 휴대전화 번호, 생년월일 칸이 있다고 해 봅시다. 화면에 '이름'이라고 적어 두면 사람은 알아보지만, 브라우저나 보조기술이 그 칸이 신청하는 사람의 이름을 받는 칸이라는 것을 알려면 코드에 목적이 따로 적혀 있어야 합니다.
기준은 '이용자 본인에 관한' 입력 칸에 적용됩니다
W3C의 성공 기준 1.3.5 입력 목적 식별 해설(수준 AA)에 실린 기준 문장은 이용자에 관한 정보를 받는 각 입력 칸이 WCAG가 정한 입력 목적 목록에 해당하고 그 목적을 표시할 수 있는 기술로 만들어졌다면 목적을 프로그램이 알 수 있어야 한다는 내용입니다.
해설은 다음 내용을 함께 설명합니다.
- type 속성의 tel이나 email은 넓은 종류만 알려 줍니다. 예를 들어 email 유형만으로는 그 칸이 이용자 본인의 이메일을 받는지 다른 사람의 이메일을 받는지 알 수 없습니다.
- HTML의 autocomplete 속성은 정해진 값만 받으므로 이름(name), 생일(bday), 전화번호(tel)처럼 더 구체적인 목적을 표시할 수 있습니다.
- 목적이 표시되면 보조기술이 전화 칸 앞에 전화기 아이콘을 보여 주는 식으로 이용자에게 익숙한 방식으로 안내할 수 있고, 브라우저는 이전에 저장한 값을 제안할 수 있습니다. 기억이나 읽기에 어려움이 있는 이용자에게 도움이 된다고 해설은 설명합니다.
- 브라우저가 실제로 자동 입력을 해 주는지는 평가와 상관이 없고, 칸이 목적을 코드로 드러내는지가 중요합니다. 브라우저가 칸 이름을 보고 짐작해서 채워 주는 것만으로는 기준을 충족하지 않습니다.
- 이 기준은 이용자 본인에 관한 정보를 받는 칸에만 적용됩니다. 이용자에 관한 것이 아닌 정보를 받는 칸은 목록에 있는 목적이라도 표시할 의무가 없습니다.
- 자동 입력을 막고 싶은 경우라도 기준을 충족하려면 목적은 프로그램이 알 수 있어야 합니다.
AI로 생성한 개념 이미지. 실제 병원 사진이 아닙니다.
값은 정해진 목록에서 고릅니다
WCAG 2.2 7장 '사용자 인터페이스 구성 요소의 입력 목적'은 이용자 본인에 관한 정보로 이름(name), 이메일(email), 전화번호(tel), 생일(bday), 우편번호(postal-code) 같은 목적을 나열합니다. 이 목록은 HTML 명세의 자동 채우기 항목을 바탕으로 했다고 밝힙니다.
MDN의 autocomplete 속성 문서는 각 값을 이렇게 설명합니다.
- name: 사람의 전체 이름입니다. 이름을 성과 이름으로 나누는 것보다 name 하나를 쓰는 편이 다양한 이름 구조를 다루기에 낫다고 안내합니다.
- tel: 국가 번호를 포함한 전체 전화번호입니다. 번호를 나눠 받아야 한다면 tel-national 같은 세부 값을 쓸 수 있습니다.
- email: 이메일 주소입니다.
- bday: 전체 생년월일입니다. 연·월·일을 따로 받는다면 bday-year, bday-month, bday-day를 씁니다.
- off: 브라우저가 이 칸의 값을 자동으로 넣거나 고르지 못하게 합니다.
AI로 생성한 개념 이미지. 실제 병원 사진이 아닙니다.
병원 예약 신청서에서 점검하는 순서
메디지오의 운영 권장은 신청서 칸을 '누구의 정보인가'로 먼저 나누는 것입니다.
- 예약 신청서의 칸을 모두 적고, 신청하는 사람 본인의 정보인지 아닌지를 표시합니다. 보호자가 가족을 대신해 신청하는 양식이라면 보호자 칸과 가족 칸을 나눠 적습니다.
- 본인의 이름·휴대전화·이메일·생년월일 칸에 autocomplete 값이 name, tel, email, bday처럼 목적에 맞게 들어 있는지 제작자에게 확인합니다.
- 연·월·일이나 전화번호를 여러 칸으로 나눠 받는다면 칸마다 bday-year나 tel-national 같은 세부 값이 맞게 붙었는지 봅니다.
- 희망 날짜나 문의 내용처럼 목록에 없는 칸에는 억지로 값을 붙이지 않습니다.
- 값을 확인한 뒤에는 휴대전화와 컴퓨터 브라우저에서 직접 신청서를 열어 저장된 정보 제안이 칸의 의미와 맞게 뜨는지 봅니다.
이 글은 청주·충북 지역 병원을 포함한 일반적인 홈페이지 점검 방법을 W3C·MDN 문서에 따라 정리한 것이며 특정 병원 홈페이지를 진단한 결과가 아닙니다.
