홈페이지를 열 때, 모두가 화면을 눈으로 보는 것은 아니다. 어떤 손님은 화면을 소리로 읽어주는 프로그램(스크린 리더)에 의지하고, 어떤 손님은 색을 잘 구분하지 못하며, 나이 든 손님은 작은 글씨 앞에서 눈을 찡그린다. 그런데 많은 작은 회사 홈페이지는 이런 손님을 아예 계산에 넣지 않는다. 화면을 읽어주는 프로그램이 우리 사이트의 ‘문의하기’ 버튼을 만나도 ‘버튼’이라고만 읽고 무슨 버튼인지 말해주지 못한다면, 그 손님은 결국 조용히 창을 닫는다.
웹 접근성은 장애가 있는 사람만을 위한 배려가 아니다. 밝은 햇빛 아래에서 화면을 보는 사람, 한 손에 짐을 든 사람, 나이가 들어 눈과 손이 예전 같지 않은 사람 — 결국 우리 모두가 언젠가 겪는 상황을 위한 설계다. 게다가 접근성이 좋은 사이트는 검색엔진도 더 잘 읽어 들인다. 작은 회사가 지금 당장 챙길 수 있는 다섯 가지를 정리했다.
1. 이미지에는 ‘글로 된 설명’을 함께 넣는다
사진을 볼 수 없는 손님에게 이미지는 존재하지 않는 것과 같다. 화면을 읽어주는 프로그램은 이미지에 붙은 대체 텍스트(alt 텍스트)를 소리로 읽어 그림을 설명한다. 대체 텍스트가 비어 있으면 손님은 ‘이미지’라는 무의미한 단어만 듣거나, 그마저도 건너뛴다.
제품 사진이라면 ‘흰 배경 위 원목 도마’처럼 무엇이 담겼는지 짧게 적는다. 단, 로고 옆 장식용 무늬처럼 정보가 없는 이미지는 대체 텍스트를 비워 두어 프로그램이 건너뛰게 한다. 모든 그림에 무조건 설명을 다는 것이 아니라, 정보를 담은 그림에만 담는 것이 요령이다.
2. 색만으로 정보를 전하지 않는다
‘재고 있음은 초록, 품절은 빨강’처럼 색 하나로 뜻을 나누면, 색을 구분하기 어려운 손님(전체 남성의 약 8%)은 그 차이를 읽지 못한다. 색은 거들 뿐, 글자나 아이콘이 함께 뜻을 말해야 한다. ‘품절’이라는 글씨, 체크 표시 같은 것을 색과 나란히 두는 식이다.
글자와 배경의 명도 대비도 중요하다. 연한 회색 글씨를 흰 배경에 얹으면 젊은 눈에도 흐릿하다. 본문 글자는 배경과 명도 대비를 4.5 대 1 이상 확보하는 것이 국제 기준(WCAG)의 권고다. 옅은 색 조합이 세련돼 보여도, 읽히지 않으면 아무 소용이 없다.
3. 마우스 없이 키보드만으로도 다 되게 한다
손이 불편하거나 마우스를 쓰기 어려운 손님은 키보드의 Tab 키로 화면 위를 옮겨 다니며 링크와 버튼을 누른다. 이때 지금 어디에 커서가 가 있는지 ‘테두리(포커스 표시)’로 보여야 한다. 이 테두리를 보기 싫다고 디자인 단계에서 지워 버리면, 키보드 손님은 자기가 화면 어디에 있는지 알 수 없어 길을 잃는다.
메뉴, 문의 폼, 팝업 — 마우스로 되는 모든 동작이 키보드로도 되는지 직접 Tab 키만 눌러 끝까지 이동해 보면 문제가 금방 드러난다. 특히 팝업이 떴을 때 뒤 화면으로 커서가 새어 나가지 않는지 확인해야 한다.
4. 버튼과 링크에 ‘진짜 이름’을 붙인다
‘여기 클릭’, ‘더 보기’ 같은 문구는 눈으로 보면 앞뒤 맥락으로 이해되지만, 화면을 읽어주는 프로그램은 링크만 따로 모아 읽어 주기도 한다. 그러면 ‘여기 클릭, 여기 클릭, 여기 클릭’만 이어져 무엇이 무엇인지 알 수 없다. ‘요금 안내 보기’, ‘상담 예약하기’처럼 그 자체로 목적지가 드러나는 이름을 붙여야 한다.
돋보기 모양만 있는 검색 버튼, 햄버거 줄 세 개로 된 메뉴 버튼처럼 글자 없이 아이콘만 있는 버튼에는 눈에 보이지 않는 이름표(aria-label)를 달아 준다. 그래야 프로그램이 ‘검색 버튼’, ‘메뉴 열기’라고 정확히 읽어 준다.
5. 글자를 키워도 화면이 무너지지 않게 한다
눈이 침침한 손님은 브라우저에서 글자를 200%까지 키워 읽는다. 이때 글자 크기를 화면에 못박듯 고정값으로 심어 두면, 손님이 글자를 키워도 꿈쩍하지 않거나 반대로 레이아웃이 서로 겹쳐 글이 잘려 나간다. 크기를 화면에 따라 늘어나는 상대 단위로 짜 두면, 손님이 키운 만큼 자연스럽게 커지고 줄도 다시 정리된다.
버튼과 누르는 영역도 손끝으로 편하게 짚을 만큼 넉넉해야 한다. 촘촘히 붙은 작은 링크들은 젊은 손님도 헛누르기 일쑤다. 최소 44픽셀 안팎의 여유를 두면 손이 떨리는 손님도, 화면이 작은 휴대폰 손님도 훨씬 편해진다.
접근성은 ‘더 많은 손님’을 위한 기본기다
웹 접근성은 거창한 재공사가 아니다. 대체 텍스트를 채우고, 색에 글자를 곁들이고, 키보드로 한 번 돌아보고, 버튼에 제 이름을 붙이고, 글자를 키워 보는 것 — 대부분은 처음 만들 때 챙기면 큰 비용이 들지 않는다. 반대로 다 만든 뒤 뜯어고치려면 손이 훨씬 많이 간다. 그래서 접근성은 설계 첫날부터 계산에 넣는 편이 늘 이득이다.
CYAN 에이전시는 작은 회사 홈페이지를 만들 때, 눈에 보이는 화면만큼이나 ‘보이지 않는 손님’까지 홈페이지에 담기도록 접근성을 처음부터 함께 설계한다. 지금 우리 홈페이지가 모든 손님에게 열려 있는지 점검이 필요하다면, 편하게 문의를 남겨 주시길 바란다.
