검색마케팅센터

웹접근성의 이해 『 아름다운 세상을 위한 첫 걸음 』

2013.03

NHN 서치마케팅㈜ / SMD센터 / SM 서비스실

Web Design Consulting 팀

INDEX 『 아름다운 세상을 위한 첫 걸음 』

현황보기 이해하기 알아보기

Chapter 1. Chapter 2. Chapter 3.

『 장애 / 비장애 인구 현황 『 웹접근성 의 필요성 『 웹접근성 지침 이해

70억 인구

10억 명

- 참고 - 세계보건기구 (WHO)와 세계은행(WB) 발표 ‘세계 장애 보고서’

장애인구수

숫자보기 현황보기 이해하기 알아보기 ●

후천적 장애

90.5%

268만

2011년 보건복지부 ‘장애인 실태조사’ 발표, 우리나라 추정장애인수

+α

WHO 세계보건기구가 발표한 보고서에 따르면 전세계 70억 명 중 10억 인구. 즉 15%가 장애인 입니다.

우리나라의 경우 1만 명 중 561명꼴로 장애인수는 전체 인구의 약 6%에 해당하지만, 사고/질병 등의 후천적 장애가 대부분이며 현재 고령화 사회의

이슈를 반영하면, 실제 추정 장애인수는 훨씬 더 많을 것으로 예상됩니다.

●

인터넷 이용률

- 참고 - 2011년 NIA 한국 정보화 진흥원 및 한국장애인 인권포럼 산하 ‘Web Watch’

2005년 2007년 2009년 2010년

24.8% 차이

72.8%

76.3% 77.6%

78.3%

41.0% 49.9%

52.7%

53.5%

숫자보기 현황보기 이해하기 알아보기 ●

●

NIA 한국 정보화 진흥원에 따르면, 2005년 이후 최근까지 장애인의 인터넷 이용률은 꾸준히 증가하고 있고 비장애인이 인터넷을 이용하는 비율보다

큰 폭으로 성장하고 있습니다. 하지만 비장애인과 장애인이 WEB을 이용하는 비율은 24.8%의 차이를 보이고 있어, 아직은 장애인을 위한 웹 환경이

충분히 마련되어 있지 않음을 시사하고 있습니다.

우리의 서비스를 어떻게 이용할지 상상해보신 적 있으신가요?

장애인들이 우리의 서비스를 어떻게 이용할지 상상해보신 적 있으신가요? 시각장애인은 스크린화면을 읽어주는 스크린 리더기로 웹을 이용합니다.

(* 스크린 리더기 사용 동영상보기 참조) 정교한 마우스 조작이 어려운 지체장애인은 모니터 위에 센서를 설치하여 움직임에 따라 마우스 커서를 조작하는

보조기구인 ‘스마트 나브’ 의 도움을 받기도 하고, 직접 ‘마우스 스틱’을 모니터 위에 터치하여 마우스 조작을 대신하기도 합니다.

평소 환경적 제약으로 인해 상대적으로 실내에서 지내는 시간이 많은 그들에게 ‘웹’은 세상과 ‘소통’할 수 있는 유일한 창구입니다.

지체장애인 인터넷이용 보조기구 ‘스마트 나브’ 지체장애인 보조기구 ‘마우스 스틱’ 시각장애인 보조기기 ‘스크린 리더기’

* 스크린 리더기 사용 동영상보기 >

상상하기 현황보기 이해하기 알아보기 ●

●

“웹의 힘은 보편성 에 있다.”

“웹은 장애에 구애 없이 모든 사람이 접근하고 이용할 수 있어야 한다.”

WWW(월드와이드웹)의 창시자인 ‘팀 버너스 리’ 경은 웹이 가진 가장 큰 힘은 ‘보편성’이며, 누구나 웹을 공유할 수 있어야 한다고 말했습니다.

웹접근성이란 웹사이트에서 제공하는 정보에 장애인, 고령자 등도 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말합니다.

