웹 접근성

예약 달력의 가능·마감 상태를 색 하나에만 맡기지 않으려면 무엇부터 정할까

예약 달력에서 가능, 마감, 휴진 같은 상태를 색에만 의존하지 않고 글자와 설명으로 전달하는 접근성 점검 순서를 정리했습니다.

애드온 편집팀

색은 거들 뿐 상태를 전하는 주체가 아닙니다

예약 달력을 만들 때 가장 손쉬운 방법은 가능한 날을 녹색, 마감된 날을 회색으로 칠하는 것입니다. 시안에서는 한눈에 구분되지만 실제 이용 환경은 다양합니다. 색을 구별하기 어려운 사람, 햇빛 아래에서 화면 밝기를 낮춘 사람, 화면을 읽어 주는 기능으로 내용을 듣는 사람에게는 같은 달력이 전혀 다른 정보로 전달됩니다.

그래서 색은 이해를 돕는 보조 수단으로만 두고, 상태 자체는 글자나 기호로 한 번 더 전해야 합니다. 날짜 숫자 곁에 짧은 상태 문구를 붙이거나, 날짜를 고르면 나타나는 안내 영역에 상태를 문장으로 적어 두는 방식이 대표적입니다. 이 원칙을 먼저 세워 두면 이후 디자인이 바뀌어도 정보 전달이 흔들리지 않습니다.

어떤 상태가 있는지 목록부터 만듭니다

달력 화면을 고치기 전에 존재하는 상태를 모두 적어 봅니다. 예약 가능, 접수 마감, 휴진, 선택 불가, 이미 지난 날짜는 이용자에게 각기 다른 뜻입니다. 마감은 다른 시간대를 살펴볼 여지가 있지만 휴진은 그날 전체가 열리지 않는다는 뜻인데, 한 가지 회색으로 묶으면 이용자는 같은 날짜를 반복해서 눌러 보게 됩니다.

상태의 이름은 화면 어디에서나 같은 단어로 쓰는 편이 좋습니다. 달력에는 마감이라 쓰고 안내 문구에는 접수 종료라고 쓰면 두 말이 같은 뜻인지 알기 어렵습니다. 운영, 디자인, 개발 담당이 함께 쓰는 용어표를 한 장 두면 문구를 새로 만들 때도 기준이 됩니다.

누를 수 없는 날에는 이유와 다음 길을 함께 보여 줍니다

누를 수 없는 날짜를 그냥 흐리게만 처리하면 이용자는 오류인지 정말 닫힌 날인지 판단하지 못합니다. 날짜에 다가가면 짧은 이유를 읽을 수 있게 하고, 가까운 가능한 시간이나 문의 경로로 이어지는 안내를 붙이면 중간에 떠나는 일이 줄어듭니다. 문구가 길 필요는 없고, 상태와 다음 행동이 한 줄에 담기면 충분합니다.

선택이 끝난 날짜에는 테두리나 아이콘만 바꾸지 말고 선택됨이라는 정보도 함께 전달되어야 합니다. 시각적 강조는 눈으로 보는 사람에게만 닿기 때문입니다. 하루 안에 가능한 시간과 마감된 시간이 섞여 있다면 날짜 전체를 한 상태로 칠하지 말고 시간 단위로 나누어 보여 주어야 오해가 생기지 않습니다.

키보드와 화면 읽기 기능으로 직접 이동해 봅니다

접근성은 설계서보다 실제 이동 경로에서 드러납니다. 마우스를 쓰지 않고 방향키와 탭 키만으로 달력을 돌아다니며 시간을 고를 수 있는지 시험합니다. 현재 위치가 보이지 않거나 닫힌 날짜에서 반응이 없으면 키보드 사용자는 길을 잃습니다.

화면 읽기 기능으로 달력을 들을 때는 읽히는 순서가 일정한지 봅니다. 연도, 월, 요일, 날짜, 상태가 날짜마다 같은 순서로 전달되어야 듣는 사람이 패턴을 익힙니다. 어떤 날은 상태가 먼저, 어떤 날은 나중에 읽히면 목록을 훑는 속도가 크게 떨어집니다.

이미지로 올린 일정표와 실제 데이터를 맞춥니다

일정표를 이미지 한 장으로 올리는 방식은 상태가 바뀔 때마다 이미지를 새로 만들어야 하고, 화면 읽기 기능으로는 내용을 전하기도 어렵습니다. 가능하면 실제 예약 데이터와 연결된 글자 표를 쓰고 마지막으로 갱신한 시각을 함께 적어 둡니다. 접수 담당의 내부 달력과 홈페이지 달력이 다른 상태를 보여 주면 접근성을 개선해도 예약 착오는 남습니다.

변경이 잦은 환경에서는 누가 언제 어떤 화면을 고치는지 담당과 기한을 정해 두는 것이 중요합니다. 휴진 공지는 반영했는데 달력만 그대로인 상황이 가장 흔한 불일치입니다.

색을 보지 않고 예약해 보는 점검 과제를 둡니다

개선한 뒤에는 색을 보지 않는 조건으로 가능한 시간 하나를 예약해 보는 과제를 수행해 봅니다. 화면을 흑백으로 바꾸거나 화면 읽기 기능만으로 진행해도 좋습니다. 마감된 날짜를 반복해서 누르거나 시간 상태를 찾지 못하는 지점이 생기면 그곳이 안내 구조를 고칠 자리입니다.

접근성 개선은 일부 이용자를 위한 장식이 아니라 모든 사람이 잘못된 일정을 고르지 않게 하는 장치입니다. 사용하는 예약 시스템의 기능과 담당자의 수정 권한에 따라 가능한 방식이 다르므로, 개발 담당과 운영 담당이 현재 화면을 함께 열어 놓고 항목별로 확인하는 절차를 권합니다.

추가 정보

전체 글 보기

CONSULTATION

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

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

LOCATION

애드온 오시는 길

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