Whitehat Marketing 무료 상담
Web Design & Development 2026. 02. 12. 수정 2026. 10. 04. 하얀모자마케팅

중소기업 웹 접근성 실무 가이드: 공식 지침으로 구매·문의 흐름을 점검하는 법

중소기업 웹 접근성 실무 가이드: 공식 지침으로 구매·문의 흐름을 점검하는 법

WHO·W3C·WebAIM·KWCAG 공식 자료를 근거로, 중소기업이 웹사이트의 구매·문의 흐름에서 접근성 장벽을 찾고 고치는 실무 점검 순서를 정리했습니다.

웹 접근성은 흔히 '규제 대응 비용'으로만 이야기됩니다. 하지만 실제 현장에서 접근성 문제는 대개 매출과 문의 흐름 한가운데에서 드러납니다. 라벨 없는 입력칸, 아이콘만 있는 장바구니 버튼, 키보드로는 닫히지 않는 팝업처럼 작은 장애물이 구매와 상담 신청을 멈추게 합니다. 이 글은 공개된 공식 자료와 표준 문서만을 근거로, 중소기업이 자사 웹사이트의 구매·문의 흐름을 점검하는 실무 순서를 정리합니다.

이 글의 수치는 모두 아래 '출처와 검증 기준'에 링크한 원문에서 확인한 값이며, 하얀모자마케팅이 자체 측정한 성과나 특정 기업의 매출 효과를 약속하는 내용이 아닙니다.

접근성은 왜 사업의 문제인가

세계보건기구(WHO)의 장애와 건강 팩트시트(2023년 3월 7일)는 "약 13억 명이 상당한 장애를 경험하고 있으며, 이는 세계 인구의 16%, 즉 6명 중 1명"이라고 설명합니다. 여기에 일시적인 부상, 고령에 따른 시력·운동 기능 변화, 밝은 야외에서 휴대폰을 보는 상황처럼 일상적인 제약까지 더하면, 접근성은 특정 소수만의 주제가 아니라 웹사이트를 쓰는 대부분의 사람과 관련된 사용성 주제가 됩니다.

W3C 웹 접근성 이니셔티브(WAI)는 접근성의 사업적 근거를 '혁신 촉진', '브랜드 강화', '시장 확장', '법적 위험 최소화'의 네 갈래로 정리합니다. 같은 자료에는 실제로 인용된 사례도 있습니다.

  • This American Life(미국 공영 라디오 프로그램): 방송 회차에 텍스트 전사본(transcript)을 제공한 뒤, W3C 자료 기준으로 방문자의 7.23%가 최소 한 개의 전사본을 열람했고 순방문자가 4.18% 늘었습니다. 오디오 콘텐츠를 텍스트로도 제공하는 것이 이용자와 검색 노출 모두에 의미가 있었다는 사례입니다.
  • Target(미국 유통기업): 2008년 미국 시각장애인연맹(NFB)과의 웹 접근성 집단소송 합의로 캘리포니아 집단 구성원을 위한 600만 달러 규모의 기금을 마련했고, 이와 별도로 법원은 2009년 8월 3일 명령에서 원고 측 변호사 비용·소송 비용 3,738,864.96달러를 정했습니다. 접근성 미비가 법적·평판 위험으로 이어질 수 있음을 보여 주는 사례입니다.

두 사례는 W3C가 사업적 근거를 설명하기 위해 인용한 것으로, 모든 웹사이트에서 같은 결과가 나온다는 뜻은 아닙니다. 다만 '누구나 쓸 수 있는 흐름'이 이용과 신뢰, 위험 관리에 실제로 연결된다는 점은 분명히 보여 줍니다.

이해를 돕기 위한 이미지 - 다양한 이용 상황의 사람들이 같은 웹사이트에 접근하며 이용 확대, 신뢰, 위험 관리로 이어지는 접근성의 사업적 의미를 표현한 개념 일러스트

한국에서 기준이 되는 법과 국가표준

법령 원문 기준으로 「장애인차별금지 및 권리구제 등에 관한 법률」은 2007년 4월 10일 법률 제8341호로 제정되어 2008년 4월 11일 시행되었으며(보건복지부 안내 페이지에는 제정일이 4월 11일로 표기되어 있습니다), 정당한 사유 없이 정당한 편의를 제공하지 않는 것도 차별에 포함합니다. 법은 정보통신 영역의 정당한 편의 제공을 다루고 있어, 기업 웹사이트와 앱도 점검 대상이 될 수 있습니다. 자사 서비스에 구체적으로 어떤 의무가 적용되는지는 법령 원문과 전문가 검토로 확인하는 것이 안전합니다.