국내에서는 4월11일부터 ‘장차법’ 시행이 모든 법인 웹사이트로 확대되기 때문에 웹접근성의 중요성이 더욱 강조되고 있습니다.

웹접근성이란 현황보기 이해하기 알아보기 ●

●

: Tim Berners Lee

웹접근성 – 아름다운 세상을 위한 첫걸음 7

『장애인 차별금지 및 권리구제 등에 관한 법률』

장차법

모든 생활영역에서 장애를 이유로 한 차별을 금지하고 차별받은 사람의 권익을 구제함으로써

장애인의 완전한 사회참여와 평등권 실현 을 목적으로 함.

준수하기

3년 이하 징역

2013년 4월 11일.

장차법, 모든 법인 웹사이트로 확대 시행

벌금 3천만원

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 8

웹접근성 소송사례 (미국) Target사 (대형소매업체)

[ 2008.9.1 Tartet 메인페이지 ]

NFB (미국시각장애인연합회)

VS

[ 2008.9.1 NFB 메인페이지 ]

사례보기

미국 시각장애인 연합회(NFB)에서 웹접근성을 준수하지 않은 Target사를 대상으로 소송을 제기한 사례입니다.

사이트에 대체 텍스트가 제공되지 않았고 마우스가 아닌 키보드로는 상품을 구매할 수 없어 시각 장애인을 차별했다는 이유였습니다.

미국장애인법은 NFB의 손을 들어주었으며, Target사는 소송에 참여한 개인들에게 각 7천불씩(총 한화 60억 원)을 배상하게 되었습니다.

국내에서도 동일한 사유로 시각장애인이 대한항공, 도시철도공사에 소송을 제기하여 진행중인 사례가 있습니다.

참고. 미국 장애인법 (ADA : Americans with Disabilities Act)

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 9

인증마크

Q. 웹접근성을 준수한 사이트. 어떻게 알 수 있나요?

현황보기 이해하기 알아보기 ●

●

웹접근성이 우수한 사이트는 전문기관의 심사를 통해 “웹접근성 인증마크”를 획득할 수 있습니다. 인증마크를 획득하면 사이트 상에 표기할 수 있기 때문에 웹접근성을 준수한 사이트인지를 한 눈에 확인할 수 있습니다. 그렇다면 관련 웹접근성 인증마크에는 어떤 것들이 있는지 알아보겠습니다.

웹접근성 – 아름다운 세상을 위한 첫걸음 10

한국정보화진흥원

웹접근성연구소

한국신체장애인복지회

한국웹접근성 평가원

한국시각장애인연합회

한국웹접근성평가센터

한국장애인인권포럼

웹와치

• 심사주기: 연 3회 • 비용: 금융권 협의 중 • 심사기간: 약 2~3개월

• 심사주기: 상시 접수 • 비용: 200만원 • 심사기간: 4주 이내

• 심사주기: 상시 접수 • 비용: 협의(웹 페이지 수 등) • 심사기간: 3주 이내

• 심사주기: 상시 접수 • 비용: 협의(사이트 규모에 따라 별도 수수료)

• 심사기간: 3주 이내

• 심사주기: 상시 접수 • 비용: 협의(웹 페이지 수 등) • 심사기간: 15일 이내

『웹접근성 우수사이트 인증마크』 (Web Accessibility Quality Site Certification Mark)

WA인증마크

웹발전연구소, 한국IT서비스학회, 조인스닷컴 공동

한국웹접근성인증위원회

• 웹접근성연구소 http://www.wah.or.kr/

• KWAC 민간단체 결성한 심의기구

• 한국정보화진흥원 http://www.nia.or.kr/

• 한국웹접근성평가원 02-518-5730 http://www.wau.or.kr/

• 한국장애인인권포럼 http://www.ableforum.com/

• 웹와치 02-2678-0078 http://webwatch.or.kr/

• 한국웹접근성평가센터 02-973-0073 http://www.kwacc.or.kr

인증마크 현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 11

