홈페이지를 찾는 손님이 모두 같은 방식으로 화면을 보는 것은 아닙니다. 어떤 손님은 화면을 보지 못해 스크린리더가 읽어 주는 소리로 웹을 듣고, 어떤 손님은 손이 불편해 마우스 대신 키보드로만 화면을 넘깁니다. 나이 든 손님은 작은 글씨와 흐린 색을 못 읽고, 멀쩡한 손님도 한낮 햇빛 아래에서는 대비가 약한 버튼을 놓칩니다. 웹 접근성은 특별한 손님을 위한 배려가 아니라, 더 많은 손님을 놓치지 않는 기본기입니다. 작은 회사가 큰 비용 없이 당장 챙길 수 있는 다섯 가지를 정리했습니다.
1. 이미지에는 대체 텍스트(alt)를 단다
사진과 로고에 alt 설명이 없으면 스크린리더는 그 자리를 그냥 건너뛰거나 파일 이름을 읽습니다. 손님 귀에는 ‘IMG_2931 점 제이피지’ 같은 소음만 들립니다.
- 내용을 담은 이미지: ‘놋그릇을 두드리는 장인의 손’처럼 무엇이 보이는지 짧게 적습니다.
- 장식용 이미지: 의미 없는 배경은 alt를 빈 값(alt="")으로 두어 소리로 읽지 않게 합니다.
2. 색만으로 정보를 전하지 않는다
‘빨간 글씨가 품절’이라는 안내는 색맹 손님에게 그냥 검은 글씨로 보입니다. 색은 거들 뿐, 글자·아이콘·밑줄로 한 번 더 알려 주어야 합니다. 글자와 배경의 명도 대비는 최소 4.5대 1을 지키면 햇빛 아래에서도, 노안이 온 눈에도 또렷합니다.
3. 키보드만으로 끝까지 쓸 수 있게 한다
마우스를 못 쓰는 손님은 Tab 키로 링크와 버튼을 하나씩 옮겨 다닙니다. 이때 지금 어디에 초점이 있는지 보이는 테두리(포커스 링)를 지우지 말아야 합니다. 메뉴를 눌러 열었다면 키보드로도 닫히는지, 문의 폼을 키보드만으로 끝까지 제출할 수 있는지 직접 눌러 보며 확인합니다.
4. 입력 폼에는 명확한 레이블을 붙인다
칸 안에 흐린 안내문(placeholder)만 두면 글자를 입력하는 순간 사라져, 스크린리더는 이 칸이 이름 칸인지 전화번호 칸인지 읽어 주지 못합니다. 각 입력 칸에는 label 태그로 이름을 명시하고, 오류가 났을 때는 ‘어느 칸이, 왜 잘못됐는지’를 글로 알려 줍니다.
5. 제목 구조와 의미 있는 태그로 짠다
스크린리더 손님은 h1부터 h2, h3로 이어지는 제목을 목차 삼아 페이지를 훑습니다. 글씨를 크게 하려고 아무 데나 제목 태그를 쓰지 말고, 문서의 실제 흐름대로 순서를 지킵니다. 버튼은 div가 아니라 button 태그로, 링크는 a 태그로 짜야 키보드와 스크린리더가 제 역할을 알아봅니다.
접근성은 결국 모두를 위한 기본기입니다
다섯 가지 모두 화려한 기술이 아니라 ‘한 번 더 챙기는 습관’에 가깝습니다. 그리고 접근성을 지킨 사이트는 검색엔진 로봇도 더 잘 읽어 내려 SEO에도 유리합니다. CYAN 에이전시는 사이트를 만들 때 이 다섯 가지를 처음부터 설계에 넣어, 특정 손님만이 아니라 누구나 막힘없이 쓰는 홈페이지를 목표로 합니다. 지금 우리 홈페이지가 키보드만으로 문의까지 닿는지, 오늘 한 번 눌러 보시길 권합니다.
