1. 쇼핑몰의 웹 접근성
출처 : 웹 접근성 연구소 (http://www.wah.or.kr/Accessibility/define.asp)
시스포유아이앤씨 마영희 주임
작성일 : 2013년 7월 5일
1. 웹 접근성이란?
월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹
콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고
하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹
접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못
이해하고 있는 것이 더욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못
이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이
돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나
서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을
위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이
편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품
및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고
있다.
월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web
Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로
정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그
내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷
전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될
수 있는 모든 콘텐츠로 확대하고 있다.

2. 2. 웹 접근성을 위한 4가지 원칙
1) 인식의 용이성
텍스트 아닌 콘텐츠 인식: 그림이나 사진 등을 제공할 때 이를 사용할 수 없는 경우를 대비해 텍
스트 설명을 제공해야 하며,영상매체의 인식: 동영상이나 오디오의 경우 청각장애인을 위한 음성
정보를 문자로 제공해야 한다.
색상에 무관한 인식, 이미지 맵 기법 사용 제한, 프레임 사용제한: 지도 등과 같이 여러 그림들이
나누어져 제공되는 경우, 마우스를 이용하지 못하는 사람들을 위해 나누어져 제공되는 곳을 키보
드 또는 대체 방법으로 이용할 수 있도록 제공해야 하며, 콘텐츠 구성 시 프레임 수는 최소화하
며, 사용한 프레임은 각각의 제목을 올바르게 제공해야 한다.
2) 운용의 용이성
깜박거리는 객체 사용제한: 또한 콘텐츠가 과도하게 깜박거리는 경우 이를 피할 수 있도록 구성
한다
키보드만으로 운용 가능: 마우스를 이용하지 못 하는 경우를 위해 키보드 또는 다른 입력장치를
이용해 모든 기능을 수행할 수 있어야 한다.
반복 네비게이션 링크: 이와 함께 페이지마다 반복되는 링크는 물론 핵심부분으로 직접 이동할
수 있도록 구성하고, 반응 기간 조절기능: 시간제한이 있는 콘텐츠 및 팝업창을 이용자가 제어할
수 있도록 해야 합니다.
3) 이해의 용이성
데이터 테이블 구성: 테이블에서는 테이블을 구성하는 데이터 셀의 정보가 충분히 전달될 수 있
어야 한다
논리적 구성: 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽도록 구성해야 한다.
온라인 서식 구성: 온라인 서식에 있어서도 서식 작성에 필요한 모든 정보를 제공하고 키보드로
서식간이동이 가능해야 한다.
4) 기술적 진보성
신기술의 사용: 마지막으로 스크립트, 애플릿 또는 플러그 인 등과 같은 부가 어플리케이션 콘텐

3. 츠는 자체적으로 기본적인 접근성을 가지고 있어야 한다.
별도 웹 사이트 제공: 이를 사용할 수 없는 상황에서도 콘텐츠를 이용할 수 있어야 한다. 웹 접근
성의 준수는 다양한 방법으로 웹에 접근하는 사람들에게 보다 쉽게 인터넷 콘텐츠를 활용할 수
있도록 구성하는 것으로 정보화 사회에 소외되기 쉬운 이웃과 함께 하는 따뜻한 디지털 세상을
만들어가는 초석을 마련하는 일이라 할 수 있다.
3. 쇼핑몰에서의 웹 접근성 (디자인)
한 조사 결과 인터넷 인구 65%정도가 쇼핑몰을 이용하는 것으로 나타났다
출처 : 웹접근성 향상 전략 세미나 자료
또한 최근 3개월 이내에 인터넷 쇼핑몰에서 상품을 구입한 경험이 있는 사람이 한국이 91.5%로
다른 아시아 국가 보다 높게 나타났다. 이처럼 한국은 인터넷을 통한 대부분의 활동을 쇼핑몰을
이용하는데 사용하고 있다. 더불어서 쇼핑몰에 대한 웹 접근성도 중요시 되고 있는 추세이다.
이후 내용에는 웹 접근성 지침 그 중에서도 디자인과 관련된 지침을 바탕으로 쇼핑몰에서의 웹
접근성에 대해 알아 보겠다.
91.5
0
10
20
30
40
50
60
70
80
90
100
한국 중국 대만 일본