인증마크 현황보기 이해하기 알아보기 ●

●

Q. 웹접근성 인증마크를 획득하려면 웹사이트를 어떻게 구성해야 하나요?

웹접근성을 준수하기 위해 마련된 국내 지침으로는 “한국형 웹 콘텐츠 접근성 지침 2.0(KWCAG2.0)”이 있습니다. 인식의 용이성/운용의 용이성/견고성/이해의 용이성의 총 4개 항목과 13개 지침, 22개 검사항목으로 구성되어 있으며, 다음 장에는 전체 구성의 70%를 차지하는 인식의 용이성/운용의 용이성의 주요내용에 대해 알아보겠습니다.

웹접근성 – 아름다운 세상을 위한 첫걸음 12

. 대체 텍스트 제공 텍스트가 아닌 콘텐츠는 의미를 이해할 수 있는 대체텍스트를 제공해야 한다.

시각장애/저시력자를 위한 이미지 대체 수단

<img src=“/images/banner_1baksu.jpg” alt=“박수건달”>

alt=“text”

가이드>인식의 용이성

시각장애인은 보면서 정보를 받아들이지 못하기 때문에 화면을 읽어주는 보조기구인 ‘스크린 리더기’를 사용하여 웹을 이용합니다.

스크린 리더기는 웹에 존재하는 텍스트를 사용자에게 읽어주며 ‘보이는 정보’를 ‘들리는 정보’로 변환해주는 감각 대체기구입니다.

하지만 텍스트가 아닌 콘텐츠는 스크린 리더기가 읽을 수 없습니다. 따라서 이미지 등 텍스트가 아닌 콘텐츠에는 ‘대체텍스트’를 제공하여

스크린 리더기가 읽을 수 있도록 해야 합니다.

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 13

. 캡차코드 대체 수단 제공 시스템 자동가입방지를 위해 시각적/청각적 CAPTCHA를 동시에 제공한다.

가이드>인식의 용이성

시각장애/저시력자를 위한 청각적 음성지원

컴퓨터 프로그램을 통해 자동으로 회원가입 되는 것을 방지하기 위해, 시스템이 구별하지 못하도록 흘려놓은 위와 같은 이미지를 ‘캡차코드’라고 합니다.

시각장애인이나 저 시력자의 경우 일반인도 간혹 헷갈릴 정도로 인식이 어려운 위의 캡차코드의 정보를 알 수 없기 때문에, 시각적인 이미지와 더불어

청각적 음성지원의 대체수단을 제공하여 모든 이가 캡차코드를 식별하는데 어려움이 없어야 합니다.

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 14

. 멀티미디어 대체 수단 제공 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체수단을 제공해야 한다.

수화 or 대본 or 원고

가이드>인식의 용이성

청각장애자를 위한 멀티미디어 대체 수단 제공

앞 장에서는 인식의 용이성 중에서 시각장애인이나 저시력자를 위한 대체수단을 안내해드렸는데요.

이번에는 청각장애인을 위한 지침을 알아보겠습니다. 동영상이나 음성과 같은 멀티미디어 콘텐츠의 경우, 청각장애인은 소리를 들을 수 없기 때문에

소리를 대체하는 수단(자막, 수화, 대본, 원고) 중 한 가지 이상을 함께 제공하여 눈으로도 콘텐츠를 인식할 수 있도록 해야 합니다.

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 15

. 콘텐츠 명료성 (색상) 콘텐츠는 색에 관계없이 인식될 수 있도록 텍스트나 무늬로 보완하여 전달한다.

“ 색상을 구분할 수 없으니 뭐가 인구전체이고, 장애인인지 알 수가 없네…

가이드>인식의 용이성

색맹 / 색약자가 인식할 수 있는 콘텐츠 표기

현황보기 이해하기 알아보기 ●

●

왼쪽 그래프, 색맹/색약자에게 어떻게 보일까요?

웹접근성 – 아름다운 세상을 위한 첫걸음 16

