온라인 쇼핑몰 WCAG 2.2 AA 웹 접근성 체크리스트

Shopify·WooCommerce 쇼핑몰을 위한 페이지 유형별 WCAG 2.2 AA 체크리스트: 대체 텍스트, 명도 대비, 레이블, 키보드, 포커스, 타깃 크기, 2.2 신규 기준.

FixReports 편집팀8분 분량

온라인 쇼핑몰의 WCAG 2.2 AA 체크리스트는 대부분의 쇼핑몰 템플릿에서 발견되는 오류부터 시작합니다. 대체 텍스트 누락, 명도 대비가 낮은 텍스트, 접근 가능한 이름이 없는 링크와 버튼, 레이블 없는 입력 필드, 키보드 트랩, 보이지 않는 포커스가 그것입니다. 여기에 WCAG 2.2는 쇼핑몰에 특히 큰 영향을 주는 AA 검사 항목을 추가합니다. 고정 바 아래에 가려지는 포커스된 요소(2.4.11), 24 × 24 CSS 픽셀보다 작은 터치 타깃(2.5.8), 그리고 무언가를 기억하거나 다시 입력해야 하는 로그인(3.3.8)입니다. 페이지 유형(홈, 컬렉션, 상품, 장바구니)마다 키보드와 자동 검사 도구로 테스트한 다음, 테마 템플릿을 수정해 모든 페이지에 수정 사항이 반영되도록 합니다.

핵심 요약

  • WCAG 2.2는 2023년 10월 5일 W3C 권고안(Recommendation)이 되었습니다. 현재 판은 2024년 12월 12일자이며, ISO/IEC 40500:2025 (새 탭에서 열림)로 승인되었습니다.
  • WebAIM Million 2026 (새 탭에서 열림)(2026년 2월 데이터)에서 상위 100만 개 웹사이트 홈페이지의 95.9%에서 감지 가능한 WCAG 2 오류가 발견되었습니다.
  • 가장 흔한 오류 6가지는 낮은 명도 대비 텍스트(페이지의 83.9%), 대체 텍스트 누락(53.1%), 입력 필드 레이블 누락(51%), 빈 링크(46.3%), 빈 버튼(30.6%), 페이지 언어 미지정(13.5%)이었습니다.
  • 이 표본에 포함된 Shopify 홈페이지 42,516개에서는 평균 75.1개의 오류가 감지되어, 전체 페이지 평균인 56.1개보다 많았습니다.
  • WCAG 2.2는 AA 수준 기준 4개(2.4.11, 2.5.7, 2.5.8, 3.3.8)와 A 수준 기준 2개(3.2.6, 3.3.7)를 추가하고 4.1.1 Parsing을 삭제했습니다.

WCAG 2.2에서 온라인 쇼핑몰과 관련해 무엇이 바뀌었나요?

WCAG 2.2는 9개의 성공 기준을 추가했으며, 그중 6개가 A 또는 AA 수준입니다. 또한 더 이상 필요하지 않게 된 4.1.1 Parsing을 삭제했습니다 (W3C WAI (새 탭에서 열림)).

신규 기준수준쇼핑몰에서의 의미
2.4.11 Focus Not Obscured (Minimum)AA포커스를 받은 링크나 버튼이 고정 헤더, 고정 장바구니 담기 바, 쿠키 배너, 채팅 위젯에 완전히 가려져서는 안 됨
2.5.7 Dragging MovementsAA가격 범위 슬라이더처럼 드래그가 필요한 기능에는 한 번의 탭으로 조작할 수 있는 대안이 필요함
2.5.8 Target Size (Minimum)AA클릭 및 터치 타깃은 최소 24 × 24 CSS 픽셀이어야 하며, 그보다 작다면 각 타깃을 둘러싼 24 px 원이 이웃 타깃에 닿지 않을 만큼 간격을 두어야 함
3.2.6 Consistent HelpA도움말 링크, 연락처, 채팅이 모든 페이지에서 같은 상대적 순서로 나타나야 함
3.3.7 Redundant EntryA한 프로세스 안에서 같은 정보를 두 번 묻지 말고, 자동으로 채우거나 선택할 수 있게 해야 함
3.3.8 Accessible Authentication (Minimum)AA대안이 있거나 붙여넣기, 비밀번호 관리자 같은 보조 수단을 쓸 수 있는 경우가 아니라면, 로그인이 암기나 옮겨 적기에 의존해서는 안 됨

