웹 접근성(WCAG) 기본 —
왜, 무엇을 챙기나
웹 접근성은 시각·청각·운동·인지 조건이 다른 사용자도 동등하게 사이트를 쓸 수 있게 만드는 설계입니다. 핵심은 이미지 대체텍스트, 명도 대비 4.5:1, 키보드만으로 탐색, 터치 타깃 충분한 크기, 시맨틱 마크업, 동영상 자막입니다. 국제 표준 WCAG가 기준이며, 접근성을 챙기면 SEO·모바일·전환까지 함께 좋아집니다. 챙길 항목은 정해져 있고, 제작 단계에 넣으면 비용이 거의 들지 않습니다.
- 접근성 = 다양한 조건(시각·청각·운동·인지)의 사용자도 동등하게 쓰게 만드는 것. 표준은 WCAG.
- 핵심 6: 대체텍스트 · 명도 대비 4.5:1 · 키보드 탐색 · 터치 타깃 · 시맨틱 마크업 · 자막.
- 한국은 장애인차별금지법 아래 공공·일정 규모 사업자에 의무가 적용 — 단, 범위는 사안별.
- 접근성은 SEO·전환에도 이득. 사후 점검보다 제작 단계 내장이 싸고 확실합니다.
웹 접근성이란 정확히 무엇인가?
웹 접근성은 ‘누구나 같은 정보에 같은 방법으로 닿게 한다’는 설계 원칙입니다. 마우스를 못 쓰는 사람은 키보드로, 화면을 못 보는 사람은 스크린리더의 음성으로, 소리를 못 듣는 사람은 자막으로 같은 콘텐츠를 받습니다. 이를 위한 국제 표준이 WCAG(Web Content Accessibility Guidelines)이고, 한국 표준 KWCAG도 이를 바탕으로 합니다. WCAG는 네 가지 원칙 위에 서 있습니다. 콘텐츠를 인식할 수 있어야 하고, UI를 운용할 수 있어야 하며, 내용을 이해할 수 있어야 하고, 다양한 기기·보조기술에서 견고하게 동작해야 합니다. 준수 수준은 A·AA·AAA로 나뉘며, 실무에서 목표로 삼는 기준은 보통 AA입니다.
접근성은 누구를 위한 것인가?
장애인만을 위한 기능이라고 오해하기 쉽지만, 실제 대상은 훨씬 넓습니다. 시각(저시력·색약·전맹), 청각, 운동(손 떨림·한 손 사용·키보드 의존), 인지(난독·집중 곤란) 조건의 사용자가 1차 대상입니다. 여기에 고령 사용자, 작은 화면, 느린 회선, 밝은 햇빛 아래에서 화면을 보는 일반 사용자까지 모두 혜택을 받습니다. 분양 사이트처럼 40~60대 수요층이 모바일로 들어오는 서비스라면, 접근성은 특정 소수가 아니라 주요 방문자 다수를 위한 기본기에 가깝습니다.
최소한 무엇을 챙겨야 하나? (핵심 6)
모든 기준을 한 번에 맞출 필요는 없습니다. 실무에서 가장 자주 영향을 주는 항목부터 챙기면 대부분의 사용자 경험이 즉시 좋아집니다. 아래는 PLOT이 제작 단계에서 기본으로 점검하는 핵심 항목과 충족 기준입니다.
| 체크 항목 | 충족 기준 (요지) |
|---|---|
| 이미지 대체텍스트 | 의미 있는 이미지에는 내용을 설명하는 alt, 장식 이미지는 빈 alt(alt="")로 처리. |
| 명도 대비 | 본문 텍스트 4.5:1 이상, 큰 글자 3:1 이상, UI 경계·아이콘 3:1 이상. |
| 키보드 탐색 | 마우스 없이 Tab만으로 모든 링크·버튼·폼에 도달하고 조작 가능, 초점 표시 보임. |
| 터치 타깃 크기 | 버튼·링크는 손가락으로 누르기 충분한 크기(권장 44×44px대)와 간격 확보. |
| 시맨틱 마크업 | 제목은 h1·h2 위계대로, 버튼은 button, 폼 입력은 label과 연결. |
| 동영상 자막 | 음성이 정보를 전달하는 영상에는 자막 제공, 자동재생 음소거 기본. |
▲ 이 여섯 가지만 제대로 지켜도 WCAG AA의 상당 부분이 자연스럽게 충족됩니다. 색만으로 정보를 구분하지 않기(예: 빨강 글씨만으로 ‘필수’ 표시 금지)도 같은 맥락입니다.
한국에서는 법적으로 어디까지 의무인가?
장애인차별금지법은 재화·용역 제공에서 장애를 이유로 한 차별을 금지하고, 웹·앱 같은 정보 접근도 정당한 편의 제공의 대상으로 봅니다. 공공기관 웹사이트와 일정 규모의 사업자에게는 접근성 준수 의무가 단계적으로 적용되어 왔습니다. 다만 어떤 업종·규모에 어느 시점부터 적용되는지는 사안에 따라 달라집니다. 따라서 본 글은 ‘대체로 이렇게 다뤄진다’는 방향을 안내할 뿐이며, 특정 현장·사업자의 실제 의무 범위는 전문 검토를 권합니다. 의무 여부와 무관하게, 접근성은 사용자를 잃지 않기 위한 품질 기준으로 챙기는 편이 안전합니다.
접근성이 SEO·전환에도 이득인 이유는?
접근성 항목과 검색·전환 항목은 상당 부분 겹칩니다. 이미지 대체텍스트, h1·h2의 의미 있는 제목 구조, 시맨틱 태그, 명확한 링크 텍스트, 동영상 자막은 보조기술에도, 검색엔진에도 같은 ‘이해의 단서’가 됩니다. 즉 접근성을 챙기면 별도 작업 없이 SEO 기본기가 함께 올라갑니다. 전환도 마찬가지입니다. 키보드·돋보기·고대비 환경에서도 관심고객 폼이 제출되고 전화 버튼이 눌리면, 그만큼 이탈이 줄고 문의가 늘어납니다. 접근성·SEO·전환은 서로 다른 작업이 아니라, 같은 좋은 마크업이 만드는 세 가지 결과입니다. 검색 노출의 전체 그림은 분양 사이트 SEO·AEO 체크리스트에서 이어집니다.
※ 위 수치·기준은 WCAG AA의 일반적 권고를 요약한 것입니다. 적용 수준은 현장 목적·법적 요건에 따라 달라질 수 있습니다.
접근성에서 가장 흔한 실수는 무엇인가?
- 대체텍스트 누락·도배 — 의미 있는 이미지에 alt가 없거나, 반대로 장식 이미지까지 장황하게 설명.
- 대비가 약한 회색 글씨 — 회색 위 연회색 안내문, 배경 이미지 위 흰 글자는 가장 흔한 위반.
- 초점 표시 제거 — 디자인을 이유로 키보드 초점 테두리(outline)를 없애 키보드 사용자가 길을 잃음.
- div를 버튼처럼 — button·label 대신 div·span에 클릭만 붙여 스크린리더가 역할을 못 읽음.
- 색에만 의존 — ‘필수’를 빨강 글씨로만 표시하거나, 오류를 빨간 테두리로만 알림(텍스트 병기 누락).
접근성을 모바일·속도와 한 흐름으로 보려면 → 분양 사이트 모바일 최적화 체크리스트. 폼 자체의 전환 설계는 전환 폼 설계 7원칙으로 이어집니다.
자주 묻는 질문
웹 접근성이란 무엇인가요?
명도 대비는 얼마면 되나요?
한국에서 웹 접근성은 법적 의무인가요?
접근성과 검색 노출(SEO)은 관계가 있나요?
분양 사이트도 접근성을 챙겨야 하나요?
우리 현장, 접근성까지 챙겨 만들까요?
현장 정보만 주시면 접근성·모바일·전환을 함께 반영한 현장 맞춤 견적을 무료로 보내드립니다. 사후 점검이 아니라 제작 단계에 내장해, 추가 비용 없이 품질을 올립니다.
무료 견적 받기※ 본 글의 명도 대비 4.5:1, 키보드 탐색, 터치 타깃 등 수치·기준은 WCAG AA의 일반적 권고를 요약한 것이며, 적용 수준은 현장 목적·법적 요건에 따라 달라질 수 있습니다. 한국의 장애인차별금지법 등 법적 의무의 적용 범위·시점은 업종·규모에 따라 달라 사안별 판단이 필요하므로, 실제 의무 여부는 전문 검토를 권합니다. 이미지·포트폴리오는 PLOT이 역량 시연을 위해 자체 제작한 데모·리디자인 컨셉이며, 실제 의뢰·감수·승인을 받은 것이 아닙니다. 검증되지 않은 외부 통계·후기는 사용하지 않았습니다. 최종 업데이트 .