PG 605 워크숍 [ ) 모바일접근성 (Mobile Accessibility] 한국정보화진흥원현준호책임 Twitter 현준호

PG 605 워크숍 [2010. 8. 26) 모바일접근성 (Mobile Accessibility] 한국정보화진흥원책임 (jhyun22@nia.or.kr, Twitter : @jhyun22 http://jhyun.wordpress.com/)

1. 들어가기 전세계인구의 10% (6 억 5 천만명 ) ( 출처 : UN ENABLE Websites, http://www.un.org/disabilities/default.asp?id=18 ) 1

1. 들어가기 54 million Number of people who have a disability. They represent 19 percent 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 2

1. 들어가기 People with disabilities constitute about 15% of the European population and many of them encounter barriers when using ICT products and services. ( 유럽연합인구의약 15%) http://eur-lex.europa.eu/lexuriserv/site/en/com/2005/com2005_ 0425en01.pdf 3

2. 모바일접근성 Accessibility Gap? 4

2. 모바일접근성 Small Screen Low Diverse OS Bandwidth 5

2. 모바일접근성 모바일전문가 접근성전문가 장애인에대한고려부족접근성 (Accessibility) 에대한이해부족초기단계로다양한기기, 서비스 모바일기기에대한이해부족모바일웹에대한기술력부족모바일애플리케이션에대한기술력부족 등장 누가, 무엇을해야하나? 6

2. 모바일접근성 Mobile Device 모바일기기 자체의접근성 모바일에서사용하는 소프트웨어접근성 Mobile Web/Apps Mobile Accessibility 장애인의이용편의를위한보조기기 7 Mobile Assistive Technologies

3. Mobile Devices - iphone http://www.apple.com/accessibility/iphone/vision.html 8

3. Mobile Devices - iphone VoiceOver VoiceControl 음악, 전화걸기등 Entering Text Zoom High Contrast 9

3. Mobile Devices - iphone 접근성있는 iphone 사용자가이드! 사용자가이드, Help Desk 등에대한접근성고려필요 http://help.apple.com/iphone/4/voiceover/en/ 10

3. Mobile Devices Nexus One Accessibility Settings: Kickback, Talkback, Soundback Voice Input & Output http://www.google.com/support/ android/bin/answer.py?hl=en&an swer=168585 http://www.google.com/support/android/bin/ answer.py?hl=en&answer=168586#1104525 11

3. Mobile Devices Blackberry http://na.blackberry.com/eng/support/devices/blackberry_accessibility/ 12

3. Mobile Devices Galaxy A & S 구글안드로이드 OS 기능을제외하고는어떠한접근성기능도없음 - 한국어 TTS는지원안됨 13

4. Mobile Web/Apps Mobile Web (W3C) MWBP(Mobile Web Best Practices) 1.0 WCAG (Web Content Accessibility Guidelines) 2.0 http://www.w3.org/tr/mobile-bp/ http://www.w3.org/tr/wcag20/ 14

4. Mobile Web/Apps Mobile Web (W3C) MWBP(Mobile Web Best Practices) 1.0 http://www.w3c.or.kr/translation/mwbp_flip_cards/ 15

4. Mobile Web/Apps Mobile Web (W3C) 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/experiencestable.html#non-text) 16

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야한다. P.1 색상에무관한인식 ( 색상에만의존하여정보를제공하지말라 ) 색각이상은대단히흔한이상으로전체남자인구의약 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) 17

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.2 큰페이지나큰이미지 (Large Pages or Large Image) 확대시적은화면 좌, 우스크롤생성등 18

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.3 캡션이제공되지않는멀티미디어 (Captions) 19

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.4 경고, 에러등의확인을위해사용하는음성전용 (Audio-only) 콘텐츠 * 장애인사용자 : 청각장애인 모바일환경 : 공공의장소 ( 기차, 호텔로비등 ) 에서모바일기기에서의음성을사용하지않거나 ( 진동모드로사용하는경우 ) 청각장애인이아니더라도지하철, 버스안, 철도역, 공항, 백화점등시끄러운환경에서사용하는사용자들에게문제가발생 사용자경험 : 사용자가음성으로만의존하여제공된콘텐츠로인해실수를 유발할수있음 20

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.5 텍스트대체수단이없는텍스트아닌콘텐츠 - 시각장애인 ( 전맹등 ) - 다운로드용량에따라돈을지불해야하는경우이미지를끄고사용하는모바일사용자 - 모바일기기에서지원하지않는텍스트아닌콘텐츠와이미지의크기를모바일기기화면 크기에따라변화시킬경우 21

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.6 텍스트입력 (Text-Entry) - 장애인사용자 : 지체장애인 ( 주로상지장애인 ), 뇌병변장애인등텍스트입력이어려운사용자 - 모바일환경 : PC 환경의키보드와달리모바일환경 에서제공되는적은크기의키패드로입력의어려움이발생 - 사용자경험 : 텍스트입력의어려움이발생하여텍스트 입력이부정확해지거나실수가발생함 22

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.7 선형화 (Linearized) 시켰을때문서순서 (Reading order) - 장애인사용자 : 시각장애인 - 모바일환경 : 모바일기기에적합하게문서 표현을재포맷하거나재구축하는경우, 1 3 2 콘텐츠의의미가변화할수있음 - 사용자경험 : 선형화하여볼경우사용자가 정확하게해당콘텐츠를이해할수없는 경우가발생함 23

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 P.8 CSS 만으로정보를제공 ( 표현과구조분리필요 ) - 장애인사용자 : 시각장애인이 CSS만으로제공되는정보를인식하지못하는문제발생 - 모바일환경 : 모바일브라우저에서 CSS 를지원하지않거나다르게해석할경우정보를인식하지못하는문제발생 - 사용자경험 : CSS는표현의요소로화면낭독프로그램등보조기기에서구조적인문서로인식하지않기때문에정보를인식하지못하는문제가발생함. 표현 (Structure) 와표현 (Presentation) 을분리해서작업하는것이바람직 24

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 운용의용이성 (Operable): 사용자인터페이스구성요소는조작가능하고내비게이션할수있어야한다 O.1 키보드만으로도운용 ( 마우스의존적설계지양 ) 25

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 O.2 스크립트의존적인구현 O.3 플러그인의존적인구현 스크립트, 플러그인이 지원되지않는 브라우저, 보조기기등 26

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 O.4 페이지타이틀을제공하지않거나부적절하게제공 메인페이지 Movie 페이지 검색 (Internet) 페이지 http://www.fujitsu.com/downloads/us/gnd /web-accessibility-guide.pdf 27

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 O.5 포커스 (Tab) 순서와논리적순서의불일치 P.7 선형화 (Linearized) 시켰을때문서순서 (Reading order) 1 2 3 28

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 O.6 설명이부족한링크레이블제공 http://www.fujitsu.com/downloads/us/gnd/w eb-accessibility-guide.pdf 여기 (here, click here 등 ) 모호한링크설명을사용하지말고, 링크의목적을 동등하게인식할수있도록제공, 링크간구분할수있도록적절한공간을제공해야함 29

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 이해의용이성 (Understandable): 콘텐츠는이해할수있어야한다. U.1 긴단어, 길거나복잡한문장 (Long words, long complex sentences) 지적장애 : 정신발육이항구적으로지체되어지적능력의발달이불충분하거나불완전하고자신의일을처리하는것과사회생활에적응하는것이상당히곤란한사람 ( 복잡한구조, 어려운단어의이해가어려움 ) 해결방안 ) 콘텐츠는간결하여명확히전달할수있도록제공용도를고려하여특수기호 ( 구두점, 방점등 ) 를사용평이하고보편적인용어를사용하는것이바람직, 용어도움말제공등 30

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 U.2 사전경고없이새창으로열리는문서나콘텐츠 새창으로콘텐츠를제공할경우, 저시력자, 확대기능을사용하는사용자, 지적 장애등에게불편함을주며콘텐츠이해를저해할수있음 31

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 U.3 깜박이거나자동업데이트되는콘텐츠 32

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 견고성 (Robust): 콘텐츠는미래의기술로도접근할수있도록견고하게만들어야한다 R.1 유효하지않거나지원되지않는마크업이용 http://www.wah.or.kr/achive/kadowah.asp http://validator.w3.org/ http://validator.w3.org/mobile/ 33

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 http://www.w3.org/wai/er/tools/complete 34

