2017년, 963명의 시각장애인이 G마켓·SSG닷컴·롯데쇼핑을 상대로 소송을 제기했습니다. 이들이 법정에서 고발한 내용은 단순했습니다. 스크린리더(화면 낭독 소프트웨어)를 켜고 결제 화면으로 이동하면, 소재 정보와 교환 안내가 담긴 상세 이미지들이 "상품이미지 1, 상품이미지 1" 이라는 음성만 무한 반복할 뿐이었다는 것입니다. 결제 버튼이 어디 있는지, 무엇을 눌러야 하는지 알 수 없었습니다.
그로부터 9년 뒤인 2026년 3월 12일, 대법원(2023다255130)은 "사기업 온라인 쇼핑몰도 장애인차별금지법상 대체 텍스트 제공 및 접근성 보장 의무가 있다" 고 최종 확정했습니다. 피고 기업들에게는 판결 확정일로부터 6개월 이내에 스크린리더로 인식 가능한 대체 텍스트를 제공하라는 시정 명령도 함께 내려졌습니다.
이번 판결에서 위자료 손해배상 청구는 고의·과실 증명 미흡으로 기각되었습니다. 그러나 바로 이 점이 소형 쇼핑몰에게 더 중요한 신호입니다. 판결 이후에도 개선 의무를 방치하면 '고의성'이 인정되어 향후 기획 소송에서 거액의 배상 책임을 지게 될 가능성이 극도로 높아졌기 때문입니다.
웹 접근성 전체를 한 번에 고치려면 수백만 원의 인증 비용과 전면 리뉴얼이 필요합니다. 예산 1,000만 원 이하의 소형 쇼핑몰이 그 경로를 택하기는 현실적으로 어렵습니다.
그러나 법적 분쟁에서 실제로 문제가 된 지점은 대부분 결제 흐름 안에서 발생한 차별입니다. 시각장애인 이용자가 상품을 고르고 장바구니에 담았더라도, 결제창에서 막히면 구매 자체가 불가능해집니다. 이것이 법원이 말하는 '편의제공 거부'의 전형적인 형태입니다.
결제창은 쇼핑몰의 수익이 발생하는 마지막 관문이자, 접근성 소송에서 가장 자주 인용되는 화면입니다.
전체 사이트 중 결제창 한 곳을 집중적으로 수정하면, 투입 비용 대비 소송 리스크 차단 효과가 가장 높습니다. 아래 네 가지 항목이 그 핵심입니다.
스크린리더는 이미지를 볼 수 없습니다. 이미지로 만들어진 결제 버튼에 alt 속성이 없으면 낭독기는 파일명(btn_pay.png)이나 "이미지 1"이라고 읽습니다. 사용자는 그 버튼이 무엇인지 알 수 없습니다.
수정 전: <img src="btn_pay.png">
수정 후: <img src="btn_pay.png" alt="신용카드 결제하기">
단순 장식용 그래픽(테두리선, 배경 무늬 등)은 alt=""로 설정해 스크린리더가 건너뛰도록 처리합니다. 이 구분이 없으면 낭독기가 의미 없는 소리를 계속 읽어 사용자가 혼란스러워집니다.
마우스를 쓸 수 없는 시각장애인은 Tab 키로 항목을 이동하고 Enter로 선택합니다. 결제창 내 포커스(현재 선택된 위치)가 논리적 순서로 이동하지 않으면 이용자는 길을 잃습니다.
점검 순서는 이렇습니다. 주문자 이름 → 연락처 → 배송지 주소 → 결제 수단 선택 → 결제하기. 이 흐름대로 Tab 키를 눌러 직접 확인하세요. tabindex 속성을 무분별하게 지정하면 오히려 순서가 뒤엉키므로, HTML 마크업 코드의 순서 자체를 결제 프로세스 흐름과 일치시키는 것이 가장 안전합니다.
또한 CSS에서 :focus { outline: none; } 처리를 절대 하지 마세요. 포커스링(현재 위치를 표시하는 테두리선)은 시각장애인뿐 아니라 키보드 사용자 모두에게 필수적인 시각 신호입니다.
이름, 전화번호, 이메일 입력란에 포커스가 이동했을 때 스크린리더가 "이 칸에 무엇을 입력해야 하는지"를 음성으로 안내해야 합니다. <label> 태그와 <input> 태그가 연결되지 않으면 낭독기는 빈 칸이라고만 읽습니다.
올바른 코드 구조는 다음과 같습니다.
<label for="user_phone">휴대폰 번호 (하이픈 제외)</label>
<input type="text" id="user_phone" name="phone" required>
label의 for 속성값과 input의 id 속성값이 일치해야 연결이 성립합니다. 이 연결이 없으면 시각장애인 고객은 어느 칸에 무엇을 입력해야 하는지 알 수 없습니다.
소형 쇼핑몰에서 가장 많이 발견되는 문제입니다. 개인정보 수집 동의, 구매 약관 전문을 통이미지(JPEG/PNG)로 올려두는 경우가 많습니다. 스크린리더는 이미지 안의 글씨를 읽지 못하므로 시각장애인은 약관 내용을 확인하지 못한 채 동의 버튼을 누를 수 없고, 결제가 중단됩니다.
약관은 반드시 복사·읽기가 가능한 HTML 텍스트 형식으로 제공해야 합니다. 이미지를 텍스트로 교체하는 작업은 개발 공수가 거의 들지 않으면서 리스크 차단 효과가 큰 수정입니다.
1,000만 원 이하 예산에서 결제 보안 모듈을 처음부터 자체 구축하는 것은 비현실적입니다. 대신 웹 접근성 가이드라인을 준수하고 정기 업데이트를 제공하는 대형 PG사의 임베드 결제창을 활용하세요.
토스페이먼츠, 포트원(구 아임포트) 같은 PG사의 팝업형 또는 임베드형 결제창은 자체적으로 접근성 개선을 반영합니다. 네이버페이, 카카오페이 같은 대형 간편결제도 마찬가지입니다. 이 모듈들을 연동하면 복잡한 카드 번호 입력·보안 키패드 영역에서의 접근성 부담을 대폭 줄일 수 있습니다.
쇼핑몰 측에서 해야 할 일은 결제 수단 선택 버튼과 주변 UI에 올바른 대체 텍스트와 레이블을 입히는 것입니다. 이 작업만으로도 결제창 전체의 소송 리스크를 실질적으로 낮출 수 있습니다.
결제 도중 카드 번호를 잘못 입력하거나 필수 항목을 빠뜨리면 경고 팝업이 뜹니다. 그런데 이 팝업이 시각적으로만 표시되고 스크린리더에게 전달되지 않으면, 시각장애인 고객은 왜 결제가 안 되는지 알 수 없습니다.
이 문제는 WAI-ARIA 속성 하나로 해결됩니다. 오류 메시지 영역에 role="alert" 또는 aria-live="assertive" 속성을 추가하면, 오류가 발생하는 즉시 스크린리더가 "카드 번호가 올바르지 않습니다" 라고 실시간으로 음성 안내합니다.
이 속성은 HTML 태그 한 줄 추가로 적용됩니다. 개발 비용이 거의 없는 수정이지만, 결제 실패 경험을 막는 핵심 장치입니다.
기획과 개발이 끝났다면 다음 방법으로 직접 검증하세요.
Tab, Shift+Tab, Enter, Space)만 사용합니다.이 테스트를 막힘 없이 통과하면 결제창 접근성의 핵심 요건은 충족된 것입니다. 반대로 중간에 막히는 지점이 생기면 그 지점이 바로 소송에서 문제가 될 수 있는 부분입니다.
Q. 저는 카페24나 아임웹으로 만든 쇼핑몰인데, 이 플랫폼을 쓰면 자동으로 접근성이 보장되나요?
A. 플랫폼이 기본 테마의 접근성을 일부 지원하더라도, 운영자가 직접 올린 이미지 버튼·약관 이미지·커스텀 팝업은 플랫폼이 관여하지 않습니다. 운영자가 추가한 요소는 운영자 책임으로 직접 점검해야 합니다.
Q. 웹 접근성 인증 마크를 받아야 소송을 피할 수 있나요?
A. 인증 마크는 접근성 수준을 증명하는 수단이지 법적 면책의 절대 요건은 아닙니다. 대법원 판결의 기준은 '장애인이 실제로 서비스를 이용할 수 있는가'입니다. 인증 마크 없이도 핵심 항목을 충족하면 리스크를 낮출 수 있고, 반대로 인증 마크가 있어도 결제창에 문제가 있으면 분쟁이 발생할 수 있습니다.
Q. 결제창만 고치면 충분한가요? 나머지 페이지는요?
A. 결제창은 소송 리스크가 가장 집중된 곳이므로 우선순위가 가장 높습니다. 예산이 확보되는 순서에 따라 상품 상세 페이지(이미지 alt 처리)와 회원가입 폼 순으로 순차 개선하는 것이 현실적인 접근입니다.
Q. 이미 운영 중인 쇼핑몰인데, 개발자 없이 수정이 가능한가요?
A. 대체 텍스트 추가와 레이블 연결은 HTML 코드 수정이 필요합니다. 플랫폼의 HTML 직접 편집 기능을 지원한다면 일부 항목은 가능하지만, 키보드 포커스 순서나 ARIA 속성 적용은 프론트엔드 개발자의 도움이 필요한 경우가 많습니다.
Q. 2026년 현재 소형 쇼핑몰도 실제로 소송 대상이 되나요?
A. 대법원 판결은 기업 규모를 구분하지 않았습니다. 다만 현실적으로는 대형 플랫폼이 먼저 표적이 되는 경향이 있습니다. 그러나 판결 이후 의무를 인지하고도 방치한 사실이 입증되면 소형 쇼핑몰도 고의성이 인정될 수 있으므로, 지금 조치를 시작하는 것이 가장 안전한 방어입니다.
운영 중인 쇼핑몰을 사후에 수정하는 비용은 처음 제작할 때 접근성을 반영한 비용보다 항상 높습니다. 특히 결제창 구조를 처음부터 스크린리더 친화적으로 설계하면, 추가 개발 없이 법적 의무와 사용자 경험을 동시에 충족할 수 있습니다.
에이달(ADALL)은 쇼핑몰 홈페이지 제작 기획 단계에서 결제 흐름의 접근성 항목을 함께 검토합니다. 현재 운영 중인 결제창의 스크린리더 대응 현황이 궁금하거나, 신규 쇼핑몰 제작 시 접근성 기준을 처음부터 반영하고 싶다면 아래로 문의해 주세요.
에이달 ADALL 📞 02-2664-8631 ✉️ master@adall.co.kr
지금 결제창 한 곳을 점검하는 것이, 나중에 소송 대응 비용을 쓰는 것보다 훨씬 저렴합니다.
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기