'우리 손님 중에 그런 분이 얼마나 되겠어요'
웹 접근성 이야기를 꺼내면 열에 아홉은 이렇게 답한다. 시각장애인이나 휠체어 사용자를 떠올리며, 우리 가게와는 먼 이야기라고 넘긴다. 하지만 접근성은 특별한 소수만을 위한 배려가 아니다. 돋보기를 찾는 예순의 눈, 한 손에 짐을 든 채 엄지로만 화면을 넘기는 손, 흔들리는 지하철에서 작은 글씨를 노려보는 눈—전부 접근성이 챙기는 손님이다. 게다가 접근성이 잘 지켜진 사이트는 검색엔진도 더 잘 읽는다. 배려가 곧 매출로 이어지는 셈이다.
원칙 1. 이미지에는 '눈 대신 읽어 줄' 대체 텍스트를 단다
화면을 소리로 읽는 손님에게 이미지는 대체 텍스트(alt)가 없으면 그냥 '이미지'라는 한마디로 지나간다. 메뉴 사진, 오시는 길 지도, 로고까지—무엇을 담은 그림인지 한 줄로 적어 두면 스크린리더가 그대로 읽어 준다. 단, 순수 장식용 이미지는 오히려 빈 alt로 두어 읽지 않게 하는 게 배려다. '이미지1234.jpg'가 읽히는 순간, 손님은 우리 가게를 성의 없는 곳으로 기억한다.
원칙 2. 마우스 없이 키보드만으로도 끝까지 갈 수 있어야 한다
손을 떨거나 마우스를 쓰기 어려운 손님은 Tab 키만으로 화면을 옮겨 다닌다. 메뉴, 링크, 문의 버튼, 입력칸을 Tab으로 순서대로 짚어 갈 수 있는지, 지금 어디에 커서가 있는지 테두리(포커스 표시)로 보이는지 확인해야 한다. 디자인이 깔끔해 보인다고 이 테두리를 지워 버리면, 키보드 손님은 자기가 어디 있는지 몰라 길을 잃는다.
원칙 3. 색은 대비를 충분히, 색만으로 정보를 주지 않는다
연한 회색 배경에 옅은 글씨는 젊은 눈에도 흐릿하다. 글자와 배경의 명도 대비를 충분히 주는 것이 기본이다(본문 기준 대비 4.5:1 이상이 권장선이다). 또 '빨간 글씨는 필수 항목'처럼 색 하나로만 정보를 전하면, 색을 구분하기 어려운 손님은 그 뜻을 놓친다. 별표(*)나 '필수'라는 글자를 함께 붙여 색이 아니어도 알 수 있게 한다.
원칙 4. 버튼과 입력칸에는 '이름표'를 붙인다
돋보기 아이콘 하나만 덩그러니 있는 검색 버튼은, 화면을 소리로 듣는 손님에게 '버튼'이라고만 읽힌다. 무엇을 하는 버튼인지 이름(라벨)을 코드에 심어 둬야 '검색'이라고 읽어 준다. 문의 폼의 입력칸도 마찬가지다. 회색 안내문(placeholder)은 글자를 넣기 시작하면 사라져 버리므로, 칸마다 고정된 라벨을 따로 붙여야 손님이 '여기가 이름 칸이었지' 하고 헷갈리지 않는다.
원칙 5. 글자가 커져도 화면이 깨지지 않게 만든다
눈이 불편한 손님은 브라우저에서 글자를 1.5배, 2배로 키워 본다. 이때 글자 크기를 화면 비율에 맞춰 유연하게 짜 두면 커진 글자에 맞춰 레이아웃이 자연스럽게 늘어난다. 반대로 픽셀 단위로 딱 못 박아 두면, 키운 글자가 버튼 밖으로 삐져나가거나 서로 겹쳐 화면이 무너진다. 손님이 스스로 편하게 키워 읽을 여지를 남겨 두는 것, 그게 마지막 원칙이다.
접근성은 '착한 일'이 아니라 '기본기'다
이 다섯 가지는 대단한 기술이 아니라, 만들 때 한 번 더 신경 쓰면 되는 습관에 가깝다. 문제는 이미 다 만든 사이트에 뒤늦게 끼워 넣으려면 손이 몇 배로 든다는 점이다. 기획·디자인 단계부터 접근성을 염두에 두는 것이 결국 가장 싸고 빠른 길이다. CYAN은 작은 회사 홈페이지를 만들 때 화면의 겉모습만이 아니라, 모든 손님이 실제로 '쓸 수 있는가'까지 함께 챙긴다. 우리 가게 홈페이지가 누군가에게는 문턱이 되고 있지 않은지, 오늘 한번 키보드만으로 눌러 보길 권한다.