나머지 3개(2.4.12, 2.4.13, 3.3.9)는 AAA 수준입니다. 2.2는 4.1.1을 제외한 2.1의 모든 기준을 유지하므로, 2.2 AA를 충족하면 2.1 AA도 충족합니다.

쇼핑몰 템플릿에서 가장 자주 실패하는 WCAG 기준은 무엇인가요?

해마다 같은 몇 가지가 나타납니다. 명도 대비, 대체 텍스트, 입력 필드 레이블, 링크와 버튼의 이름, 그리고 자동화 도구가 일부만 잡아내는 키보드 및 포커스 문제입니다.

기준쇼핑몰에서 실패하는 부분해결 방법
1.1.1 Non-text Content (A)대체 텍스트가 없거나 파일 이름이 대체 텍스트로 들어간 상품 이미지, 텍스트가 없는 링크 이미지보이는 상품을 설명합니다(색상, 스타일, 촬영 각도). alt=""는 장식용 이미지에만 사용합니다. Shopify 테마는 image.alt를 출력해야 합니다
1.4.3 Contrast (Minimum) (AA)연회색 본문 텍스트, 플레이스홀더 텍스트, 세일 배지, 히어로 이미지 위의 텍스트일반 텍스트는 4.5:1, 큰 텍스트(약 24 px, 굵은 글꼴은 18.5 px)는 3:1 (W3C (새 탭에서 열림))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)아이콘만 있는 장바구니, 검색, 소셜 링크, 슬라이더 화살표, 이름 없는 “X” 닫기 버튼모든 컨트롤에 보이는 텍스트나 aria-label을 지정합니다. 예: “장바구니, 상품 2개”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)플레이스홀더 텍스트만 있는 뉴스레터 및 검색 필드, 레이블 없는 수량 입력란입력란의 id와 일치하는 <label for>를 사용하고, 라디오 버튼 스와치는 legend가 있는 fieldset으로 묶습니다
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)마우스 오버로만 열리는 메뉴, div로 만든 스와치, 키보드로 닫을 수 없는 팝업실제 button, a 요소를 사용하고, Escape 키로 오버레이를 닫으면 포커스가 원래 위치로 돌아가게 합니다
2.4.7 Focus Visible (AA)테마 CSS의 outline: none배경과 뚜렷하게 구분되는 :focus-visible 스타일을 추가합니다

WebAIM은 또한 링크된 이미지 4개 중 1개에 대체 텍스트가 없었고, 대체 텍스트가 없는 이미지의 45%가 링크였다고 밝혔습니다 (WebAIM (새 탭에서 열림)). 컬렉션 그리드에서는 대개 상품 이미지 링크가 여기에 해당합니다.

홈페이지에서는 무엇을 점검해야 하나요?

