모바일 접근성
(Mobile Accessibility]
모바일 접근성
(Mobile Accessibility]
PG 605 PG 605 워크숍워크숍[2010. 8. 26)[2010. 8. 26)PG 605 PG 605 워크숍워크숍[2010. 8. 26)[2010. 8. 26)
현 준 호
한국정보화진흥원 현 준 호 책임
([email protected], Twitter : @jhyun22�
http://jhyun.wordpress.com/)
1. 1. 들어가기들어가기1. 1. 들어가기들어가기
전세계인구의 10%
(6억 5천만명)
현 준 호1
(6억 5천만명)
( 출처 :�UN�ENABLE�Websites,�
http://www.un.org/disabilities/default.asp?id=18 )
1. 1. 들어가기들어가기1. 1. 들어가기들어가기
54�million�Number�of�people�who�have�a�disability.�
They�represent�19�percent�
현 준 호2
of�the�civilian�noninstitutionalized population.
(5천 4백만명,�인구의 19%에 해당,�2010년 5월 발표)
http://www.census.gov/newsroom/releases/archives/facts_for_features_special_editions/cb10-ff13.html
1. 1. 들어가기들어가기1. 1. 들어가기들어가기
People�with�disabilities�constitute�about�15%�of�the�
European�population�and�many�of�them�encounter�
현 준 호3
barriers�when�using�ICT�products�and�services.�
(유럽연합인구의약 15%)
http://eur-lex.europa.eu/LexUriServ/site/en/com/2005/com2005_ 0425en01.pdf
2. 2. 모바일모바일 접근성접근성2. 2. 모바일모바일 접근성접근성
현 준 호4
Accessibility�Gap?�
2. 2. 모바일모바일 접근성접근성2. 2. 모바일모바일 접근성접근성
Small�
ScreenDiverse
현 준 호5
Low
Bandwidth
OS
2. 2. 모바일모바일 접근성접근성2. 2. 모바일모바일 접근성접근성
모바일전문가 접근성전문가
장애인에대한고려부족
접근성(Accessibility)에 대한
모바일기기에대한이해부족
모바일웹에대한기술력부족
현 준 호6
이해부족
초기단계로다양한기기,�서비스
등장
모바일애플리케이션에대한
기술력부족
누가,�무엇을 해야하나?
2. 2. 모바일모바일 접근성접근성2. 2. 모바일모바일 접근성접근성
MobileDevice
모바일기기
자체의접근성
모바일에서사용하는
현 준 호7
Mobile�Accessibility
MobileWeb/Apps
MobileAssistive�
Technologies
소프트웨어접근성
장애인의이용편의를
위한보조기기
3. Mobile Devices 3. Mobile Devices -- iPhoneiPhone3. Mobile Devices 3. Mobile Devices -- iPhoneiPhone
현 준 호8
http://www.apple.com/accessibility/iphone/vision.html
3. Mobile Devices 3. Mobile Devices -- iPhoneiPhone3. Mobile Devices 3. Mobile Devices -- iPhoneiPhone
VoiceOver
VoiceControl�– 음악,�전화걸기등
현 준 호9
Entering�TextZoom
High�Contrast
3. Mobile Devices 3. Mobile Devices -- iPhoneiPhone3. Mobile Devices 3. Mobile Devices -- iPhoneiPhone
접근성있는 iPhone�사용자가이드!
현 준 호10
http://help.apple.com/iphone/4/voiceover/en/
사용자가이드,�
Help�Desk�등에
대한접근성
고려필요
3. Mobile Devices 3. Mobile Devices –– Nexus OneNexus One3. Mobile Devices 3. Mobile Devices –– Nexus OneNexus One
Accessibility�Settings:�Kickback,�Talkback,�Soundback
Voice�Input�&�Output
현 준 호11
http://www.google.com/support/android/bin/answer.py?hl=en&answer=168585
http://www.google.com/support/android/bin/answer.py?hl=en&answer=168586#1104525
3. Mobile Devices 3. Mobile Devices –– BlackberryBlackberry3. Mobile Devices 3. Mobile Devices –– BlackberryBlackberry
현 준 호12
http://na.blackberry.com/eng/support/devices/blackberry_accessibility/
3. Mobile Devices 3. Mobile Devices –– Galaxy A & SGalaxy A & S3. Mobile Devices 3. Mobile Devices –– Galaxy A & SGalaxy A & S
구글안드로이드
OS�기능을 제외하고는
어떠한접근성기능도없음
- 한국어 TTS는 지원안됨
현 준 호13
4. Mobile Web/Apps 4. Mobile Web/Apps –– Mobile Web (W3C)Mobile Web (W3C)4. Mobile Web/Apps 4. Mobile Web/Apps –– Mobile Web (W3C)Mobile Web (W3C)
MWBP(Mobile�Web�Best�Practices)�1.0
WCAG�(Web�Content�
Accessibility�Guidelines)�2.0
현 준 호14
http://www.w3.org/TR/mobile-bp/
http://www.w3.org/TR/WCAG20/
4. Mobile Web/Apps 4. Mobile Web/Apps –– Mobile Web (W3C)Mobile Web (W3C)4. Mobile Web/Apps 4. Mobile Web/Apps –– Mobile Web (W3C)Mobile Web (W3C)
MWBP(Mobile�Web�Best�Practices)�1.0
현 준 호15
http://www.w3c.or.kr/Translation/mwbp_flip_cards/
4. Mobile Web/Apps 4. Mobile Web/Apps –– Mobile Web (W3C)Mobile Web (W3C)4. Mobile Web/Apps 4. Mobile Web/Apps –– Mobile Web (W3C)Mobile Web (W3C)
WCAG�2.0�&�MWBP�1.0�(http://www.w3.org/WAI/mobile/)
현 준 호16
WCAG�2.0�&�MWBP�1.0�(http://www.w3.org/WAI/mobile/)
Table�of�Shared�Web�Experiences:�Barriers�Common�to�Mobile�Device�Users�and�People�with�Disabilities�(http://www.w3.org/WAI/mobile/experiences-table.html#non-text)�
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
색각이상은대단히흔한이상으로전체남자인구의약
색상에무관한인식(색상에만의존하여정보를제공하지말라)P.1
인식의용이성(Perceivable):�모든 콘텐츠는사용자가인식할수있어야한다.
현 준 호17
5~8%,�서양에서는전체남자인구중 8%,�전체 여자인구
중 0.5%가색각이상,�국내의 통계에서는전체남자의
5.9%,�전체 여자의 0.4%가색각이상 (국가건강정보포털,�
http://health.mw.go.kr/HealthInfoArea/HealthInfo01.aspx?CategoryName=%uac74
%uac15%uc815%ubcf4%28%uc131%uc778%29&Mode=View&CurrentPage=6&I
DX=4550&CID=9843C33187#ContentArea)
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
큰페이지나큰이미지(Large�Pages�or�Large�Image)P.2
확대시적은화면
현 준 호18
좌,�우 스크롤생성등
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
캡션이제공되지않는멀티미디어 (Captions)P.3
현 준 호19
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
경고,�에러 등의확인을위해사용하는음성전용(Audio-only)�콘텐츠P.4
*�장애인사용자:�청각장애인
• 모바일환경:�공공의장소(기차,�호텔 로비등)에서모바일기기에서의음성을
현 준 호20
사용하지않거나(진동모드로사용하는경우)�
청각장애인이아니더라도지하철,�버스안,�철도역,�공항,�백화점등시끄러운환경
에서사용하는사용자들에게문제가발생
• 사용자경험:�사용자가음성으로만의존하여제공된콘텐츠로인해실수를
유발할수있음
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
텍스트대체수단이없는텍스트아닌콘텐츠P.5
현 준 호21
- 시각장애인(전맹등)
- 다운로드용량에따라돈을지불해야하는경
우이미지를끄고사용하는모바일사용자
- 모바일기기에서지원하지않는텍스트아닌
콘텐츠와이미지의크기를모바일기기화면
크기에따라변화시킬경우
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
텍스트입력(Text-Entry)P.6
- 장애인사용자:�지체장애인(주로상지장애인),
뇌병변장애인등텍스트입력이어려운사용자
현 준 호22
- 모바일환경:�PC�환경의키보드와달리모바일환경
에서제공되는적은크기의키패드로입력의어려움이발생
- 사용자경험:�텍스트입력의어려움이발생하여텍스트
입력이부정확해지거나실수가발생함
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
선형화(Linearized)�시켰을 때 문서순서(Reading�order)P.7
- 장애인사용자:�시각장애인
- 모바일환경:�모바일기기에적합하게문서
표현을재포맷하거나재구축하는경우,�
현 준 호23
12
3
표현을재포맷하거나재구축하는경우,�
콘텐츠의의미가변화할수있음
- 사용자경험:�선형화하여볼경우사용자가
정확하게해당콘텐츠를이해할수없는
경우가발생함
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
CSS만으로 정보를제공 (표현과 구조분리필요)P.8
- 장애인사용자:�시각장애인이 CSS만으로제공되는정보를인식하지못하는
문제발생
- 모바일환경:�모바일브라우저에서 CSS를 지원하지않거나다르게해석할
현 준 호24
- 모바일환경:�모바일브라우저에서 CSS를 지원하지않거나다르게해석할
경우정보를인식하지못하는문제발생
- 사용자경험:�CSS는 표현의요소로화면낭독프로그램등보조기기에서구조
적인문서로인식하지않기때문에정보를인식하지못하는문제가발생함.�
표현(Structure)와 표현(Presentation)을 분리해서작업하는것이바람직
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
키보드만으로도운용 (마우스 의존적설계지양)O.1
운용의용이성(Operable):�사용자인터페이스구성요소는조작가능하고
내비게이션할수있어야한다
현 준 호25
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
스크립트의존적인구현O.2
스크립트,�
플러그인의존적인구현O.3
현 준 호26
플러그인이
지원되지않는
브라우저,�
보조기기등
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
페이지타이틀을제공하지않거나부적절하게제공O.4
메인페이지
현 준 호27
Movie�페이지
검색(Internet)�페이지
http://www.fujitsu.com/downloads/US/GND/web-accessibility-guide.pdf
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
포커스 (Tab)�순서와 논리적순서의불일치O.5
12
선형화(Linearized)�시켰을 때문서순서(Reading�order)
P.7
현 준 호28
3
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
설명이부족한링크레이블제공O.6
현 준 호29
여기(here,�click�here�등)�모호한링크설명을사용하지말고,�링크의목적을
동등하게인식할수있도록제공,�링크간구분할수있도록적절한공간을제공해야함
http://www.fujitsu.com/downloads/US/GND/web-accessibility-guide.pdf
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
긴단어,�길거나 복잡한문장 (Long�words,�long�complex�sentences)U.1
이해의용이성(Understandable):�콘텐츠는이해할수있어야한다.
지적장애 :�정신발육이항구적으로지체되어지적능력의발달이불충분하거나
불완전하고자신의일을처리하는것과사회생활에적응하는것이상당히곤란한
현 준 호30
불완전하고자신의일을처리하는것과사회생활에적응하는것이상당히곤란한
사람 (복잡한구조, 어려운단어의이해가어려움)
해결방안)
콘텐츠는간결하여명확히전달할수있도록제공
용도를고려하여특수기호(구두점,�방점 등)를 사용
평이하고보편적인용어를사용하는것이바람직,�용어 도움말제공등
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
사전경고없이새창으로열리는문서나콘텐츠U.2
새창으로콘텐츠를제공할경우, 저시력자,�확대기능을사용하는사용자,�지적
장애등에게불편함을주며콘텐츠이해를저해할수있음
현 준 호31
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
깜박이거나자동업데이트되는콘텐츠U.3
현 준 호32
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
유효하지않거나지원되지않는마크업이용R.1
견고성(Robust):�콘텐츠는미래의기술로도접근할수있도록견고하게만들어야한다
현 준 호33
http://validator.w3.org/mobile/
http://www.wah.or.kr/Achive/Kadowah.asp
http://validator.w3.org/
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
현 준 호34
http://www.w3.org/WAI/ER/tools/complete
4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점4. Mobile Web/Apps 4. Mobile Web/Apps –– 장애인과장애인과 모바일모바일 사용자사용자 애로점애로점
스크립트의존적인콘텐츠생성R.2
스크립트,�플러그인이
지원되지않는브라우저,�
현 준 호35
스크립트의존적인구현O.2 플러그인의존적인구현O.3
지원되지않는브라우저,�
보조기기(Assistive�Technologies) 등
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
현 준 호36
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
현 준 호37
http://developer.android.com/reference/android/accessibilityservice/package-summary.html
http://code.google.com/p/eyes-free/
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
현 준 호38
http://eyes-free.googlecode.com/svn/trunk/documentation/android_access/index.html
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
현 준 호39
http://developer.bada.com/search/searchIndexList.do?menu=MC01120100&searchValue=accessibility
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
Blackberry�&�RIM(Research�In�Motion)�
- 10�Best�Practices�for�accessible�and�usable�User�Interface
1)�Use�Native�UI�Components�
- (모르면) 제공하는기본적인 UI�콤포넌트를최대한활용하라
2)�Inherit�Global�Font�Settings
현 준 호40
2)�Inherit�Global�Font�Settings
- 절대 폰트를사용하지말라,�사용자 선택에따라변화가능
3)�Manage�Color�&�Contrast�Usage
- 고대비를생각하라,�고대비로변환할수있는기능제공
http://www.slideshare.net/berryaccess/designing-accessible-usable-application-user-interfaces-for-mobile-phones
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
4)�Manage�Touch�Target�Sizes
- 터치할 수있는충분한크기및공간제공필요
5)�Align�Interaction�Methods
현 준 호41
- 모바일 OS에서 제공하는것과동일하거나유사한상호작용
6)�Use�Effective�Error�Message
- 경고나 오류를사용자가명확히인식하여이를손쉽게수정할
수있도록도와주어라
4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications4. Mobile Web/Apps 4. Mobile Web/Apps –– mobile applicationsmobile applications
7)�Leverage�Multiple�Modalities
- 다양한 표현방법으로의사소통할수있도록제공(시각,�청각,�촉각 등)
- 이미지에대한대체텍스트,�동영상에대한자막제공등
8)�Maintain�Consistency
- 사용자 경험에비추어일관성있는 UI를 제공하라
현 준 호42
- 사용자 경험에비추어일관성있는 UI를 제공하라
9)�Provide�Multiple�Ways
- 사용자가원하는업무(Task)를 해결할수있는다양한방법제공
10)�Get�in�the�Wild�
- 다양한 환경을직접테스트하고지속적으로개선하라!!
5. Mobile Assistive Technologies5. Mobile Assistive Technologies5. Mobile Assistive Technologies5. Mobile Assistive Technologies
TTS(Text-to-Speech)�지원 현황
1)�스마트 폰
- iPhone�(내장,�한국어도지원)
- Nexus�One�(기본 TTS�내장,�한국어미지원)
- 갤럭시 A&S�(안드로이드앱에서내장가능,�한국어 미지원)
현 준 호43
- 갤럭시 A&S�(안드로이드앱에서내장가능,�한국어 미지원)
2)�Feature�phone
- LG�전자:�LG-SH860S�시각장애인휴대폰등
- 삼성전자:�SCH-W910�VVIP 등
http://jhyun.wordpress.com/2010/07/12/%ED%9C%B4%EB%8C%80%EC%A0%84%ED%99%94%EA%B8%B0%EC%9D%98-%EC%8B%9C%EA%B0%81%EC%9E%A5%EC%95%A0%EC%9D%B8-%ED%8E%B8%EC%9D%98-%EA%B8%B0%EB%8A%A5-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9D%8C%EC%84%B1-%EB%B3%80/
5. Mobile Assistive Technologies5. Mobile Assistive Technologies5. Mobile Assistive Technologies5. Mobile Assistive Technologies
Mobile�Screen�Reader:�CodeFactory�(http://www.codefactory.es/en/)�
현 준 호44
CODE�FACTORY�DEVELOPS�ACCESSIBLE�SOFTWARE�APPLICATIONS�FOR�MOBILE�
PHONES�RUNNING�ON�SYMBIAN�SERIE�60,�WINDOWS�MOBILE�AND�
BLACKBERRY.
5. Mobile Assistive Technologies5. Mobile Assistive Technologies5. Mobile Assistive Technologies5. Mobile Assistive Technologies
Earware�Cell�Phone�Amplifier(청각장애인용증폭기)MOBILE�MAGNIFIER�
현 준 호45
(청각장애인용증폭기)
http://abledata.com/abledata.cfm?pageid=19327&top=170508&deep=2&trail=22,10825 <�AbleData�Cellular�Phones�검색 결과 >
MOBILE�MAGNIFIER�POCKET
(모바일확대기)
VOCALIZE!�WHEELCHAIR�CELL�PHONE�VOICE�CONTROL�SYSTEM(휠체어음성휴대폰시스템) Bluetooth�Keyboard
6. 6. 결결 론론 –– Learn from web accessibilityLearn from web accessibility6. 6. 결결 론론 –– Learn from web accessibilityLearn from web accessibility
Best�Practices:�iPhone Accessibility�!!
현 준 호46
6. 6. 결결 론론 –– Learn from web accessibilityLearn from web accessibility6. 6. 결결 론론 –– Learn from web accessibilityLearn from web accessibility
Mainstreaming
현 준 호47
Products�&�Services
6. 6. 결결 론론 -- Learn from web accessibilityLearn from web accessibility6. 6. 결결 론론 -- Learn from web accessibilityLearn from web accessibility
Buit-in
현 준 호48
No�extra�Cost
감사합니다감사합니다감사합니다감사합니다
현 준 호
정보접근지원부현준호책임([email protected], 02-3660-2577)
http://jhyun.wordpress.com/