웹 접근성이라고 하면 흔히 '장애인을 위한 의무 사항'으로만 여기지만, 현장에서 보면 가장 먼저 효과를 보는 쪽은 평범한 단골손님입니다. 노안이 온 사장님 또래의 고객, 한낮 햇빛 아래에서 화면을 들여다보는 행인, 신호가 약한 지하 매장의 방문자까지 모두 접근성의 수혜자입니다. 게다가 접근성을 챙기면 검색엔진도 페이지를 더 잘 이해해 노출에 도움이 됩니다. 작은 회사가 돈을 거의 들이지 않고 실천할 수 있는 다섯 가지를 정리했습니다.
1. 색의 대비: 흐린 회색 글씨가 손님을 밀어낸다
연한 회색 배경에 더 연한 회색 글씨는 디자인 시안에서는 세련돼 보여도, 막상 손님의 휴대폰에서는 읽히지 않습니다. 본문 글자와 배경의 명도 대비는 최소 4.5 대 1을 권장합니다. 색 대비를 확인해 주는 무료 도구에 글자색과 배경색을 넣어보면 통과 여부가 바로 나옵니다. 중요한 정보를 색깔 하나로만 구분하지 않는 것도 원칙입니다. 빨강·초록만으로 상태를 표시하면 색약인 고객은 구별하지 못하므로, 글자나 아이콘을 함께 붙여 주세요.
2. 글자 크기: 16px에서 시작하고 확대를 막지 않기
본문 글자는 16px 이상을 기본으로 잡는 것이 안전합니다. 더 중요한 것은 손님이 두 손가락으로 화면을 키웠을 때 글자가 따라 커져야 한다는 점입니다. 일부 사이트는 확대를 막아두는데, 이는 시력이 약한 고객을 그대로 내쫓는 설정입니다. 글자 단위를 고정된 px 대신 rem으로 쓰면 사용자의 기본 글자 크기 설정을 존중하게 됩니다.
3. 대체 텍스트: 보이지 않는 손님과 검색엔진이 함께 읽는다
이미지에는 그 내용을 설명하는 대체 텍스트(alt)를 달아야 합니다. 화면을 읽어 주는 보조 기기를 쓰는 고객은 alt가 없으면 '이미지'라는 무의미한 단어만 듣게 됩니다. 메뉴판 사진이라면 '봄나물 정식 한 상차림'처럼 구체적으로 적습니다. 이 설명은 사진이 깨졌을 때도 대신 보이고, 검색엔진이 이미지를 이해하는 단서가 되어 검색 노출에도 보탬이 됩니다. 단, 장식용 이미지에는 빈 alt를 두어 굳이 읽지 않게 합니다.
4. 키보드만으로 끝까지: 마우스 없이 Tab으로
손이 불편하거나 마우스를 쓰지 않는 고객은 키보드의 Tab 키만으로 메뉴와 버튼, 입력칸을 차례로 옮겨 다닙니다. 직접 한번 마우스를 치우고 Tab을 눌러 보세요. 지금 어디에 초점이 있는지 테두리로 또렷이 보이는지, 문의 폼까지 막힘없이 도달하는지 확인하면 됩니다. 보기 싫다고 초점 테두리를 없애 버리면 키보드 사용자는 길을 잃습니다.
5. 폼 라벨과 또렷한 안내: 입력칸이 무엇을 원하는지 말하게 하기
문의 폼의 입력칸에는 라벨(label)을 분명히 붙여야 합니다. 칸 안에만 흐리게 적힌 안내 문구는 글자를 입력하는 순간 사라져 무엇을 적던 칸이었는지 헷갈리게 만듭니다. 오류가 났을 때도 '입력값이 올바르지 않습니다' 같은 막연한 문장 대신, 어느 칸을 어떻게 고쳐야 하는지 구체적으로 알려 주는 것이 접근성의 핵심입니다.
완벽이 아니라 시작이 중요합니다
접근성은 한 번에 100점을 받아야 하는 시험이 아니라, 더 많은 손님에게 문을 열어 두는 태도입니다. 위 다섯 가지만 점검해도 상당수의 고객이 겪던 불편이 사라집니다. CYAN은 작은 회사의 웹사이트를 만들 때 색 대비와 글자 크기, 키보드 탐색, 폼 라벨을 기본 점검 항목으로 두고 작업합니다. 지금 쓰고 있는 사이트가 모두에게 열려 있는지 한번 점검해 보고 싶다면, 위 항목을 차례대로 짚어 보는 것에서 시작해 보시길 권합니다.