웹 접근성이라고 하면 흔히 시각장애인을 위한 특별한 기능을 떠올린다. 하지만 실제로는 마우스가 고장 난 손님, 작은 글씨가 잘 안 보이는 50대 사장님, 밝은 햇빛 아래에서 화면을 보는 사람까지 모두를 위한 기본기다. 접근성이 떨어지는 사이트는 결국 닿을 수 있었던 고객을 조용히 놓친다. 게다가 검색 엔진은 잘 구조화되고 대체 텍스트가 충실한 사이트를 더 잘 읽는다. 비용을 거의 들이지 않고 당장 챙길 수 있는 다섯 가지를 정리했다.
1. 모든 의미 있는 이미지에 대체 텍스트(alt)를 단다
대체 텍스트는 이미지를 볼 수 없는 사람에게 그 이미지가 무엇인지 알려주는 짧은 설명이다. 스크린 리더가 이 문구를 읽어주고, 이미지가 깨졌을 때 대신 표시되며, 검색 엔진이 이미지를 이해하는 단서가 된다. 제품 사진, 로고, 정보가 담긴 그림에는 반드시 alt를 단다. 단, 순수하게 장식용인 이미지는 빈 alt(alt="")로 두어 스크린 리더가 건너뛰게 한다.
2. 색만으로 정보를 전달하지 않는다
"빨간 항목은 품절입니다", "초록색 버튼을 누르세요" 같은 안내는 색을 구분하지 못하는 고객에게는 아무 의미가 없다. 한국 남성 약 20명 중 1명은 색각 이상이 있다. 색은 보조 수단으로만 쓰고, 텍스트나 아이콘, 밑줄 같은 두 번째 신호를 함께 제공해야 한다. 링크라면 색뿐 아니라 밑줄로도 표시하는 식이다.
3. 키보드만으로 끝까지 조작되는지 확인한다
마우스 없이 Tab 키만으로 사이트를 처음부터 끝까지 다뤄본다. 메뉴를 열고, 폼을 채우고, 결제 버튼까지 누를 수 있어야 한다. 손에 장애가 있는 사람뿐 아니라 노트북 터치패드가 말썽인 고객도 키보드에 의존한다. 점검할 때 특히 이 두 가지를 본다.
- 포커스 표시: 지금 어느 요소에 커서가 가 있는지 외곽선으로 보여야 한다. CSS에서 outline을 함부로 0으로 지우지 않는다.
- 순서: Tab을 누르는 흐름이 화면에서 위에서 아래로 자연스럽게 이어져야 한다.
4. 본문과 배경의 명도 대비를 충분히 확보한다
요즘 유행하는 연한 회색 글씨는 디자인은 세련돼 보여도 실제로는 잘 안 읽힌다. 국제 기준(WCAG)은 본문 텍스트의 명도 대비를 최소 4.5대 1 이상 권장한다. 무료 대비 검사 도구에 글자색과 배경색을 넣으면 통과 여부가 바로 나온다. 밝은 회색 본문 하나만 진하게 바꿔도 체류 시간이 달라진다.
5. 폼의 입력 칸에는 반드시 라벨을 붙인다
문의 폼이나 주문 폼에서 입력 칸 안에만 "이름", "연락처"를 흐리게 표시(placeholder)하고 끝내는 경우가 많다. 글씨를 입력하기 시작하면 그 안내가 사라져 무엇을 적는 칸인지 헷갈리고, 스크린 리더는 이를 제대로 읽지 못한다. 각 입력 칸 위에 보이는 라벨(label)을 두고, 코드 상으로도 입력 칸과 연결해야 한다. 이것만 지켜도 폼 이탈률이 눈에 띄게 줄어든다.
접근성은 거창한 프로젝트가 아니다
다섯 가지 모두 이미 있는 사이트에 며칠이면 적용할 수 있는 것들이다. 새 디자인이 필요한 일도, 큰 비용이 드는 일도 아니다. 다만 처음 만들 때부터 챙기면 훨씬 수월하다. CYAN은 작은 회사의 웹사이트를 만들 때 대체 텍스트, 키보드 조작, 명도 대비, 폼 라벨을 기본 점검 항목으로 두고 작업한다. 우리 사이트가 누군가에게 닿지 못하고 있는 건 아닌지 한 번쯤 점검해 볼 때다.