2005년 2007년 2009년 2010년

72.8%

41.0%

76.3%

49.9% 52.7%

53.5%

77.6% 78.3%

인구전체

장애인

. 콘텐츠 명료성 (색상)

색맹 / 색약자가 인식할 수 있는 콘텐츠 표기

가이드>인식의 용이성

콘텐츠는 색에 관계없이 인식될 수 있도록 텍스트나 무늬로 보완하여 전달한다.

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 17

동해물과

동해물과

백두산이

백두산이 1.14

1.24

8.02

6.64

이게 바로 4.5:1

. 콘텐츠 명료성 (명도대비) 콘텐츠와 배경간의 명도대비는 최소 4.5대1 이상이어야 한다.

좌, 우 어떤 이미지의 텍스트가 더 잘 읽히나요?

약시자를 위한 콘텐츠 가독성

가이드>인식의 용이성

좋은 웹사이트는 콘텐츠 정보를 잘 읽혀지도록 전달하는 ‘가독성’이 우수해야 합니다. 웹접근성에서는 콘텐츠와 배경간의 명도대비를 최소 4.5대 1로

규정하고 있는데요. 약시자나 저시력자뿐 아니라 모든 이들이 헷갈림 없이 콘텐츠를 잘 인식할 수 있도록 최소한의 명도대비를 유지해주어야 하며,

추출된 배경색과 콘텐츠의 컬러 색상 값을 컬러체크 사이트에서 각각 입력하면 두 컬러 사이의 명도대비 차이를 확인하실 수 있습니다.

* 컬러체크 해보기 : http://www.snook.ca/technical/colour_contrast/colour.html

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 18

1. 모든 기능은 키보드만으로(도) 접근할 수 있어야 한다.

. 키보드 접근성

앞서 설명했던 미국의 Target사나 국내 대한항공의 소송사례에서 본 것과 같이, 웹사이트의 모든 기능은 마우스 뿐만이 아니라 키보드로도 조작하고

운용할 수 있도록 설계되어야 합니다. 마우스 조작이 어려운 지체장애인이나 시각장애인 뿐만 아니라 마우스를 사용할 수 없는 환경에 있는 비장애인

역시 키보드 tab버튼으로 커서 이동시킬 수 있어야 합니다. 더불어 커서가 이동할 때마다 포커스가 표시되는지도 체크해야 합니다.

가이드>운용의 용이성

운용의 용이성 : 사용자 인터페이스는 조작 가능하고 네비게이션할 수 있어야 한다

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 19

1. 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구분해야 한다.

. 키보드 접근성

1

2 3

이번에는 키보드로 포커스가 이동되는 순서에 대해서 알아보겠습니다. 수평으로 나열된 콘텐츠는 tab버튼을 누를때마다 왼쪽->오른쪽으로 커서가

이동 되는 것이 기본입니다. 아이디(①)를 입력하고 바로 로그인 버튼(③)을 클릭하는 경우는 없겠죠? 포커스 이동 순서는 일반 유저가 웹을 이용하는

상식적이고 논리적인 순서에 따르게 되며, 다음/이전 입력 서식으로 모두 초점 이동이 가능해야 합니다.

“다음 으로 이동

Tab 버튼”

“이전 서식 으로 이동

Shift + tab 버튼”

가이드>운용의 용이성 현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 20

1. 페이지, 프레임, 콘텐츠 블록에는 타이틀을 제공해야 한다.

. 편리한 네비게이션

가이드>운용의 용이성

시각장애인이 이용하는 보조기구인 스크린 리더기를 통해 페이지가 이동하는 모습을 가정해 볼까요?

지금 도달해 있는 화면이 어느 화면인지를 즉각 읽어주지 않으면 사용자들은 현재 내가 어디에 있는지를 알기 어려울 것입니다.

현재 페이지를 알기 위해 공통된 메뉴를 넘어가서 콘텐츠 내용부분까지 커서를 전진해야만 한다면 얼마나 불편할까요? 그래서 현재 내가 위치한