실무 기준은 국가표준인 한국형 웹 콘텐츠 접근성 지침 2.2(KWCAG 2.2, KS X OT0003)입니다. 국립전파연구원에 등재된 이 표준은 2022년 12월 28일 개정되었고, 한국지능정보사회진흥원(NIA) 보도자료에 따르면 기존 24개 검사항목에 단일 포인터 입력 지원, 레이블과 네임, 접근 가능한 인증, 반복 입력 정보 등 9개 항목이 추가되어 33개 검사항목이 되었습니다. 공공 디자인 시스템인 KRDS도 KWCAG 2.2를 따른다고 밝히고 있습니다.

국제 기준: WCAG 2.2가 요구하는 것

W3C의 WCAG 2.2는 2023년 10월 5일 W3C 권고안(Recommendation)으로 발행되었고, WCAG 2.1에 9개 성공기준을 추가했습니다. 모든 기준은 인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 견고성(Robust) 네 가지 원칙 아래에 놓입니다.

WCAG 2.2에 새로 들어간 기준 가운데 상거래·문의 흐름과 직접 닿는 항목은 다음과 같습니다.

  • Focus Not Obscured (Minimum): 키보드 초점을 받은 요소가 고정 헤더나 쿠키 배너 같은 다른 요소에 완전히 가려지지 않아야 합니다.
  • Target Size (Minimum): 터치·클릭 대상이 충분한 크기나 간격을 가져야 해, 모바일에서 작은 버튼을 잘못 누르는 문제를 줄입니다.
  • Accessible Authentication (Minimum): 로그인·본인확인 과정에서 기억력이나 퍼즐 풀이 같은 인지 기능 테스트만을 요구하지 않도록 대안을 제공해야 합니다.

이해를 돕기 위한 이미지 - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성이라는 WCAG의 네 가지 원칙을 네 개의 기둥으로 표현한 개념 도식

실제 웹사이트의 현재 상태: WebAIM Million 2026

미국 유타주립대학교 기반의 WebAIM은 매년 상위 100만 개 웹사이트 홈페이지를 자동 점검한 'WebAIM Million' 보고서를 공개합니다. 2026년 보고서(2026년 2월 분석)에 따르면 홈페이지의 95.9%에서 WCAG 2 오류가 자동 검출되었고(2025년 94.8%), 페이지당 평균 오류는 56.1개였습니다. 가장 흔한 유형은 다음과 같습니다.

  • 낮은 텍스트 대비: 83.9%
  • 이미지 대체 텍스트 누락: 53.1%
  • 입력 폼 라벨 누락: 51%
  • 빈 링크: 46.3%
  • 빈 버튼: 30.6%
  • 문서 언어 미지정: 13.5%

자동 점검은 모든 문제를 찾지 못한다는 한계가 있지만, 이 목록은 중소기업이 어디서부터 고쳐야 하는지 알려 주는 좋은 출발점입니다. 상위 유형 대부분이 디자인 시안과 콘텐츠 작성 단계에서 미리 막을 수 있는 문제이기 때문입니다.

구매·문의 흐름을 점검하는 5단계

1단계. 매출과 직결되는 핵심 여정부터 고르기

사이트 전체를 한 번에 고치려 하기보다 '상품 탐색 → 장바구니 → 결제', '서비스 소개 → 문의 신청'처럼 매출과 직결된 여정을 먼저 정합니다. 각 여정에 포함된 페이지와 팝업, 폼을 목록으로 만들어 두면 점검 범위가 명확해집니다.

2단계. 자동 도구로 빠르게 1차 진단하기

Lighthouse, WAVE, axe 같은 자동 점검 도구로 대비, 대체 텍스트, 폼 라벨, 빈 링크·버튼 같은 반복 오류를 먼저 찾습니다. WebAIM 보고서에서 상위를 차지한 유형과 같으므로 수정 효과를 확인하기도 쉽습니다.

3단계. 키보드와 스크린 리더로 직접 써 보기

마우스 없이 Tab, Shift+Tab, Enter, Esc만으로 핵심 여정을 끝까지 진행해 봅니다. 초점 표시가 보이는지, 초점이 고정 헤더에 가려지지 않는지, 모달이 키보드로 닫히는지를 확인하고, 화면 낭독기(예: NVDA, VoiceOver)로 버튼과 입력칸이 올바른 이름으로 읽히는지 들어 봅니다.

이해를 돕기 위한 이미지 - 마우스 없이 키보드 탭 이동으로 초점 표시를 확인하고 화면 낭독기로 버튼 이름을 들어 보는 점검 장면 일러스트

