병원 홈페이지의 진료시간 표는 요일과 시간대 칸을 머리글로 표시해야 화면 낭독기가 각 칸을 읽을 때 해당 요일과 시간대를 함께 알려 줄 수 있습니다. 눈으로 보면 '진료'와 '휴진'이 어느 요일 어느 시간인지 한눈에 알 수 있지만, 칸을 하나씩 소리로 듣는 방문자에게는 머리글 연결이 없으면 '휴진'이라는 낱말만 들릴 수 있습니다.
눈으로 보는 표와 프로그램이 읽는 표는 다릅니다
W3C 웹 접근성 이니셔티브(WAI)의 표 안내는 데이터 표가 논리적 관계가 있는 정보를 격자로 정리하는 것이며, 접근 가능한 표에는 머리글 칸과 데이터 칸을 구분하고 그 관계를 정하는 HTML 구조가 필요하다고 설명합니다. 머리글 칸은 th 요소로, 데이터 칸은 td 요소로 표시합니다.
같은 안내는 시각적인 단서만으로는 접근 가능한 표가 되지 않는다고 밝힙니다. 구조가 갖춰지면 소프트웨어가 머리글과 데이터 칸의 관계를 파악할 수 있어 다음과 같은 일이 가능해집니다.
- 화면 낭독기를 쓰는 사람은 표 안을 이동하면서 행과 열의 머리글을 함께 들을 수 있습니다. 화면 낭독기는 한 번에 한 칸씩 읽으면서 연결된 머리글을 함께 알려 주므로 읽는 사람이 맥락을 잃지 않습니다.
- 자신에게 맞는 스타일시트로 머리글 칸을 더 눈에 띄게 표시하는 등 정보를 다른 방식으로 보는 사람도 있습니다.
안내는 또한 많은 웹 저작 도구와 콘텐츠 관리 시스템이 코드를 직접 고치지 않고도 표를 만들 때 머리글 칸을 지정하는 기능을 제공한다고 설명합니다. 표는 배치(레이아웃)용으로 쓰는 것이 아니며 화면 배치는 CSS로 하는 것이 바람직하다는 점도 덧붙입니다.
AI로 생성한 개념 이미지. 실제 병원 사진이 아닙니다.
요일과 시간대가 모두 머리글인 표는 방향을 알려 줍니다
W3C의 머리글이 두 방향인 표 안내는 맨 위 행과 첫 열에 모두 머리글이 있는 표에서는 머리글과 데이터 칸의 관계가 금세 모호해진다고 설명합니다. 이런 표에서는 머리글 칸을 th 요소로 표시하고 scope 속성으로 각 머리글의 방향을 밝힙니다. 열 전체에 적용되는 머리글은 scope="col", 행 전체에 적용되는 머리글은 scope="row"입니다.
이 안내가 예로 드는 표가 바로 요일별·시간대별 운영 시간표입니다. 맨 위 행에 월요일부터 금요일까지, 첫 열에 시간대를 두고 각 칸에 Open(열림)과 Closed(닫힘)를 적은 표로, 안내는 이런 표시가 특정 요일과 시간대에 연결될 때에만 쓸모가 있다고 설명합니다. 병원 진료시간 표의 '진료'와 '휴진' 칸도 같은 구조입니다.
또한 caption 요소로 표에 제목을 붙이면 문서 안에서 표를 식별할 수 있고, 화면 낭독기의 표 탐색 기능으로 표에서 표로 이동하는 사람에게 특히 도움이 된다고 안내합니다.
AI로 생성한 개념 이미지. 실제 병원 사진이 아닙니다.
병원 홈페이지에서 점검하는 순서
다음은 W3C 안내를 바탕으로 한 메디지오의 운영 권장입니다.
- 진료시간·점심시간·휴진 안내가 실제 표로 만들어져 있는지, 아니면 글자를 칸처럼 줄 맞춰 늘어놓았거나 배치용 표로 꾸몄는지 확인합니다.
- 홈페이지 관리 화면의 표 편집 기능에서 첫 행(요일)과 첫 열(오전·오후 등 시간대)을 머리글로 지정했는지 봅니다.
- 제작자에게 머리글 칸이
th요소이고, 요일 머리글에는scope="col", 시간대 머리글에는scope="row"가 지정되어 있는지 확인을 요청합니다. - 표 위에 '진료시간 안내'처럼 무엇에 관한 표인지 알 수 있는 제목을
caption으로 붙입니다. - 화면 낭독기를 켜고 표 안을 한 칸씩 이동하면서 '휴진' 같은 칸을 들을 때 요일과 시간대가 함께 읽히는지 확인합니다.
이 글은 홈페이지 표시 구조에 관한 일반적인 점검 방법이며 진료 내용이나 의학적 판단과는 관계가 없습니다. 청주·충북 지역 병원을 포함해 특정 병원 홈페이지를 진단한 결과도 아닙니다.