4. 1) 색에 무관한 콘텐츠 인식
콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자나 흑백 디스플레이 사용자,
흑백 인쇄물을 보는 사용자가 색을 배제하여도 해당 콘텐츠를 인식할 수 있도록 제공해야 한다.
ㄱ)색에 의한 정보 제공: 차트나 그래프 등을 색으로 구분하여 표시하면 경조모드로 화면을 전환
하였을 경우, 모든 색이 회색으로 표시되므로 사용자는 색을 구분 할 수 없게 된다. 따라서 이 경
우에도 콘텐츠가 제공하는 정보를 인식할 수 있도록 색으로만 정보를 구분하지 않아야 한다.
ㄴ)무늬를 이용한 정보 제공: 서로 다른 정보를 무늬로 구분하여 표시하면 흑백 디스플레이 사용
자 흑백 인쇄물 사용자도 충분히 그 정보를 인지할 수 있다. 무늬와 색을 동시에 이용하면 색각
장애가 있는 사용자도 접근이 가능하다.
아래 이미지는 우리가 흔하게 볼 수 있는 달력 계획표이다. 달력 안에 교육일정과 회식일정이 명
확하게 색으로 구분되어 있어 보기가 편하다.
하지만 저시력자나 색맹, 색약, 시각장애인에게 위 달력이 어떻게 보일지 생각해 봐야한다. 아래
처럼 색의 구분이 어려워 흑백으로 보이는 상황이라면 위처럼 교육일정과 회식일정이 명확하게
구분되기는 어려울 것이다.

5. 따라서, 가장 서두에 제시된 명제처럼 색에 관계없이 인식될 수 있도록 별도의 노력이 필요하다.
교육일정을 원 모양으로 바꾸어 보았다.

6. 교육일정의 표시 모양을 바꾼 것에 불과하지만 모두가 표시된 내용을 이해할 수 있는 방법이 명
확하게 제시되었다. 사이트 내에 있는 모든 콘텐츠를 (특히 구분이 어려운 그래프, 차트 등의 밀
집 데이터)를 모든 사용자에게 효과적으로 인식시키는 것은 웹 접근성을 높이는 기본이며 모두가
수용할 수 있는 웹 환경을 만드는 방법이다.
지침과 관련된 쇼핑몰에서 사용한 이미지를 예로 들어 보겠다.
다음 그림은 쇼핑몰에서 고객의 회원 등급을 나타내는 이미지 이다. 일반인에게는 각 등급별로
이미지의 색이 상이하여 쉽게 구분할 수 있다.
하지만 색각이나 시각적 장애가 있는 사람에게는 아래 그림과 같이 보일 것이다.

7. 각 등급별로 등급이 텍스트로 쓰여져 있어 구분이 되겠지만, 시각장애인들에게는 한눈에 파악하
기에는 어려움이 있다.
단순히 색만 변화를 줄 것이 아니라, 각각의 등급별로 모양의 변화도 필요하다.
다음에 적절하게 사용된 쇼핑몰의 예시를 살펴보도록 하자.
각 등급별로 색상은 물론 모양에도 변화를 주어 명확히 구분되도록 디자인 하였다. 흑백으로 살
펴보면 다음과 같다.

8. 흑백으로 봤을 때도 각 등급 별로 모양이 틀려서 명확히 구분된다.
2) 텍스트와 배경간의 명도 대비
웹 페이지에서 보이는 핵심 텍스트 콘텐츠와 배경 간의 충분한 대비를 제공하여, 저시력자, 색각
이상자, 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 한다. 다만, 본문 콘텐츠에 단순히 장식
목적으로만 사용한 글자, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘
텐츠는 예외로 한다.
웹 페이지가 제공하려는 핵심적인 콘텐츠를 구성하고 있는 텍스트와 배경 간의 명도 대비는 4.5
대 1 이상이어야 한다.
콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14pt 이상의 굵은 폰트를 사용하는 경우
에는 명도 대비를 3:1까지 낮출 수 있다.
위를 보면, 좌측의 이미지처럼 배경색이 진한 회색일 경우 검은색 글씨는 잘 보이지 않지만, 우측
처럼 배경색이 연한 회색이라면 잘 보이는 것을 알 수 있다. 차라리 좌측의 배경이라면 흰색 계