4. Mobile Web/Apps 장애인과 장애인과모바일사용자애로점 R.2 스크립트의존적인콘텐츠생성 스크립트, 플러그인이지원되지않는브라우저, 보조기기 (Assistive Technologies) 등 O.2 스크립트의존적인구현 O.3 플러그인의존적인구현 35

4. Mobile Web/Apps mobile applications http://developer.apple.com/iphone/library/documentation/userexperience/ Conceptual/iPhoneAccessibility/Introduction/Introduction.html 36

4. Mobile Web/Apps mobile applications http://code.google.com/p/e yes-free/ http://developer.android.com/reference/android/accessibilityservice/pac kage-summary.html 37

4. Mobile Web/Apps mobile applications http://eyes-free.googlecode.com/svn/trunk/documentation/android_access/index.html 38

4. Mobile Web/Apps mobile applications http://developer.bada.com/search/searchindexlist.do?menu=mc011201 00&searchValue=accessibility 39

4. Mobile Web/Apps mobile 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 - 절대폰트를사용하지말라, 사용자선택에따라변화가능 3) Manage Color & Contrast Usage - 고대비를생각하라, 고대비로변환할수있는기능제공 http://www.slideshare.net/berryaccess/designing-accessible-usableapplication-user-interfaces-for-mobile-phones 40

