Shopify로 접근성 구현

Shopify의 테마와 앱이 접근성을 좌우합니다. 결제는 대부분 Shopify가 정해 둡니다.

흔한 발견 위치

대비가 너무 낮은 테마 색상, 대체 텍스트 없는 상품 이미지, 키보드 조작이 없는 리뷰·팝업 앱, 마우스를 올려야만 열리는 메가 메뉴, 일시정지 없는 캐러셀. Shopify 코어는 대개 문제가 아니며 — 테마, 앱, 리치 텍스트 편집기에서 만든 콘텐츠가 문제입니다.

테마 점검 및 선택

테마는 대비, 보이는 포커스, 제목 구조, 메뉴와 필터의 키보드 조작을 좌우합니다. 선택 전 기준: 홈, 컬렉션, 상품 페이지를 Tab 키로 훑어보세요 — 포커스가 항상 보이나요? 메뉴가 마우스 없이 열리나요? 텍스트와 버튼 대비가 최소 4,5:1인가요? Online Store 2.0 기본 테마(Dawn과 그 파생)는 견고한 출발점입니다. 유료 테마는 데모에서 키보드 테스트를 하고 공급업체에 접근성 관련 설명을 요청하면 도움이 됩니다.

상품 이미지, 옵션, 리치 텍스트

관리자의 모든 상품 이미지에 파일 이름이 아니라 내용을 설명하는 대체 텍스트를 주세요. 옵션 이미지도 마찬가지입니다. 배지나 배너에 그래픽으로 새겨진 글자("세일", "오늘만")는 스크린 리더에 보이지 않습니다. 실제 텍스트를 쓰세요. 상품 설명의 리치 텍스트 편집기에서는 제목 수준을 깔끔하게 사용하고(글자를 크게만 만들지 말고) 목록은 실제 목록으로 사용하세요.

앱과 삽입된 위젯

리뷰, 팝업, 업셀, 쿠키 배너 앱은 키보드 포커스를 가두거나 레이블이 없거나 닫을 방법이 없는 오버레이를 보여주는 자체 위젯을 삽입하는 경우가 많습니다. 각 앱을 키보드로 개별 테스트하세요. 슬라이더와 카운트다운 앱에는 일시정지가 필요하며 아무것도 깜빡여서는 안 됩니다. 앱 형태의 접근성 오버레이는 구조적 문제를 해결하지 못하며 장애인 권익 단체의 비판을 받습니다. 의심스러우면 앱을 제거하세요.

결제: Shopify가 정하는 것과 정하지 않는 것

Shopify의 표준 결제는 Shopify가 관리하며 대부분 접근 가능하게 만들어져 있습니다 — 거기서 여러분이 조절할 수 있는 것은 적습니다. 여러분이 영향을 주는 것: 결제 확장과 사용자 지정 필드(선물 메시지, 연령 확인)는 키보드나 스크린 리더 사용을 방해할 수 있고, 결제까지의 경로 — 장바구니, 할인 코드 입력란, 배송 선택 — 는 테마에 있습니다. 그 단계도 테스트하세요.

테스트와 자주 묻는 질문

빠른 테스트: 홈, 컬렉션, 상품 페이지를 키보드만으로 조작하고, 브라우저에서 200%로 확대하고, WAVE나 axe DevTools 같은 확장을 실행하세요. a11yglass의 무료 스캔은 추가로 전달된 HTML을 대비, 대체 텍스트, 레이블, 언어, 구조 측면에서 검사합니다. 내 Shopify 스토어에 접근성 선언이 필요한가요? 원칙적으로 예 — 소비자가 구매하는 스토어는 BFSG 의미의 전자상거래입니다. 접근성 선언 페이지를 참조하세요. Shopify 결제는 이미 접근 가능한가요? 대부분 Shopify의 책임이지만 확장이 깨뜨릴 수 있습니다. 어느 테마가 접근 가능한가요? 인증 마크는 없습니다 — 결정적인 것은 구체적 사례에서의 구현입니다.

a11yglass가 돕는 방법

무료 스캔은 제공된 HTML과 CSS를 자동으로 인식 가능한 WCAG 위반에 대해 점검하고, 각 발견 사항마다 성공 기준과 구체적인 조치를 제시합니다. 문제의 약 20~35 %를 발견하며 완전한 평가를 대체하지 않습니다.

계속 읽기

최선의 지식에 따른 일반 정보이며 법률 자문이 아닙니다. 개별 사안은 IT 법을 전문으로 하는 법무법인에 문의하세요.