병원 홈페이지의 이용 안내가 버튼의 위치나 모양, 색만으로 대상을 가리키면 화면을 보지 않고 듣는 방문자는 무엇을 눌러야 할지 알기 어렵습니다. '예약은 오른쪽 위 파란 버튼을 누르세요' 같은 문장은 화면 낭독 프로그램으로 들으면 어느 버튼인지 알려 주지 못합니다.
위치와 모양만 적은 안내는 왜 문제가 될까요
W3C 웹 콘텐츠 접근성 지침(WCAG) 2.2의 성공 기준 1.3.3은 콘텐츠를 이해하고 조작하기 위한 안내가 모양, 색, 크기, 화면상 위치, 방향, 소리 같은 구성 요소의 감각적 특성에만 의존하지 않아야 한다고 정합니다. 색에 관한 요구 사항은 지침 1.4를 따로 보라는 참고도 붙어 있습니다.
W3C의 성공 기준 1.3.3 해설은 '둥근 버튼', '오른쪽에 있는 버튼'처럼 콘텐츠 구조만으로는 알 수 없는 모양이나 위치 정보에 기대는 안내를 예로 듭니다. 시각장애가 있거나 저시력인 사람은 사용하는 보조기술의 특성 때문에 모양이나 위치를 알기 어려울 수 있다는 설명입니다. 해설은 경기 일정표 아래에 '파란 마름모로 표시한 경기는 A 구장, 초록 원으로 표시한 경기는 B 구장'이라고만 적은 경우를 색과 모양에만 의존해 기준을 충족하지 못하는 예로 듭니다.
AI로 생성한 개념 이미지. 실제 병원 사진이 아닙니다.
위치 설명을 지우지 말고 이름을 더하세요
같은 해설은 모양이나 위치로 정보를 주는 방식이 인지 기능에 제약이 있는 사람을 포함해 많은 이용자에게 효과적이라고 밝히고, 다른 방식으로도 정보를 함께 준다면 그런 단서를 쓰지 말라는 뜻은 아니라고 설명합니다. 해설의 설문 예시에서는 오른쪽 아래의 초록 화살표 아이콘에 '다음'이라는 이름이 붙어 있고, 안내문이 그 이름까지 함께 가리키기 때문에 기준을 충족합니다.
메디지오의 운영 권장은 안내 문구에 버튼과 메뉴의 실제 이름을 먼저 적고 위치는 보조 설명으로 남기는 것입니다. '오른쪽 위 파란 버튼' 대신 '화면 오른쪽 위의 진료 예약 버튼'처럼 쓰고, 그 버튼의 화면 글자와 화면 낭독 프로그램이 읽는 이름이 같은지도 함께 확인합니다. 아이콘만 있는 버튼이라면 대체 텍스트로 이름을 붙여 두어야 안내문에 적은 이름과 맞출 수 있습니다.
진료 안내 페이지에서 먼저 살펴볼 문장
점검은 안내 문장을 모아 읽는 것부터 시작합니다. 이용 안내, 오시는 길, 자주 묻는 질문, 진료 예약 안내 페이지에서 '위', '아래', '왼쪽', '오른쪽', '둥근', '파란', '빨간' 같은 표현이 들어간 문장을 찾고, 그 문장만 읽고도 대상의 이름을 알 수 있는지 확인합니다. 해설은 '아래 링크 중 하나를 선택하세요'처럼 읽는 순서상 앞뒤를 가리키는 표현은 대상이 순서에 맞게 있고 모호하지 않다면 충족할 수 있다고 설명하므로, 이런 문장은 실제 순서가 맞는지만 보면 됩니다.
AI로 생성한 개념 이미지. 실제 병원 사진이 아닙니다.
진료과별 안내나 검사 전 준비 사항처럼 여러 담당자가 나눠 쓰는 글은 표현이 제각각이기 쉬우니, 안내 문구를 고칠 때 버튼 이름 목록을 함께 정리해 두면 다음 수정 때도 같은 이름을 쓸 수 있습니다. 청주·충북 지역 병원을 포함한 일반적인 홈페이지 운영 점검이며 특정 병원 홈페이지에 대한 진단 결과는 아닙니다.