9. 열의 텍스트를 사용하면 가독성이 더 높아졌을 것이다.
아래의 이미지는 위의 설명을 이해하기 쉽도록 만들어 본 예시화면 이다. NAVER MUSIC 서비스화
면을 명도만 다르게 하였더니, 상단 메뉴 영역의 텍스트는 거의 읽히지 않는다.
<네이버 뮤직 서비스 기본화면>

10. <네이버 뮤직 서비스 명도조절 화면 (명도 30% 다운)>
어두운 바탕에 어두운 글씨가 안 보이는 것은 당연한 현상임에도 사이트의 멋을 위해 이렇게 디
자인한 사례가 종종 발견된다. 반대로 흰 바탕에 옅은 회색 글씨를 사용하는 경우도 마찬가지로
가독성에 문제가 된다.
따라서, 웹 접근성 시행수칙에는 명도대비를 명확히 수치화 시켜서 그 기준을 달성하도록 하고
있다. 앞서 말한 4.5:1이라는 수치다.
막상 4.5:1 이라는 수치가 어느 정도의 명도차이인지 가늠하기 어렵다. 그래서 명도 차이를 알아
볼 수 있는 웹 도구를 소개하려고 한다.
1 ) Color Contrast Check(snook.ca)
http://www.snook.ca/technical/colour_contrast/colour.html
배경색이든 텍스트 색이든 설정해놓은 상태로 컬러 바(Bar)를 끌어서 원하는 색을 찾으면 명도차
이를 알려준다.

11. 2) Color Contrast Analyzer (Colors on web)
http://www.colorsontheweb.com/colorcontrast.asp
이 도구는 색상 넘버를 알고 있다면 간단히 이용할 수 있는 도구다. 예를 들어 배경색 #00000(블
랙) : 텍스트 #FFFFF (화이트)를 빈칸에 넣으면 21:1이라는 숫자가 나타나는 방식이다.

12. 지침과 관련된 쇼핑몰에서 사용한 이미지를 예로 들어 보겠다.
다음에 보이는 배너는 가운데 텍스트는 명도대비가 높아 확실히 구분이 되지만 세부 설명 텍스트
는 배경과 명도차이가 많이 나지 않아 확실한 구분이 어렵다. 내용을 파악하는데 영향을 주는 중
요한 텍스트이지만 그 역할을 잘 하지 못하고 있는 것이다.
위와 같은 그림도 하단의 텍스트는 배경과 명도대비가 확실해서 구분이 잘 되지만 맨 우측의 세
부텍스트는 폰트의 크기도 작고, 배경과의 명도 차이도 없어서 저 시력자 에게는 구분하는데 어
려움을 줄 수 있다.

13. 위 그림은 전화번호를 제외하고는 일반인에게도 구별하는데 어려움을 줄 수 있다. 제목과 이미지
가 명도 대비에 맞게 조절 되어야 한다.
단적인 예로 위의 그림을 보면 배경과 폰트의 명도 대비가 확실하여 일반인은 물론이고 저시력자,
장애인도 확실히 구분 지을 수 있다.
3) 명확한 지시사항 제공
본 검사 항목은 특정 요소를 가리키거나 지시사항을 전달하는 콘텐츠에 한정해 적용하는 것으로,
시각이나 청각 등과 같은 특정 감각에만 의존하여 제공해서는 안 된다는 것이다. 즉, 다른 감각을
통해서도 지시 사항을 인식하는데 문제가 없도록 제공해야 한다. 텍스트 콘텐츠와 대체 텍스트가
제공된 텍스트가 아닌 콘텐츠는 보조 기기를 통해 다른 감각으로의 전환이 가능하기 때문에 이들

