웹 접근성은 장애가 있는 사람만을 위한 배려가 아닙니다. 노안이 온 60대 사장님 고객, 한 손으로 휴대폰을 쥔 채 길을 걷는 손님, 마우스가 고장 나 키보드만 쓰는 사람까지, 우리 사이트를 평소와 다른 환경에서 마주하는 모든 이를 위한 기본기입니다. 화려한 디자인보다 먼저 챙겨야 할, 그러나 자주 빠뜨리는 다섯 가지를 정리했습니다.
1. 이미지에는 '대체 텍스트'를 빠짐없이 단다
시각장애 고객은 화면 낭독기(스크린 리더)가 읽어 주는 소리로 사이트를 듣습니다. 이때 alt 속성이 비어 있는 이미지는 '이미지'라는 무의미한 단어로만 읽히거나 아예 건너뛰어집니다. 제품 사진에는 '흰색 도자기 머그컵, 손잡이에 푸른 무늬'처럼 내용을 담고, 단순 장식용 이미지는 alt를 빈 값으로 두어 낭독기가 건너뛰게 합니다. 검색 엔진도 alt 텍스트를 읽기 때문에, 접근성과 SEO를 한 번에 챙기는 작업입니다.
2. 마우스 없이 키보드만으로 끝까지 닿게 한다
손이 불편한 고객이나 노트북 트랙패드가 익숙지 않은 손님은 Tab 키로 메뉴와 버튼을 이동합니다. 마우스로만 눌리는 드롭다운, 키보드로는 닫을 수 없는 팝업은 그 자리에서 고객을 가둡니다. Tab 키만으로 첫 화면부터 문의·결제 버튼까지 막힘없이 도달하는지, 지금 눌러야 할 곳에 포커스 표시(테두리)가 보이는지 직접 눌러 확인해야 합니다.
3. 색 하나에 정보를 기대지 않는다
'재고 있음은 초록, 품절은 빨강'처럼 색만으로 구분한 정보는 색약 고객에게는 똑같은 회색으로 보입니다. 색과 함께 아이콘이나 글자를 같이 써서 색이 보이지 않아도 뜻이 전달되게 해야 합니다. 글자와 배경의 명도 대비도 중요합니다. 연한 회색 글씨는 멋져 보여도 밝은 햇빛 아래나 노안 고객에게는 읽히지 않으니, 본문은 대비비 4.5:1 이상을 기준으로 잡습니다.
4. 입력칸마다 라벨을 제대로 연결한다
문의 폼에서 회색 안내 문구(placeholder)는 글자를 입력하는 순간 사라집니다. 무엇을 적는 칸이었는지 알 수 없게 되는 것이죠. 각 입력칸에는 label 태그를 붙여 화면 낭독기가 '이름, 필수 입력'처럼 또렷이 안내하도록 해야 합니다. 오류가 났을 때도 '입력을 확인하세요'가 아니라 '전화번호는 숫자만 입력하세요'처럼 어느 칸이 왜 문제인지 글로 알려 주는 것이 핵심입니다.
5. 제목 구조로 화면 낭독기에 길을 내준다
낭독기 사용자는 페이지의 제목(heading) 목록을 훑어 원하는 부분으로 바로 건너뜁니다. 글자 크기를 키우려고 제목 태그를 아무 데나 쓰면 이 목차가 엉켜 길을 잃습니다. 페이지마다 큰 제목은 하나, 그 아래로 h2·h3가 논리적인 계단을 이루도록 짜야 합니다. 보기에 좋으라고 정한 글씨 크기와, 기계가 읽는 문서 구조는 별개라는 점을 기억하면 됩니다.
접근성은 결국 모두를 위한 기본기다
위 다섯 가지는 새 기능을 사들이는 일이 아니라, 이미 있는 화면을 조금 더 꼼꼼히 다듬는 작업입니다. 그리고 그 혜택은 장애 고객을 넘어 노안 고객, 모바일 고객, 검색 엔진까지 모두에게 돌아갑니다. CYAN은 사이트를 만들 때부터 이 기준을 설계에 녹여, 더 많은 손님이 문 앞에서 돌아서지 않는 웹사이트를 함께 고민합니다.