4. Mobile Web/Apps mobile applications 4) Manage Touch Target Sizes - 터치할수있는충분한크기및공간제공필요 5) Align Interaction Methods - 모바일 OS에서제공하는것과동일하거나유사한상호작용 6) Use Effective Error Message - 경고나오류를사용자가명확히인식하여이를손쉽게수정할수있도록도와주어라 41

4. Mobile Web/Apps mobile applications 7) Leverage Multiple Modalities - 다양한표현방법으로의사소통할수있도록제공 ( 시각, 청각, 촉각등 ) - 이미지에대한대체텍스트, 동영상에대한자막제공등 8) Maintain Consistency - 사용자경험에비추어일관성있는 UI 를제공하라 9) Provide Multiple Ways - 사용자가원하는업무 (Task) 를해결할수있는다양한방법제공 10) Get in the Wild - 다양한환경을직접테스트하고지속적으로개선하라!! 42

5. Mobile Assistive Technologies TTS(Text-to-Speech) 지원현황 1) 스마트폰 - iphone ( 내장, 한국어도지원 ) - Nexus One ( 기본 TTS 내장, 한국어미지원 ) - 갤럭시 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/ 43

5. Mobile Assistive Technologies Mobile Screen Reader: CodeFactory (http://www.codefactory.es/en/) CODE FACTORY DEVELOPS ACCESSIBLE SOFTWARE APPLICATIONS FOR MOBILE PHONES RUNNING ON SYMBIAN SERIE 60, WINDOWS MOBILE AND BLACKBERRY. 44

5. Mobile Assistive Technologies MOBILE MAGNIFIER POCKET ( 모바일확대기 ) Earware Cell Phone Amplifier ( 청각장애인용증폭기 ) VOCALIZE! WHEELCHAIR CELL PHONE VOICE CONTROL SYSTEM ( 휠체어음성휴대폰시스템 ) Bluetooth Keyboard http://abledata.com/abledata.cfm?pageid=19327&top=170508&deep=2&t rail=22,10825 < AbleData Cellular Phones 검색결과 > 45

6. 결론 Learn from web accessibility Best Practices: iphone Accessibility!! 46

6. 결론 Learn from web accessibility Mainstreaming Products & Services 47

6. 결론 - Learn from web accessibility Buit-in No extra Cost 48

감사합니다 정보접근지원부책임 (jhyun22@nia.or.kr, 02-3660-2577) http://jhyun.wordpress.com/