온라인 쇼핑몰 웹 접근성 개선하기 2
국내에서 웹사이트를 상대로 이용불편을 이유로 소송을 제기하거나 승소한 사례는 흔치 않습니다. 하지만 미국에서는 지난 1990년 제정된 장애인법(Americans With Disabilities Act. 약칭ADA)에 따라 장애인이 사용하기 불편한 웹사이트를 상대로 한, 이른바 ‘장애인 권익소송’이 심심찮게 제기되어 왔습니다. 장애인 권익소송 현황을 조사하는 전문 블로그(www.adatitleiii.com)에 따르면, 4년 전인 2017년 미국에서 제기된 웹사이트 이용 제한 소송만 총 800여건에 달했으며, 이는 같은해 제기된 장애인 권익소송(총 7663건) 가운데 약 10% 이상을 차지할 정도였습니다. 이같은 소송은 계속 늘어나 재작년에는 웹과 모바일에서의 접근성 문제가 장애인관련 소송의 약 1/5을 차지할 만큼 늘어났습니다. 대부분이 화면낭독 소프트웨어인 스크린리더로 정보를 읽을 수 없거나 동영상에 자막이 없다는 이유 등에서였습니다.
이번 쇼핑몰 3사에 대한 집단소송에서 시각장애인 원고측이 주로 문제삼은 것도 미국의 사례와 크게 다르지 않았습니다. 상품정보에 대한 설명이 대체 텍스트로 제공되지 않은 점입니다. 물론 이번 소송을 맡았던 재판부의 부언처럼 “피고들(쇼핑몰 운영3사)이 지속적으로 웹 접근성 개선을 위한 조치를 취하는 등 노력하고 있는 것으로 보이지만, 여전히 상당수 상품에 대한 상세정보를 담고 있는 웹페이지에는 대체 텍스트가 입력돼 있지 않은” 것이 사실입니다.
시각장애인 이용자들이 온라인 쇼핑몰을 이용하면서 토로하는 불편요소는 크게 두 가지로 정리해 볼 수 있습니다. 첫 번째는 대체 텍스트 및 링크 텍스트 관련 문제이고, 두 번째는 배경색과 글자간 명도대비 관련 문제입니다. 이 기사에서는 총 2회로 나누어 각각에 해당하는 문제 사례들과 그 해결방안에 대해 알아보겠습니다.
공통적으로 나타나는 온라인 쇼핑몰 웹 접근성 문제 8가지
1) 제품정보에 대한 설명을 제공하지 않은 경우
쇼핑몰 제품의 상세 정보를 보면 보통 이미지 파일 형태로 업로드된 경우가 많습니다. 눈으로 화면을 볼 수 없는 사용자나 저시력인의 경우, 스크린리더를 이용해 이미지에 대한 설명을 읽습니다. 이미지 소스(<img>)에 'alt(alternative text)' 속성을 명시하지 않으면 스크린리더는 제품 정보와는 무관한 이미지 파일명을 그대로 읽게 되기 때문에 문제가 됩니다. 또한 alt 속성을 선언했더라도 속성값을 비워두면 스크린리더는 해당 요소가 아무런 의미가 없는 것으로 간주해 읽지 않고 건너뛰게 되어 시각장애인 이용자들은 이미지가 제공되고 있다는 사실조차 인지할 수 없게 됩니다.
그러므로 이미지가 정보를 담고 있는 경우, 반드시 alt속성을 사용해 대체 텍스트를 제공해야 합니다. 이때 이미지에 포함되어 있는 모든 텍스트를 동일하게 작성해 내용이 축약되지 않도록 유의할 필요가 있으며, 또 이미지에 텍스트가 포함되어 있지 않더라도 정보를 전달하기 위한 목적으로 이미지가 사용되고 있다면 간단하게라도 설명을 작성하는 것이 좋습니다.
제품정보에 대한 설명을 제공하지 않은 사례. 이미지에는 모자색깔이 쓰여 있으나 이에 대한 대체 텍스트를 제공하지 않아 스크린 리더 사용자는 정보를 알 수 없다.개선 전
대체텍스트(alt)가 공란("")으로 비어 있는 경우 스크린리더는 해당 이미지 정보를 생략하게 되어 정보를 인지할 수 없게 됩니다.
소스 코드
<img class="se-image-resource" alt=""
src="https://shop-phinf.pstatic.net/20210326_145/1616724909615BBY4z_JPEG/02.jpg?type=w860"
data-src="https://shop-phinf.pstatic.net/20210326_145/1616724909615BBY4z_JPEG/02.jpg?type=w860">
스크린리더 음성
“”
개선 후
아래에 있는'모자 이미지 설명'파일을 다운로드 하시면 alt속성을 사용해 대체 텍스트를 제공했을 때 스크린 리더가 실제로 어떻게 읽어주는지 확인하실 수 있습니다.
소스 코드
<img class="se-image-resource" alt="모자가 핫핑크, 오렌지, 머스타드, 아이보리, 라임, 블루, 퍼플, 레몬, 민트, 핑크, 베이지, 메란지, 네이비, 블랙순으로 나열되어 있습니다."
src="https://shop-phinf.pstatic.net/20210326_145/1616724909615BBY4z_JPEG/02.jpg?type=w860"
data-src="https://shop-phinf.pstatic.net/20210326_145/1616724909615BBY4z_JPEG/02.jpg?type=w860">
스크린리더 음성
“모자가 핫핑크, 오렌지, 머스타드, 아이보리, 라임, 블루, 퍼플, 레몬, 민트, 핑크, 베이지, 메란지, 네이비, 블랙순으로 나열되어 있습니다.”
2) 복잡한 제품정보에 대한 설명을 제공하지 않은 경우
제품의 크기나 무게와 같은 주요 스펙을 이미지 형태로 제공할 경우, 이미지에 담긴 정보와는 달리 그저 alt속성값을 “상품 상세 이미지입니다.”라고만 한다면, 스크린리더 사용자들은 제품 정보를 알 수 없습니다.
복잡한 제품정보에 대한 설명을 제공하지 않은 사례. 이미지에는 상품 사이즈가 표로 제공되어 있으나 이에 대한 대체 텍스트를 제공하지 않아 스크린 리더 사용자는 정보를 알 수 없다.개선 전
소스 코드
<img class="se-image-resource" alt=""
src="https://shop-phinf.pstatic.net/20210326_17/1616725012590wtI4R_JPEG/SE-6863faff-4936-4768-8f07-3cb330981cff.jpg?type=w860"
data-src="https://shop-phinf.pstatic.net/20210326_17/1616725012590wtI4R_JPEG/SE-6863faff-4936-4768-8f07-3cb330981cff.jpg?type=w860">
스크린리더 음성
“”
개선 후
아래에 있는'모자 사이즈 정보'파일을 다운로드 하시면 alt속성을 사용해 대체 텍스트를 제공했을 때 스크린 리더가 실제로 어떻게 읽어주는지 확인하실 수 있습니다.
소스 코드
<img class="se-image-resource" alt="사이즈 정보입니다. 자세한 내용은 아래를 참고하세요."
src="https://shop-phinf.pstatic.net/20210326_17/1616725012590wtI4R_JPEG/SE-6863faff-4936-4768-8f07-3cb330981cff.jpg?type=w860"
data-src="https://shop-phinf.pstatic.net/20210326_17/1616725012590wtI4R_JPEG/SE-6863faff-4936-4768-8f07-3cb330981cff.jpg?type=w860">
<table style="{width:1px; height:1px; margin:-1px; border:none; position:relative; top:0; left:0; overflow:hidden; clip:rect(0, 0, 0, 0,);}”>
<caption>사이즈 팁</caption>
<thead>
<tr>
<th scope=”col”>사이즈</th>
<th scope=”col”>나이</th>
<th scope=”col”>신장(cm)</th>
<th scope=”col”>몸무게(kg)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>3호 (XS)</th>
<td>돌 전후</td>
<td>85 이하</td>
<td>10~12</td>
</tr>
...
</table>
스크린리더 음성
"사이즈 정보입니다. 자세한 내용은 아래를 참고하세요. 이미지
테이블시작 (2행 4열) (1 / 1)
테이블 제목: 사이즈 팁
사이즈
나이
신장(cm)
몸무게(kg)
빈줄
3호 (XS)
돌 전후
85 이하
10~12
테이블끝"
상품 상세 페이지에서 제품과 관련된 각종 정보(할인, 이벤트 참여 방법, 제품 특장점, 제품 상세 특징, 배송 정보, 교환/반품, A/S, 고객센터 안내 등)는 쇼핑몰 운영사에서 자체적으로 등록하는 것이 아니라 벤더사에서 개별 등록하는 것이 통상적입니다. 벤더사 입장에서는 대체텍스트를 넣고 싶어도 기본적인 HTML 지식이 없이는 이미지 등록이나 편집이 사실상 어려울 수 있습니다. 또 이른바 ‘규격’이 없다 보니 벤더사들이 업로드하는 파일 형식이나 콘텐츠의 질도 제각각일 수 있습니다.
이 같은 문제를 해결하기 위해 이베이 코리아의 경우, 자체개발한 상품 등록 솔루션 ‘이베이 에디터 2.0’를 통해 판매자가 상품의 사진과 설명을 따로 쉽게 입력하도록 하고 있습니다. 또 G마켓/옥션 등의 쇼핑몰 판매회원들을 대상으로 웹 접근성 교육, ‘이베이 에디터 2.0’을 활용한 상품 등록, 상세페이지 제작 교육 등(G마켓, 옥션 판매자 교육사이트 이베이에듀 참고)을 별도로 하고 있습니다.
이처럼 온라인쇼핑몰 플랫폼사가 나서 상품 정보를 웹 접근성 지침에 맞게 보다 쉽게 입력할 수 있는 별도의 프로그램을 마련해 운영한다면, 벤더사들은 전문적인 지식을 갖추지 않더라도 웹접근성 지침을 준수하는 정보를 고객에게 제공할 수 있게 되고, 또 쇼핑몰 내 상품 정보의 질도 전체적으로 향상되는 효과를 거둘 수 있을 것입니다.
이베이에디터 2.0을 활용한 상품 등록화면. 이베이코리아의 경우, 벤더사가 웹접근성 지침에 맞게 상품을 등록할 수 있도록 자체 등록사이트를 운영해 플랫폼사의 모범적 사례로 꼽힌다.3) 혜택에 대한 이미지에 설명을 제공하지 않은 경우
소비자들에게는 제품을 정가보다 저렴하게 구입할 수 있는 할인 쿠폰 혜택이나 사은품 증정 이벤트에 대한 정보가 구매를 결정짓는 변수로 작용할 만큼 중요할 수 있습니다. 하지만 이런 정보를 단순히 눈에 보이는 이미지로만 제공한다면 스크린리더 사용자들은 할인 정보를 알지 못해 구매를 포기하거나, 구매결정을 했더라도 할인 쿠폰을 적용하지 않은 채 결제를 진행할 우려가 있습니다. 중요 이벤트 정보도 마찬가지입니다.
그러므로 할인 쿠폰 혜택이나 사은품 증정 이벤트 정보를 이미지로 제공하고 있다면, 반드시 이미지와 동일한 정보를 텍스트로 제공해 스크린리더 사용자들도 동등하게 정보를 알 수 있도록 할 필요가 있습니다.
4) 적절하지 않은 링크 텍스트로 혼동을 주는 경우
보통 온라인 쇼핑몰의 메인 페이지나 제품 목록에서 제품명을 클릭할 경우, 해당 제품을 소개하는 페이지로 이동하게 되어 있습니다. 이처럼 하나의 웹 문서에서 다른 웹 문서 또는 다른 사이트로 쉽게 이동하기 위해 사용하는 링크(제품명)에는 반드시 ‘링크 텍스트’, 즉 링크에 대한 설명이 있어야 합니다. 예를 들어 ‘00전자 일반세탁기 15kg SuperAA’라는 제품명을 클릭할 경우 해당 제품을 소개하는 페이지로 이동하게 되어 있다면, 반드시 제품명과 동일한 링크 텍스트를 제공해야 합니다. 이러한 링크 텍스트는 스크린리더 사용자가 상품을 탐색하는 과정에서 자신이 찾는 정보가 맞는지를 확인하고, 그 정보를 더 상세히 알아볼 것인지 판단하는 기준이 되기 때문입니다.
또한 제품 구매시 증정품이 있는 경우, 해당 제품명과 함께 증정품에 대한 정보를 표현하는 것도 중요합니다. 상품 상세 이미지에 증정품에 관한 설명이 적혀 있더라도 제품명에서 증정품 정보를 누락시킨다면, 스크린리더 사용자는 이를 확인하기 위한 부가적인 탐색 과정을 여러 번 거치게 됩니다. 만약 제품명이나 할인, 증정 정보 등을 변경해야 한다면, 상품 상세 설명만 수정하지 말고, 링크 텍스트에도 변경사항을 똑같이 수정해 스크린리더 사용자들이 혼동하지 않도록 해야 합니다.
5) 동영상 제품 정보에 대한 설명을 제공하지 않은 경우
향 종류에 따라 다양한 색상과 내부 장식을 선택할 수 있는 차량용 디퓨저 상품 이미지. 유리병에 ‘그대가 가는 길에 해가 나길’ 문구 각인.개선 후
자막
"해가나다에서 판매중인 차량용디퓨저 상품 슬라이드입니다."
온라인쇼핑몰에서 제품에 대한 상세 설명 중 제품의 특장점과 구동 방식을 동영상 형식으로 제공하는 경우를 흔히 볼 수 있습니다. 이 경우, 영상에 포함된 텍스트, 음성 설명이 담긴 대본이나 자막 등 대체 수단이 제공되지 않으면 스크린리더 사용자나 청각 장애가 있는 사용자는 그 내용을 알 수 없게 됩니다. 반대로 영상에 대본이나 자막이 있으면, 스크린리더 사용자, 청각 장애 사용자는 물론 부득이 음소거를 하고 동영상을 봐야하는 사용자들도 제품정보를 확인할 수 있습니다.
유튜브에 동영상을 업로드할 경우, 스튜디오에서 ‘자막(subtitles)’을 생성 및 편집하여 제품에 대한 설명을 제공할 수 있습니다.
상세한 자막 편집 방법은 유튜브 고객센터 도움말 참조(동영상 및 자막 번역 > 나만의 자막 추가)
여기까지, 스크린리더 사용자가 대체텍스트 및 링크 텍스트의 누락 또는 불충분한 제공으로 인해 겪는 여러가지 문제들과 그 해결방안에 대해 살펴 보았습니다. 다음 기사에서는 저시력 사용자가 온라인 쇼핑몰을 이용하면서 겪을 수 있는 명도대비 문제에 대해 살펴 보겠습니다.
<기사가 이어집니다>