모든 방문자가 가장 먼저 마주하는 헤더, 히어로 영역, 그리고 팝업으로 뜨는 모든 요소를 점검합니다.

  • 건너뛰기 링크. 첫 번째로 포커스를 받는 요소로 “본문으로 건너뛰기” 링크를 둡니다(2.4.1 Bypass Blocks, A).
  • 헤더 아이콘. 검색, 계정, 장바구니 아이콘에 접근 가능한 이름이 있고, 장바구니 이름에는 담긴 상품 개수가 포함됩니다.
  • 메뉴. Enter 키나 Space 키로 열리고, Tab 키로 하위 항목에 접근할 수 있으며, Escape 키로 닫히고, 마우스 오버에 의존하지 않습니다(2.1.1). Shopify의 테마 스토어 요구 사항 (새 탭에서 열림)에 따르면 드롭다운 메뉴를 포함해 페이지의 모든 부분을 키보드로 이용할 수 있어야 합니다.
  • 히어로 슬라이더. 슬라이드가 5초 넘게 자동으로 움직인다면 일시 정지 컨트롤을 제공합니다(2.2.2 Pause, Stop, Hide, A).
  • 공지 바와 이미지 위 텍스트. 명도 대비를 측정합니다. 브랜드 색상은 4.5:1에 미치지 못하는 경우가 많습니다.
  • 팝업과 쿠키 배너. 포커스를 팝업 안으로 옮기고, 이메일 입력란에 레이블을 붙이고, Escape 키로 닫을 수 있게 하며, 고정 배너가 포커스된 요소를 완전히 가리는 일이 없도록 합니다(2.4.11). W3C는 포커스된 요소가 고정 바에 가려지지 않게 하는 방법 중 하나로 CSS scroll-padding을 소개합니다 (W3C (새 탭에서 열림)).
  • 페이지 언어. html 요소에 올바른 lang 속성이 있습니다(3.1.1 Language of Page, A).

컬렉션 페이지에서는 무엇을 점검해야 하나요?

컬렉션 페이지는 주로 상품 카드, 필터, 스와치에서 문제가 생깁니다.

  • 상품 카드. 이미지 링크에 대체 텍스트가 있거나, 이미지를 보조 기술에서 숨기고 상품명 링크가 이름을 전달합니다.
  • 필터. 모든 체크박스에 레이블이 있고 각 그룹에 제목이나 legend가 있습니다. 필터 패널은 키보드로 열고, 조작하고, 닫을 수 있습니다. 업데이트된 결과 수는 상태 메시지로 알립니다(4.1.3 Status Messages, AA).
  • 가격 슬라이더. 최소 가격과 최대 가격을 입력하는 숫자 입력란을 추가해 드래그 없이(2.5.7), 그리고 마우스 없이도(2.1.1) 필터를 사용할 수 있게 합니다.
  • 색상 스와치. 각 스와치에 텍스트 이름이 있고, “품절”을 색상만으로 표시하지 않습니다(1.4.1 Use of Color, A). 스와치는 24 × 24 CSS 픽셀 또는 간격 규칙을 충족합니다(2.5.8).
  • 정렬과 페이지 이동. 정렬 드롭다운에 레이블이 있고, 페이지 링크와 “더 보기” 버튼이 타깃 크기 기준을 충족합니다.

상품 페이지에서는 무엇을 점검해야 하나요?

상품 페이지에서 구매 결정이 이루어지므로, 사진부터 장바구니 담기 버튼까지 모든 컨트롤을 테스트합니다.

  • 갤러리. 모든 이미지에 대체 텍스트가 있고, 썸네일은 “이미지 2 보기” 같은 이름이 있는 버튼이며, 화살표는 드래그 없이 작동합니다(2.5.7).
  • 옵션 선택기. 사이즈와 색상 옵션은 레이블이 있는 그룹 안에 있고(1.3.1), 선택된 옵션이 스크린 리더에 전달되며(4.1.2), 구매할 수 없는 사이즈는 텍스트로 표시됩니다.
  • 수량. 입력란에 레이블이 있고, 빼기 및 더하기 버튼에 이름이 있으며 2.5.8을 충족합니다. Shopify 테마 스토어는 현재 최소 24 × 24 CSS 픽셀의 터치 타깃을 요구하며, Shopify의 접근성 모범 사례 (새 탭에서 열림)는 주요 컨트롤에 44 × 44를 권장합니다.
  • 장바구니 담기. 성공 및 오류 메시지를 스크린 리더가 읽어 줍니다(4.1.3). 미국 FTC(연방거래위원회)가 한 오버레이 업체를 상대로 제기한 소장에는 장바구니에 상품이 담겼다는 사실을 스크린 리더가 알려 주지 않고, 별 5개 평점 그래픽을 “previous” 버튼으로 읽어 준 사이트 사례가 언급되어 있습니다 (FTC 소장 (새 탭에서 열림)).
  • 평점, 탭, 아코디언. 평점에는 “별점 5점 만점에 4.5점” 같은 텍스트가 있습니다. 아코디언은 펼쳐져 있는지 여부를 전달합니다.
  • 고정 장바구니 담기 바. 키보드 사용자가 Tab 키로 페이지를 내려가는 동안 포커스된 요소를 완전히 가려서는 안 됩니다(2.4.11).
  • 동영상. 음성이 있는 상품 동영상에는 자막이 있습니다(1.2.2 Captions (Prerecorded), A).