14. 콘텐츠를 음성 콘텐츠로 변환하여 제공할 필요는 없다.
ㄱ) 색, 크기, 모양 또는 위치와 같은 정보에 대한 인식: 웹 콘텐츠에 접근하는 사용자들이 색, 크
기, 모양 또는 위치에 관한 정보를 인식하지 못하더라도 원하는 콘텐츠에 접근할 수 있도록 제작
되어야 한다. 예를 들어, 특정요소를 ‘동그란 버튼을 누르시오’또는 ‘오른쪽 버튼을 누르시오’라고
가리킬 때, 그 대상이 되는 버튼이 ‘동그란 버튼’ 또는 ‘오른쪽 버튼’이라는 대체 텍스트를 포함하
고 있지 않을 경우 시각 장애를 지닌 사용자는 어떤 요소를 지칭하는지 알 수 없다. 따라서 이러
한 경우, 가리키고자 하는 요소의 실제 명칭이나 그 요소가 포함하고 있는 대체 텍스트를 사용해
지칭하거나, 불가피하게 색, 크기, 모양, 위치와 같은 정보를 사용해 특정 요소를 가리킬 때는 이
를 보완할 수 있는 다른 정보를 제공해야 한다.
ㄴ)음성이나 음향 정보의 인식: 사용자에게 음성이나 음향을 사용해 지시 사항을 전달하는 경우
사용자가 소리를 들을 수 없더라도 전달하고자 하는 지시 사항을 인식할 수 있어야 한다. 예를
들어 온라인 시험 진행 중 사용자에게 비프음(Beep sound)으로 정답인지 오답인지를 사용자에게
알려주면, 청각 장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용자는 정답과 오답
여부를 확인할 수 없다. 따라서 이 경우에 비프음과 함께 정답과 오답 여부를 시각적으로 확인할
수 있는 수단을 제공하면 더 많은 사용자가 지시 사항을 인지할 수 있게 된다.
시각적인 지시나 위치를 사용하여 안내하면 화면의 일부를 확대하여 사용하는 저시력자나 시각
장애인의 경우 콘텐츠를 즉각적으로 찾아내기 어렵다.
일반인 이라면 안내문에서 제시한 것처럼 왼쪽(이전), 오른쪽(다음)을 선택하는 일은 어려운 일이
아니다. 하지만 시각장애인이라면 이처럼 간단해 보이는 선택도 어려운 일이 될 수 있다. 시각장
애인으로써는 화면 속의 상대적인 좌/우를 구분하기 어렵기 때문에 이것은 커다란 사용성의 제약
을 느낄 수 있는 안내문이라고 볼 수 있다. 따라서, 위의 안내문은 다음과 같이 개선 되어야 한다.
다음 페이지로 이동하려면 “오른쪽” 버튼, 이전 페이지로 이동하려면 “왼쪽” 버튼을 누르시오.
변경 후: 다음 페이지로 이동하려면 “다음”버튼, 이전 페이지로 이동하려면 “이전”버튼을 누르시오.
본문의 내용 외에 부가적인 설명이 들어가는 콘텐츠를 따로 만들어 링크하는 경우가 종종 있다.

15. 그리고 다음과 같이 안내한다.
일반인이라면 제시되어 있는 ‘관련 링크’를 찾아서 누르는 것은 어렵지 않은 일이다. 하지만 시각
장애인이라면 링크가 어느 곳에 위치하는지를 알 수 없을 것이다. 따라서, 페이지 내에 관련 링크
로 바로 이동할 수 있는 링크를 제공하는 등의 대안이 필요하다.
지침과 관련된 쇼핑몰에서 사용한 이미지를 예로 들어 보겠다.
위의 이미지에는 “바로 방문 자세히 보기”라는 문구의 버튼이 있다. 일반인은 버튼을 바로 찾아
쉽게 다음 페이지로 넘어 갈수 있다. 하지만 시각장애인은 이 문구를 볼 수 없기 때문에 위에서
말한 것과 같이 바로 가기 링크가 필요하다.
위의 그림은 명확한 지시사항 제공을 적절하게 적용한 예라고 할 수 있다. 명확하게 보이는 색을
이용하여 사용자가 보고 있는 화면에 대해 알려주었고, 시각장애인을 위해 선의 굵기 또한 구분
되게 하여 나타냈다

16. 4. 쇼핑몰의 세로 길이
위에 보이는 미국의 대표적인 쇼핑몰인 아마존은 메인 페이지의 세로길이가 1690PX정도이며 전
체적으로 여백을 주어 일반 사람들이나 장애인들이 내용을 파악하고 접근하기에 수월하다.
하지만 우리나라 쇼핑몰은 매출에 직결되는 상품을 메인 화면에 많이 배치해야 하는 특성상 빈틈
없이 상품을 배치 하다 보니 아래 그림과 같이 전체적인 페이지의 세로길이도 길어졌다.

