화면을 못 보는 손님은 화면 낭독기(스크린 리더)로 글자를 '귀로 듣고', 손이 불편한 손님은 마우스 대신 키보드만으로 화면을 넘깁니다. 나이 든 손님은 작은 글씨와 흐릿한 색을 잘 구분하지 못하고, 지하철에서 한 손으로 휴대폰을 든 손님은 잠깐의 불편에도 창을 닫습니다. 웹 접근성은 이 모든 손님이 막힘 없이 화면을 쓰게 만드는 일입니다. 거창한 배려처럼 들리지만, 실제로는 돈을 거의 들이지 않고도 챙길 수 있는 장사의 기본기에 가깝습니다. 작은 회사 웹사이트가 오늘 바로 점검할 수 있는 5가지 원칙을 정리했습니다.
1. 이미지에는 반드시 '대체 텍스트(alt)'를 단다
사진은 눈으로 보면 한눈에 들어오지만, 화면을 못 보는 손님의 낭독기는 이미지를 '읽을' 방법이 없습니다. 이때 의지하는 것이 바로 대체 텍스트, 즉 이미지에 붙이는 한 줄 설명입니다. 메뉴 사진이라면 "매콤한 양념이 올라간 떡볶이 1인분"처럼 무엇이 담겼는지 구체적으로 적습니다. 덤으로 이 한 줄은 검색엔진도 함께 읽기 때문에, 접근성을 챙기면 검색 노출까지 따라옵니다. 단, 순수한 장식용 이미지에는 빈 대체 텍스트(alt="")를 주어 낭독기가 불필요하게 읽지 않게 하는 것이 좋습니다.
2. 마우스 없이 키보드만으로 끝까지 닿게 한다
손이 불편하거나 마우스를 쓰기 어려운 손님은 키보드의 Tab 키만으로 버튼과 링크 사이를 옮겨 다닙니다. 직접 마우스를 치우고 Tab 키만 눌러 메뉴, 문의 버튼, 입력칸까지 순서대로 닿는지 확인해 보세요. 지금 어디에 머물러 있는지 보여주는 '초점 테두리(focus 표시)'가 보이지 않는다면, 손님은 자기가 어디를 누르려는지조차 알 수 없습니다. 디자인이 깔끔하다는 이유로 이 테두리를 지우는 경우가 많은데, 접근성에서는 오히려 또렷이 남겨 두어야 합니다.
3. 색깔 하나만으로 정보를 말하지 않는다
"빨간 글씨는 품절입니다"처럼 색으로만 구분하면, 색을 구별하기 어려운 손님(전체 남성의 약 8%가 색각 이상)은 그 차이를 전혀 읽지 못합니다. 품절이라면 색과 함께 '품절'이라는 글자나 표시를 같이 붙여야 합니다. 또한 흐린 회색 글씨를 흰 배경에 얹는 흔한 디자인은 저시력 손님과 햇빛 아래 손님 모두에게 잘 안 보입니다. 글자와 배경의 명도 대비를 충분히 확보하는 것만으로도 읽기 편한 화면이 됩니다.
4. 보기 좋은 모양보다 '의미를 담은 마크업'을 쓴다
겉보기엔 똑같은 제목이라도, 글자를 굵게만 키운 것과 제목 태그(h2)로 표시한 것은 낭독기에게 전혀 다릅니다. 낭독기 사용자는 제목만 훑어 글의 구조를 빠르게 파악하는데, 의미 없는 굵은 글씨는 그 지도를 지워 버립니다. 버튼은 진짜 button 태그로, 링크는 a 태그로 만들어야 키보드와 낭독기가 제 역할을 알아챕니다. 보이는 모양을 흉내 낸 가짜 버튼은 마우스 손님에게만 통하고 나머지 손님은 막아 세웁니다.
5. 입력 양식에는 라벨을 붙이고, 안내는 또렷하게 한다
문의 폼의 입력칸 안에 흐릿한 안내 문구(placeholder)만 띄워 두면, 손님이 글자를 입력하는 순간 그 안내가 사라져 '여기가 무엇을 적는 칸이었지?' 하고 헤매게 됩니다. 각 입력칸에는 사라지지 않는 라벨(label)을 칸 바깥에 붙이고, 그 라벨을 실제 입력칸과 연결해야 낭독기가 "이름 입력칸"이라고 또박또박 읽어 줍니다. 또 입력에 오류가 났을 때는 빨간 테두리만 깜빡이지 말고 "전화번호는 숫자만 입력해 주세요"처럼 무엇을 어떻게 고쳐야 하는지 글로 알려 주어야 합니다.
작은 배려가 모든 손님을 붙잡는다
웹 접근성은 특정한 누군가만을 위한 일이 아닙니다. 대체 텍스트는 검색엔진을, 또렷한 대비는 햇빛 아래 손님을, 키보드 조작은 마우스가 고장 난 손님을 함께 붙잡습니다. 게다가 우리나라는 장애인차별금지법에 따라 일정 규모 이상의 사업자에게 웹 접근성 준수 의무를 두고 있어, 미리 챙겨 두면 법적 위험까지 줄어듭니다. 거의 비용을 들이지 않고도 더 많은 손님을 놓치지 않는 방법인 셈입니다.
CYAN 에이전시는 웹사이트를 만들 때 보기 좋은 화면뿐 아니라, 누가 들어와도 막힘 없이 쓸 수 있는 접근성을 처음부터 함께 설계합니다. 지금 운영 중인 사이트가 '눈에 보이는 손님'만 받고 있는 건 아닌지 한 번쯤 점검이 필요하다면, 편하게 문의 주세요.