Embed Size (px)
Citation preview
1. 들어가 -1
1
이 사람을 도 다 !!
이 사람을
보로 만든다 !!
- 리모트 콘트롤, 폰, 웹 사이트를
부모님이, 아이들이, 생님이 어떻게 이용하십니까 ?
1. 들어가 -2
2
牛山之木 (우산지목) ≒
우산의 나 들 일 이 아름다웠다.
하지만, 사람들 우산에는 나 가 없다라고 믿음
맹 자
"The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect."
"The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect."
Tim Berners-Lee (웹 창시 )Tim Berners-Lee (웹 창시 )
u 하지만, 우리의 웹 재 어떠한가 ?
1. 들어가
3
웹 근 고 =
인 상의 경사로를 만들어 주자
웹 근 고 =
인 상의 경사로를 만들어 주자
다리가 아 때
축구, 등산을 하고 난 뒤
거운 짐을 들고 다닐 때 등
키보드를 활용하지 못할 때
사양 컴퓨 , 모뎀 등 통신환경이 좋지 않을 때
시끄러운 환경에 놓여 일을 때 동 상 보 등
웹 근 소개 동 상 : http://www.kado.or.kr/wa/data/wa_WMV_512Kbit_stream.wmv
u 개발 : 2008년 9월 ~ 2009년 3월(3월 18일 발표)
u 구성 : 이미지에 한 체 텍스트 제공 등 18개로 구성
2. 인 웹 콘텐 근 지침
4
u개발자 : 김석일 교수(충북 학교)외 4인 & KADO
u 참고지침 : 미국 재활법 508조 기 & W3C WAI WCAG 1.0
※ TTA 단체표 으로 상 하여, 2004년 12월 표 채택, 2005년 12월 국가표
u 구성 : 4개 지침 14개 세부항목
- 인식의 용이성 (Perceivable), 운용의 용이성 (Operable), 이해의 용이성
(Understandable), 기술 진보성 (Robust)
인 웹 콘텐 근 지침 개요인 웹 콘텐 근 지침 개요
웹 근 향상을 한 국가표 가이드라인웹 근 향상을 한 국가표 가이드라인
http://iabf.or.kr/Guide/kwcag10.pdf
http://iabf.or.kr/News/NoticeView.asp?board=notice&bseq=2860
3. 웹 근 향상을 한 국가표 가이드라인
5
체크리스트1
(1) 이미지의 의미나 목 을 이해할 있도록 한 체텍스트를 공해야 한다.
※ 의미가 있는 이미지의 경우 체 텍스트를 의미나 능이 동일하게 공
※ 의미가 없는 이미지의 경우 체 텍스트를 공 (alt="") 로 공
사사
6
부 한 사부 한 사 RecommendationRecommendation
음 로비스 공
음 로비스 공
3. 웹 근 향상을 한 국가표 가이드라인
7
안안
1. 웹 근 자동평가 도구를 통한 검
(http://www.iabf.or.kr/Lab/Kadowah/Kadowah.asp 다운로드)
- KADO-WAH 이용(100% 달 )
3. 웹 근 향상을 한 국가표 가이드라인
8
2. 동 평가 : 한 체 텍스트 공 여부
- 웹 개 이 공공 의 담당자를 시하고 체 텍스트를 단 히
공하는 에 르는 경우가 많음
(단 일명 공, ‘~ 하십시요’ 등의 경어체 사용 등의 사 다 생)
- 이에 소스 분 , 라우 , Firefox Web Developer Extension을 통한
동 검 필요
3. 웹 근 향상을 한 국가표 가이드라인
9
u 명쾌하고 짧 체 텍스트를 공하자 !!
- ‘링크’, ‘여 ’, ‘클릭’ 등의 단어는 사용하지 말자
- ‘ ~ 하십시요, ~ 니다’ 등 친 한(?) 명을 자 하고 짧게
- ‘사진 1’, ‘사진 2’, ‘사진 3’ 등 의미한 체 텍스트를 지양
- 일명을 체 텍스트로 공하지 마라 !!
u 신규 & 이용자가 리는 이미지에 한 체 텍스트 공 안 마
u 보안, 메일링 비스, 회원가입 인증 등 부가 비스에도 체 텍스트 공
3. 웹 근 향상을 한 국가표 가이드라인
10
체크리스트2
경 이미지가 의미를 갖는 경우, 경 이미지의 의미를 이해
할 있도록 체 콘텐 를 공해야 한다.
※ 의미가 있는 이미지는 경 이미지로 사용하지 않는 것이 람직함
경이미지 활용
3. 웹 근 향상을 한 국가표 가이드라인
11
안안
구분 평가 법
1) 경 이미지
① 라우 에 체 콘텐 해 보 : Ctrl + A
(이미지 에 택 지 않는 역 )
② 체 콘텐 에 지 않는 이미지를 아 이미지 역에
- Firefox 라우 른쪽 마우스 클릭 → ‘ 경그림보 ’ 택
2) 보를 이미지만
로 공하는
지의 여부 평가
① 스타일을 거하여 경 이미지의 체 보를 공하는지 여부를 평가
(Firefox 라우 메뉴 ‘보 ’ -> ‘ 스타일’ --> ‘스타일 거’ 택)
--> 스타일 거 후, 보가 동일하면
--> 스타일 거 후, 보가 동일하지 않 면, 미
3. 웹 근 향상을 한 국가표 가이드라인
12
체크리스트
3
동 상, 음 등 티미 어 콘텐 를 이해할 있도록 체
단(자막, 원고 는 화)를 공해야 한다.
* 실시간 송이라도 체 단을 공하여야 하나, 외로 인 할 있음
사사
3. 웹 근 향상을 한 국가표 가이드라인
13
Best
Practices
http://www.iabf.or.kr/
http://www.webaim.org/intro/
3. 웹 근 향상을 한 국가표 가이드라인
14
안안
동 상에 한 자막, 원고 는 화 공 여부 검
* UCC에 한 사 (http://www.youtube.com/?gl=KR&hl=ko)
3. 웹 근 향상을 한 국가표 가이드라인
15
체크리스트
4
색상을 하여도 원하는 내용을 달할 있도록, 색상 이
외에도 명암이나 로 콘텐 구분이 가능해야 한다.
사례 2 : Jim Thatcher 홈페이지
(색깔과 특수문자(*) 동시제공 )
사례 2 : Jim Thatcher 홈페이지
(색깔과 특수문자(*) 동시제공 )
사례 1 : **청 홈페이지
(색깔만으로 보제공)
사례 1 : **청 홈페이지
(색깔만으로 보제공)
X
3. 웹 근 향상을 한 국가표 가이드라인
16
부 한사
부 한사
3. 웹 근 향상을 한 국가표 가이드라인
17
Vischeckhttp://www.vischeck.com/vischeck/vischeckImage.php
후지쯔 Color Doctor (색맹 시험)http://design.fujitsu.com/en/universal/assistance/colordoctor/download.html
안
흑 린 로 출 할 경우 콘텐 인식에 가 없는지 ?흑 린 로 출 할 경우 콘텐 인식에 가 없는지 ?
3. 웹 근 향상을 한 국가표 가이드라인
18
체크리스트
5
버 이미지 맵을 공할 경우, 해당 내용 능을 사용할
있는 체 콘텐 를 공해야 한다.
* 지리 보시스템(GIS) 외로 인 할 있음
3. 웹 근 향상을 한 국가표 가이드라인
19
안안
1) 가능한 버 이미지 맵을 사용하지 말고 클라이언트 이미지 맵 사용
2) 버 이미지 맵 사용여부 검 : 페이지 소스에 ismap 사용 여부를 검
3) 버 이미지 맵을 사용할 경우
- 키보드로 이용이 가능한 체 단이 있는지 검
3. 웹 근 향상을 한 국가표 가이드라인
20
체크리스트
6
임을 공할 경우, 임의 내용을 이해할 있도록
한 목(title 속 )을 공해야 한다.
3. 웹 근 향상을 한 국가표 가이드라인
21
안안
1) 웹 근 자동평가 도구를 통한 검
- KADO-WAH 이용(100% 달 )
2) 한 임 목을 부여하 는지 평가할 것 !!
- 개 사에 자동평가도구만을 통과하도록 많이 작함
- 페이지 소스에 <frmae> 는 <iframe> 등을 아, 임에 합한
<title>을 공하는지 악할 것 !!
3) 임 한 페이지에 가 최소한 로 사용하는 것이 람직
3. 웹 근 향상을 한 국가표 가이드라인
22
체크리스트
7
깜빡이는 콘텐 를 공할 경우, 사 에 경고하고 깜빡임을
회 할 있는 단을 공해야 한다.
※ 깜 임 : 당 3~49번을 깜 이는 콘텐
http://tools.webaccessibile.org/test/check.aspx
3. 웹 근 향상을 한 국가표 가이드라인
23
체크리스트
8모든 능을 키보드로 이용할 있어야 한다.
3. 웹 근 향상을 한 국가표 가이드라인
24
o tab 키를 이용하여 모든 능에 근할 있는 지를 악 !!
- <shift> + <tab>로 거꾸로 이동할 있는 지를 악 !!
부 한사
부 한사
안안
3. 웹 근 향상을 한 국가표 가이드라인
25
체크리스트
9
복 는 링크를 건 뛸 있도록 건 뛰 링크
(skip navigation)를 공해야 한다.
웹 콘텐츠는 반복 인 네비게이션 링크를 뛰어넘어
페이지의 핵심부문으로 직 이동할 수 있도록 구성하여야 한다
◈ 웹 콘텐 상에 복 비게이션 링크
개체가 포함 어 있 며, 이 링크 객체가
콘텐 의 핵심부 보다 읽어주도록
구 경우에는 이들 링크들의 읽 를
생략하고 직 콘텐 의 메인부 로
직 이동할 있도록 링크를 공
사례 1 : CNN 홈페이지
(뉴스로 로 이동)
사례 1 : CNN 홈페이지
(뉴스로 로 이동)
3. 웹 근 향상을 한 국가표 가이드라인
26
안안
3. 웹 근 향상을 한 국가표 가이드라인
27
체크리스트
10
시간 한이 있는 콘텐 를 공할 경우, 시간 어 능을
공해야 한다.
※ 외사항 : 경매, 실시간 게임 등과 같이 시간 한이 필 인 콘텐
3. 웹 근 향상을 한 국가표 가이드라인
28
체크리스트
11
새 ( 업 포함)을 공할 경우, 사용자에게 사 에 알 야
한다.
3. 웹 근 향상을 한 국가표 가이드라인
29
체크리스트
12
데이 테이 을 공할 경우, 테이 의 내용을 이해할 있는
보( 목, 요약 보 등)를 공해야 한다.
<table class="data" summary=“부산지역의 3일간의 일 보로, 날씨 상 과
강 확률 보를 공">
<caption>부산지역의 3일간 일 보</caption>
AA
BB
3. 웹 근 향상을 한 국가표 가이드라인
30
체크리스트
13
데이 테이 을 공할 경우, 목 과 내용 을 구분할
있어야 한다.
<table>
<thead>
<tr>
<th>번 </th>
<th> 목</th>
<th> 일</th>
<th>작 자</th>
<th>작 일</th>
<th>조회</th>
목 역 : <th>
내용 역 : <td>
3. 웹 근 향상을 한 국가표 가이드라인
31
체크리스트
14
해당 페이지를 잘 이해할 있도록 페이지 목(<title>)을 공
해야 한다.
사사
3. 웹 근 향상을 한 국가표 가이드라인
32
체크리스트
15콘텐 는 논리 인 로 구 어야 한다.
평가사항 : 콘텐 간의 치 , Tab 이동의 논리 , 식(form) 간의
이동
1 2
3
3. 웹 근 향상을 한 국가표 가이드라인
33
체크리스트
16라인 식을 공할 경우, 이 (<label>)을 공해야 한다.
3. 웹 근 향상을 한 국가표 가이드라인
34
체크리스트
17
애 릿, 러그인(ActiveX, 래시) 등 부가 애 리 이션이 공
하는 경우, 해당 애 리 이션이 자체 인 근 을 하거나
는 사용자가 체 콘텐 를 택하여 이용할 있어야 한다.
3. 웹 근 향상을 한 국가표 가이드라인
35
체크리스트
18
마크업 언어로 구 할 있는 능(링크, 식, 버튼, 페이지
목)을 자 스크립트로만 구 하지 말아야 한다
Firefox Web Developer extensionFirefox Web Developer extension
u Disable 메뉴 : Disable JavaScript를
à 신 사용(지침 13번) 검 가능
3. 웹 근 향상을 한 국가표 가이드라인
36
4. 웹 근 평가 법
u 평가 략 1 : IE외의 라우 를 다운로드 자 !!
한국 모질라 로 트
http://www.mozilla.or.kr/한국 모질라 로 트
http://www.mozilla.or.kr/페라 라우
http://www.opera.com/페라 라우
http://www.opera.com/
37
4. 웹 근 평가 법
u 평가 략 2 : 인 웹 콘텐 근 지침을 알아보자 !!
- 지침에 한 략 인 이해( 보통신 근 향상 표 화 포럼
(http://www.iabf.or.kr ) 웹사이트 자료실에 다운로드 가능
http://www.iabf.or.kr/Pds/WalVi
ew.asp?board=wal&pg=3&bseq
=2230&md=&sf=&ss=
http://www.iabf.or.kr/Pds
/StandardView.asp?boar
d=relatstand&pg=2&bseq
=632&md=&sf=&ss=
http://iabf.or.kr/News/Notice
View.asp?board=notice&bs
eq=2860
38
4. 웹 근 평가 법
u 평가 략 3 : 자동평가 도구를 활용하자 !!
보통신 근 향상 표 화 포럼
http://www.iabf.or.kr/
보통신 근 향상 표 화 포럼
http://www.iabf.or.kr/Firefox Web Developer extension
https://addons.mozilla.org/firefox/60/
Firefox Web Developer extension
https://addons.mozilla.org/firefox/60/
39
4. 웹 근 평가 법
Firefox Web Developer extensionFirefox Web Developer extension
u Disable 메뉴 : Disable JavaScript를
à 신 사용(지침 13번) 검 가능
u CSS 메뉴 : Disable Style à All style 지
-> 페이지의 논리 구 (지침 11) 검 가능
u Image 메뉴 : Display alt attributes, Outline image à images
without alt attributes
à 체 텍스트 공(지침 1) 여부 검 가능
u Tools 메뉴 : Validate HTML, Section 508, WAI
à 웹 근 표 여부 자동 평가
40
4. 웹 근 평가 법
q 웹 근 Toolbar 이용
o AIS : http://www.visionaustralia.org.au/ais/toolbar/
o WAVE : http://www.wave.webaim.org/index.jsp
41
4. 웹 근 평가 법
q 타 웹 근 평가 로그램
- 재 한국어 품 로는 한국 보 화진흥원에 공하는 “KADO-
WAH”, “A-Prompt” 한국어 버 , 우리인 Coolcheck 등이 있음
* 타 해외 로그램 http://www.w3.org/WAI/ER/existingtools.html 고
42
5. 결 론
Back to the BasicBack to the Basic
장애인, 노인 등 모든 사람이 (Possible)
손쉽게 이용하며 (Easy)
원하는 것을 빨리 (Fast) 할 있는 웹 사이트로
AccessibilityUniversal Design
Usability
Customer Satisfaction
43
5. 결 론
ü 장애인, 노인 등도 우리사회의 구 원 로 생각하는 인식의
환이 필요
ü 이 사람을 편리하게 도 주는 상 만들 !
- 사람이 에 응하는 일이 더 이상 생하지 않도록 !!
ü 장애인, 노인 등 시 의 상(생색내 )이 아니라
à 새로운 고객 로 인식을 환할 필요 !!
EveryoneEveryone Easy of useEasy of use EffectivenessEffectiveness
3E(모두가 손쉽게 원하는 것을 얻을 있는)-Based IT3E(모두가 손쉽게 원하는 것을 얻을 있는)-Based IT
5. 결 론
44
자, 자, 자 !!
(Just Ask)
&
1명, 2명, 4명, 8명 ...(다단계)
(Amway’s way)“If I can get another 10 engineers motivated to work on
accessibility,” he said, “it is a huge win.”
- Google T.V Raman, New York Times(‘09. 1.3)
함께해요 !!함께해요 !!
5. 결 론
45
u IT 회사의 람직한 사회공헌 ?
à자사의 품과 비스를 근 있게 공
u IT 개 자의 멋있는 사회공헌 ?
à 근 표 을 한 품과 비스 개
http://www-03.ibm.com/able/index.html
CSR (Corporate Social Responsibility)
5. 결 론
46
My Web My Way
http://www.bbc.co.uk/accessibility/
6. 결 론
47
근 ≒ [ 가치 ]
가치(Value)
ü Think Different à Innovation à Making $$$$
ü Corporate (Individual) Social Responsibility
ü Machine (Technology) helps you
같이(Together)
üWeb(IT) for everyone
ü Cooperation between developer and users
고
48
ü 웹 근 자 : Q&A
(웹 근 어떤 질 이라도 가능)
ü 웹 근 품질마크 소개(인증)
(품질마크 등 공 )
ü 작 법 소개 등
웹 근 연구소 사이트 개편 : http://www.wah.or.kr/