장바구니와 로그인에서는 무엇을 점검해야 하나요?

장바구니는 대부분의 테마가 완전히 제어하는 마지막 페이지이므로 결제 버튼까지 테스트한 다음, 계정 로그인이 기억력이나 재입력에 의존하지 않는지 확인합니다.

  • 장바구니 드로어. Shopify의 모범 사례가 설명하는 대로, 포커스가 드로어 안으로 이동하고, 드로어가 열려 있는 동안 그 안에 머무르며, Escape 키로 닫으면 장바구니 버튼으로 돌아갑니다.
  • 장바구니 항목. 각 수량 입력란에는 상품명이 포함된 레이블이 있고, 각 삭제 버튼은 무엇을 삭제하는지 알려 줍니다. 예: “린넨 셔츠, M 사이즈 삭제”.
  • 할인 코드 및 메모 입력란. 레이블이 있고, 오류가 텍스트로 설명됩니다(3.3.1 Error Identification, A).
  • 결제 버튼. Tab 키로 도달할 수 있고, 포커스가 눈에 보이며, 고정 요소 뒤에 가려지지 않습니다.
  • 로그인(3.3.8). Shopify 고객 계정은 기본적으로 일회용 코드를 이용한 비밀번호 없는 로그인 (새 탭에서 열림)을 사용합니다. W3C에 따르면 코드는 붙여넣거나 자동으로 채울 수 있어야 하며, 붙여넣기나 비밀번호 관리자를 차단하면 이 기준을 충족하지 못합니다. 사물 인식 CAPTCHA는 AA 수준에서 허용되지만, 퍼즐형이나 계산형 CAPTCHA에는 다른 인증 방법이 필요합니다 (W3C (새 탭에서 열림)).

여기서는 플랫폼 차이가 중요합니다. Shopify에서는 정보 입력, 배송, 결제 단계에 checkout.liquid가 더 이상 지원되지 않으므로 (새 탭에서 열림) 결제 화면 마크업의 대부분은 테마가 아니라 Shopify가 제공합니다. 직접 추가한 결제 앱과 사용자 지정 항목은 테스트해야 합니다. WooCommerce에서는 결제 페이지가 WordPress 사이트의 한 페이지입니다. WooCommerce는 코어 프런트엔드가 WCAG 2.2 AA를 상당 부분 준수한다고 밝히고 있지만(접근성 성명 최종 업데이트 2025년 4월 1일), 테마와 플러그인 때문에 여전히 접근성이 깨질 수 있습니다 (WooCommerce (새 탭에서 열림)).

이 체크리스트로 쇼핑몰을 어떻게 테스트하나요?