4단계. 콘텐츠·디자인·폼을 함께 고치기

  • 대비: 본문과 버튼 텍스트가 배경과 충분히 구분되도록 디자인 토큰 단계에서 색상을 정합니다.
  • 대체 텍스트: 상품 이미지에는 색상·소재·형태처럼 구매 판단에 필요한 정보를, 장식용 이미지는 빈 대체 텍스트로 처리합니다.
  • 폼: 모든 입력칸에 보이는 라벨을 두고, 오류가 나면 무엇을 어떻게 고쳐야 하는지 문장으로 안내합니다.
  • 버튼·링크: 아이콘만 있는 버튼에도 '장바구니에 담기'처럼 기능을 설명하는 이름을 붙입니다.
  • 문서 언어: HTML 문서에 lang 속성을 지정해 화면 낭독기가 올바른 발음 규칙을 쓰도록 합니다.

이해를 돕기 위한 이미지 - 낮은 대비, 라벨 없는 입력칸, 아이콘만 있는 버튼을 높은 대비, 보이는 라벨, 이름 붙은 버튼으로 고친 전후 비교 일러스트

5단계. 운영 체크리스트로 유지하기

접근성은 한 번의 공사로 끝나지 않습니다. 새 상품 등록, 배너 교체, 이벤트 페이지 제작 때마다 확인할 짧은 체크리스트를 만들고, 분기마다 1~4단계를 다시 실행합니다. 개선 전후의 이탈률, 폼 완료율, 문의 건수를 같은 기준으로 기록해 두면 자사 데이터로 효과를 판단할 수 있습니다.

이커머스 적용 예시 (설명용 설계 예시)

다음은 실제 고객사 성과가 아니라, 위 기준을 어떻게 적용하는지 보여 주기 위한 설계 예시입니다. 한 온라인 쇼핑몰의 상품 상세 페이지에서 '구매하기' 버튼이 아이콘만으로 되어 있고, 옵션 선택 드롭다운이 키보드로 열리지 않으며, 품절 안내가 빨간색 글자로만 표시된다고 가정해 봅니다.

  • 버튼에 '선택한 옵션으로 구매하기'라는 접근 가능한 이름을 붙입니다.
  • 옵션 선택을 표준 select 요소나 키보드 조작이 가능한 컴포넌트로 바꿉니다.
  • 품절 여부를 색상뿐 아니라 '품절' 텍스트로도 표시합니다.
  • 결제 단계의 입력칸마다 보이는 라벨과 구체적인 오류 문구를 제공합니다.

이런 수정은 장애가 있는 이용자뿐 아니라 작은 화면에서 급하게 주문하는 모든 고객에게도 같은 방향으로 작동합니다. 개선 효과는 반드시 자사 분석 데이터로 확인해야 합니다.

이해를 돕기 위한 이미지 - 아이콘만 있던 구매 버튼, 키보드로 열리지 않던 옵션 선택, 색상으로만 표시된 품절 안내를 개선한 상품 상세 페이지 설계 예시 일러스트

접근성과 검색 노출의 관계

Google 검색 센터의 SEO 기본 가이드는 이미지에 내용을 설명하는 대체 텍스트를 쓰고, 이해하기 쉬운 링크 텍스트와 명확한 페이지 구조를 갖추도록 안내합니다. 네이버 서치어드바이저 가이드 역시 검색 로봇과 이용자가 이해하기 쉬운 구조를 권장합니다. 접근성 개선이 검색 순위를 자동으로 올린다고 단정할 수는 없지만, 의미 있는 제목 구조·대체 텍스트·링크 텍스트·Schema.org 구조화 데이터는 사람과 검색 엔진이 모두 콘텐츠를 더 정확히 이해하도록 돕는 공통 기반입니다.

하얀모자마케팅과 함께 점검하기

하얀모자마케팅은 2013년 11월 20일 설립된 웹 기획·개발·마케팅 회사로, 이종철 대표(Harvard University Alumni)가 운영합니다. 웹사이트 리뉴얼이나 신규 구축 시 KWCAG 2.2와 WCAG 2.2를 기준으로 핵심 구매·문의 흐름을 함께 점검합니다.

  • 계약 전 무료 시안 상담으로 현재 사이트의 핵심 여정과 개선 방향을 먼저 확인합니다.
  • 진행 시 결제 조건은 계약금 50%, 잔금 50%입니다.
  • 문의는 텔레그램 https://t.me/jyongchul로만 받고 있습니다.
  • 회사 정보: 하얀모자마케팅 | https://whmarketing.org | 대표번호 010-9333-2028

출처와 검증 기준

아래 원문을 2026년 10월 4일에 확인했습니다. 수치는 원문 표현을 그대로 옮겼으며, 출처가 없는 수치·익명 성공 사례는 사용하지 않았습니다.

마케팅 상담

SEO, AEO, 플랫폼, 전환 개선 기회를 하얀모자마케팅과 함께 점검하세요.

하얀모자마케팅에 문의하기