페이지뿐만 아니라 다음으로 이동할 페이지 등 모든 콘텐츠 블록에 각 페이지의 타이틀을 제공하여 스크린 리더기가 먼저 읽을 수 있도록 해야 합니다.

현황보기 이해하기 알아보기 ●

●

웹접근성 – 아름다운 세상을 위한 첫걸음 21

1. 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

. 편리한 네비게이션

<a href="#content" class="skip">본문 바로가기</a>

혹은 메뉴 건너뛰기

“모든 페이지, 모든 콘텐츠를 tab버튼으로 이동하다 보면 매번 반복되는 과정에 본문 콘텐츠를 접근하기 어려울 수 있어요. 그래서, 반복되는 영역 (상단메뉴 등) 은 건너뛰고 바로 본문으로 접근할 수 있도록 해주세요 “

가이드>운용의 용이성 현황보기 이해하기 알아보기 ●

●

모든 페이지를 이동할 때마다 Tab을 사용하여 순차적으로 커서를 이동하다 보면, 일반적으로 사이트의 상단에 위치한 메뉴 등은 매 페이지마다

커서 이동을 반복해야 하므로 오히려 불편함을 초래합니다. 그래서 사용자 선택에 의해 반복되는 부분을 건너뛸 수 있는 링크를 제공해야 합니다.

이것을 ‘스킵 네비게이션(Skip Navigation)’이라고 하며, 사이트에 ‘본문 바로가기’ 혹은 ‘메뉴 건너뛰기’로 표시합니다.

웹접근성 – 아름다운 세상을 위한 첫걸음 22

인식의

용이성

운용의

용이성

견고성

이해의

용이성

텍스트가 아닌 콘텐츠에는 대체텍스트를 제공해야 한다. 멀티미디어 콘텐츠는 대체수단을 제공해야 한다. 콘텐츠는 명확/명료하게 전달해야 한다.

콘텐츠는 키보드로 접근할 수 있어야 한다. 콘텐츠를 읽고 사용하는데 충분한 시간을 제공해야 한다. 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다. 콘텐츠는 쉽게 네비게이션 할 수 있어야 한다.

지침 1- 3

지침 2- 4

콘텐츠는 읽고 이해하기 쉬어야 한다. 콘텐츠의 기능과 실행결과는 예측 가능해야 한다. 콘텐츠는 논리적으로 구성해야 한다. 입력오류를 방지하거나 정정할 수 있어야 한다.

지침 3- 4

지침 4- 2

웹콘텐츠는 마크업 언어의 문법을 준수해야 한다. 웹 애플리케이션은 접근성이 있어야 한다.

『한국형 웹 콘텐츠 접근성 지침』 (Korean Web Content Accessibility Guide)

KWCAG 2.0

“한국형 웹 콘텐츠 접근성 지침 2.0 (KWACAG 2.0)” 중 70%를 차지하는 ‘인식의 용이성’과 ‘운용의 용이성’의 주요 내용에 대해 살펴보았습니다.

이 외에도 컨텐츠를 읽고 이해하기 쉬워야 하는 ‘이해의 용이성’ 과 마크업언어의 문법을 준수해야 하는 ‘견고성’ 의 항목까지 총 4개 원칙, 13개 지침,

22개 검사항목으로 구성되어 있습니다. ( * 웹콘텐츠 접근성 지침 2.0 전문 보러가기 )

웹접근성 – 아름다운 세상을 위한 첫걸음 23

웹접근성

기업의 사회공헌! 모두가 함께하는 아름다운 웹세상을 만드는 것부터

시작하면 어떨까요?

= “모든 사람”을 위한 것

장애/비장애 모두의 편리한 웹환경을 위한 첫걸음!

검색마케팅센터

감사합니다 『 아름다운 세상을 위한 첫 걸음 』

2013.03

NHN 서치마케팅㈜ / SMD센터 / SM 서비스실

Web Design Consulting 팀