18. 이처럼 세로길이가 늘어나다 보니 키보드를 이용해야 하는 장애인은 자연스럽게 키보드 운용수가
증가 하게 되고 한눈에 내용을 파악하기 힘들어졌다. 하지만 매출과 직결되는 메인 페이지의 콘
텐츠를 줄이기는 쉽지가 않다.
위에 보이는 쇼핑몰은 사용자의 접근성향상을 위해 콘텐츠를 적절하게 배치하여 디자인하였다.
앞서 보여진 사이트와는 세로길이와 여백에 많은 차이가 있다. 이처럼 콘텐츠를 줄이고 적절하게
배치하여 디자인 하면 사용자가 쇼핑몰을 이용하기 한결 수월해질 것이다.

19. 세로길이나 메인에 콘텐츠를 줄이기 쉽지 않아 아래와 같이 웹 접근성 대체사이트를 새로 디자인
하는 경우도 있다.
위와 같이 간단하게 디자인하여 오직 웹 접근성에만 맞는 사이트를 새롭게 추가하여 제공하였다.
세로길이를 자체적으로 줄일 수 없다면, 위와 같은 방법으로 새롭게 디자인 하는 대안을 찾는 것
도 좋은 방법이다.

20. 4. 결론
웹 접근성 준수방안의 내용을 보자면 지금까지 웹 표준 (크로스브라우징 포함)을 중심으로 사이트
를 제작한 업체들은 난국에 부딛히게 된다. 웹 접근성이 확보된 곳은 많지 않기 때문이다.
동영상에 자막을 넣고, 키보드로 모든 사용이 가능하도록 하고, 본문이 먼저 출력 되어야 하
는 등 다양한 문제가 산재해 있다. 웹 접근성에 맞추려면 기획부터 다시 시작하고 사이트를
리뉴얼, 심지어는 리런칭을 해야 하는 상황이다. 다행인 것은 이 법안을 준수하지 않았더라도
사이트를 운영할 수 있으며, 해당 사이트에 대해 사용자의 진정이 있을 경우에 해당 사이트
를 검토하고 시정명령을 내리게 되는 것이다. 하지만 누군가의 진정이 있고 인권위원회가 시
정권고를 하게 되면 웹 접근성 준수방안에 맞춰 사이트를 만들거나 금전적 배상(민사), 3천만
원 이하의 벌금(형사)등을 받게 된다.
현재 나와있는 웹 접근성은 대부분 시각 장애자 위주로 맞춰져 있습니다. 만약 다른 장애, 또
는 고령자들의 파악하지 못한 요청이나 진정이 있을 경우에 준수방안의 모든 것에 맞춰서
사이트를 제작했다면 법적인 문제를 피할 수 있는가? 하는 부분과, 웹 접근성의 취지에 맞는
것인가? 하는 부분입니다. 청각 장애자들을 위해 동영상에 자막을 넣도록 하는 기준도 있습
니다만 모든 것을 충족 할 수는 없다.
정보를 모두가 누리도록 하는 중요한 내용에도 불구하고 쇼핑몰들이 자신의 상품성을 표현
할 수 없다면, 그것 또한 차별이라고 볼 수도 있을 것이다.
예를 들면 쇼핑몰에서 신뢰감을 주는 블루계열의 색상을 주조색으로 사용하였다고 가정해
보자. 하지만 고령자가 될수록 파란색에 대한 인지력이 떨어지는 경향이 있다.
파란색 이미지 버튼이라면 이 버튼의 내용을 음성으로 제공해 주어야 한다. 가급적이면 신뢰
감을 주는 파란색 계열보다 고령자도 모두 인지할 수 있는 다른 색상을 사용하는 것이 정답
인지에 대해 생각해 보는 것도 필요하다.
웹 접근성은 도의적이고 인권적인 부분이므로 법적인 강제보다는 인식의 전환과 배려, 국가
적으로 그런 상황을 만들 수 있는 환경을 제공해야 한다고 생각한다.
휠체어가 올라갈 수 있도록 횡단보도의 턱을 낮추고 지하철이나 버스 등 운송수단을 사용할
때 불편함을 덜 수 있도록, 계단 외에 낮은 경사로를 만들어 건물 출입에 불편이 없는 법적
조취와 그에 대한 국가적 지원이 함께 되어야 한다고 본다. 쇼핑몰에 대한 웹 접근성도 마찬
가지다. 일반인이든 장애인이든 자신이 원하는 상품을 쉽게 구매할 수 있게 작은 배려를 제
공해야 한다고 생각한다.