웹 접근성

예약 달력의 가능 여부를 색 없이도 알 수 있게 하려면 무엇을 바꿔야 할까

색 구분에만 기대는 예약 달력의 문제를 짚고, 글자 표기와 키보드·화면 읽기 점검으로 상태를 전달하는 기준을 정리했습니다.

애드온 편집팀

색은 보조 신호라는 전제에서 출발합니다

일정표에서 녹색은 선택할 수 있는 날, 회색은 닫힌 날이라고 약속해 두는 화면은 흔합니다. 눈으로 보면 한눈에 구별되지만, 색을 구별하기 어려운 사람이나 화면 읽기 기능을 쓰는 사람에게는 같은 날짜가 모두 똑같은 숫자로만 전달됩니다. 색은 이해를 돕는 보조 수단일 뿐 정보를 전달하는 단 하나의 통로가 되어서는 안 됩니다. 날짜마다 상태를 나타내는 짧은 글자 표기가 함께 있어야 어떤 환경에서도 같은 뜻이 전달됩니다.

이는 특정 이용자만을 위한 배려가 아닙니다. 햇빛이 강한 야외에서 휴대전화 화면을 볼 때나 어두운 화면 모드로 바꿔 둔 경우처럼, 누구나 색이 흐려 보이는 순간을 만납니다. 그때에도 잘못된 날짜를 고르지 않게 하는 것이 달력 화면의 기본 역할입니다.

상태를 서로 다른 이름으로 정의합니다

먼저 달력에 나타날 수 있는 상태를 목록으로 적어 봅니다. 예약할 수 있는 날, 접수가 끝난 날, 쉬는 날, 선택할 수 없는 날은 겉보기에는 모두 눌리지 않는 칸이지만 이유가 서로 다릅니다. 이미 지나간 날짜와 해당 진료나 서비스가 열리지 않는 날짜 또한 구분해야 합니다. 이유가 다른데 같은 회색으로 처리하면 이용자는 시스템 오류인지 정상적인 마감인지 알 수 없습니다.

상태마다 이름을 정했다면 그 이름을 칸 안의 글자나 보조 설명으로 노출합니다. 눌러도 반응하지 않는 칸에는 짧은 이유 문구를 달고, 가능하다면 가까운 다른 날짜나 문의 경로로 이어 주는 안내를 곁들입니다. 막다른 길이 아니라 다음 행동이 보이는 화면이 되어야 합니다.

선택된 날짜와 시간대도 글로 전달합니다

선택한 날짜에 테두리를 두르거나 아이콘을 붙이는 방식은 눈에 띄지만, 화면 읽기 기능에는 그 변화가 전달되지 않을 수 있습니다. 선택된 칸에는 '선택됨'이라는 상태 정보가 코드 수준에서 함께 전달되어야 합니다. 날짜를 이동할 때 연도, 월, 요일, 가능 여부가 항상 같은 순서로 읽히는지도 확인 대상입니다. 어떤 칸은 날짜만 읽고 어떤 칸은 상태까지 읽는다면 혼란이 커집니다.

같은 날에 시간대별로 가능한 시간과 마감된 시간이 섞여 있다면, 날짜 칸 전체를 하나의 색으로 칠하지 않는 편이 안전합니다. 날짜를 고른 뒤 시간 목록에서 각 시간의 상태를 글자로 보여 주고, 날짜 칸에는 '일부 가능'처럼 중간 상태를 표현할 수 있습니다.

키보드와 화면 읽기로 직접 시험합니다

점검은 마우스를 내려놓는 데서 시작합니다. 키보드만으로 달력의 날짜를 옮기고, 시간을 선택하고, 확인 단계까지 갈 수 있는지 따라가 봅니다. 포커스가 어디에 있는지 보이지 않거나, 닫힌 날짜에서 포커스가 맴도는 구조라면 고쳐야 할 지점입니다. 화면 읽기 기능을 켜고 같은 과정을 반복하면 시각적으로는 알아채기 어려운 빈틈이 드러납니다.

검수 과제를 하나로 정해 두면 편합니다. 색을 보지 않고 가능한 시간 하나를 예약해 보는 것입니다. 이 과정에서 닫힌 날짜를 반복해서 누르게 되거나 시간대 상태를 찾지 못한다면 안내 구조에 문제가 있다는 신호입니다. 휴대전화에서 밝기와 화면 모드를 바꿔 가며 색의 대비가 충분한지도 함께 확인합니다.

이미지 달력과 실제 데이터의 불일치를 막습니다

일정표를 이미지 한 장으로 올려 두는 경우에는 상태가 바뀔 때마다 이미지를 새로 만들어야 합니다. 그 사이에 접수 담당자의 달력과 홈페이지 속 달력이 서로 다른 내용을 보여 주기 쉽습니다. 접근성을 아무리 다듬어도 예약 정보 자체가 어긋나 있으면 이용자는 여전히 잘못된 날짜에 도달합니다.

가능한 한 실제 예약 데이터와 연결된 텍스트 표기를 쓰고, 마지막으로 갱신한 시각을 화면에 적어 둡니다. 이미지를 불가피하게 쓴다면 같은 내용을 글로 옮긴 대체 표를 함께 제공합니다. 휴진 같은 변경이 생겼을 때 어느 화면부터 고칠지 담당자를 정해 두는 것도 운영상 필요한 절차입니다.

개선 이후에도 반복해서 확인합니다

달력 화면은 한 번 고치고 끝나는 부분이 아닙니다. 디자인이 바뀌거나 예약 방식이 달라질 때마다 상태 표기가 빠지지 않았는지 다시 확인해야 합니다. 개선 전후에 문의 내용이 어떻게 달라졌는지, 같은 날짜를 두고 되묻는 질문이 줄었는지도 참고 자료가 됩니다.

접근성은 일부 이용자를 위한 장식이 아니라 모든 사람이 잘못된 일정을 고르지 않도록 돕는 기본 설계입니다. 실제 서비스의 구조와 이용 대상에 따라 필요한 표기와 점검 항목은 달라질 수 있으므로, 적용 전에 자사 화면에서 직접 시험해 보며 확정하시길 권합니다.

추가 정보

전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

LOCATION

애드온 오시는 길

서울특별시 강서구 공항대로 194, 1동 6층 610·611호 (마곡동, 문영 퀸즈파크12차)