페이지 유형마다 자동 스캔, 키보드만 이용한 구매 테스트, 짧은 스크린 리더 점검을 함께 진행합니다.

  1. 자동 스캔. axe, WAVE, Lighthouse 같은 도구는 명도 대비, 대체 텍스트, 레이블, 빈 링크 문제를 잡아냅니다. Shopify 테마 스토어는 홈, 컬렉션, 상품 페이지에서 Lighthouse 접근성 점수 평균 90점 이상을 요구합니다. 이는 최소 기준일 뿐 준수를 의미하지 않습니다. W3C에 따르면 도구만으로는 접근성을 판단할 수 없습니다 (새 탭에서 열림).
  2. 키보드만으로 구매하기. 마우스 없이 홈페이지에서 메뉴나 검색으로 상품에 접근하고, 필터를 적용하고, 옵션을 선택하고, 장바구니에 담고, 장바구니를 열어 결제 버튼까지 도달합니다.
  3. 스크린 리더 표본 점검. VoiceOver나 NVDA로 상품명, 가격, 옵션 선택 상태, 장바구니 담기 확인 메시지를 들어 봅니다.
  4. 변경 후 재테스트. 테마 업데이트나 새 앱 때문에 수정 사항이 되돌려질 수 있습니다.

무료 스캔은 실제 Chromium에서 axe-core로 홈, 컬렉션, 상품, 장바구니, 콘텐츠 페이지에 대해 1단계를 수행합니다. 접근성 수정 리포트는 최대 25개 페이지를 테스트하고, 2단계를 결제 버튼까지 키보드만으로 진행하는 쇼핑 테스트로 추가하며, 수정 전후 코드를 제공하고, 스크린 리더를 사용하는 사람이 직접 확인해야 하는 3단계용 체크리스트를 포함합니다. 둘 다 ADA 또는 WCAG 준수를 보장하지는 않습니다.

자주 묻는 질문

미국 온라인 쇼핑몰에 WCAG 2.2가 법적으로 의무화되어 있나요?

미국 법무부(Department of Justice)는 민간 기업에 적용할 웹 표준을 정한 ADA(미국 장애인법) 규정을 두고 있지 않으며, 2022년 웹 접근성 지침 (새 탭에서 열림)에서는 WCAG를 유용한 참고 기준으로 제시합니다. 소송 전 요구 서한(demand letter)은 흔히 WCAG 2.1 또는 2.2 AA를 근거로 들므로, 구체적인 의무는 변호사와 상담하는 것이 좋습니다.

WCAG 2.2 AA를 충족하면 WCAG 2.1 AA도 충족하나요?

네, 실질적으로 그렇습니다. WCAG 2.2는 W3C가 더 이상 필요하지 않다고 보고 삭제한 4.1.1 Parsing을 제외하고 WCAG 2.1의 모든 성공 기준을 유지합니다.

WCAG 2.2의 최소 타깃 크기는 얼마인가요?

2.5.8에 따르면 타깃은 최소 24 × 24 CSS 픽셀이어야 합니다. 다만 더 작은 타깃마다 그 중심에 그린 24 px 원이 다른 타깃이나 다른 타깃의 원에 닿지 않는다면 예외입니다. 문장 안의 링크, 스타일을 적용하지 않은 브라우저 기본 컨트롤, 해당 표현 방식이 필수적인 경우, 그리고 기준을 충족하는 동등한 컨트롤이 따로 있는 타깃도 예외입니다.

Lighthouse 접근성 점수가 100점이면 쇼핑몰이 기준을 준수한다는 뜻인가요?

아니요. 자동화 도구는 일부 오류만 감지하며, WebAIM은 감지된 오류가 없다고 해서 페이지가 접근 가능하거나 기준을 준수한다는 뜻은 아니라고 지적합니다.

비밀번호 로그인은 3.3.8 위반인가요?

그 자체로는 위반이 아닙니다. 비밀번호 입력란에 붙여넣기를 할 수 있고 비밀번호 관리자를 사용할 수 있다면 기준을 충족합니다. 위반이 되는 것은 붙여넣기나 자동 완성을 차단하는 경우입니다.

쇼핑몰은 얼마나 자주 다시 테스트해야 하나요?

앱이 예고 없이 새 마크업을 삽입할 수 있으므로, 테마 업데이트, 새 앱 설치, 주요 템플릿 변경이 있을 때마다 다시 테스트하고 구매 경로는 정기적으로 표본 점검하는 것이 좋습니다.

출처

전체 가이드