목 차 Ⅰ. 애플리케이션접근성준수사항 Ⅱ. 애플리케이션접근성권고사항 Ⅲ. 애플리케이션접근성권장사항 ( 평가제외항목 ) ( 부록 )

Similar documents
모바일애플리케이션접근성지침

슬라이드 1

src.hwp

<4D F736F F D20284B B8F0B9D9C0CF20BED6C7C3B8AEC4C9C0CCBCC720C4DCC5D9C3F720C1A2B1D9BCBA2020C1F6C4A720322E302E646F6378>

목차 1. 접근성소개 ios 의접근성 (Accessibility) 의이해... 4 Ⅱ. 모바일애플리케이션접근성을고려한 ios 제작기법 인식의용이성 대체텍스트 자막, 수화등의제공 색에무관한인식

Microsoft PowerPoint - mobileAppAccessibilityGuidelines_Korea.pptx

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을

사용하기 전에 2

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사

PowerPoint Template

1

src.hwp

CSS Design Korea( ) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원 정보접근지원부현준호책임 현준호

Windows 8에서 BioStar 1 설치하기

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

iOS5_1±³

View Licenses and Services (customer)

ISP and CodeVisionAVR C Compiler.hwp

사용하기 전에 2


캐빈의iOS프로그램팁01

<4D F736F F D C1A6BEC8BCAD20C0DBBCBAB0FA20C7C1B8AEC1A8C5D7C0CCBCC720B1E2B9FD2E646F63>

Office 365 사용자 가이드

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1

서현수

사용하기 전에 2

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

MF3010 MF Driver Installation Guide

1809_2018-BESPINGLOBAL_Design Guidelines_out

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

mobile_guide_SA

NX1000_Ver1.1

게임 기획서 표준양식 연구보고서

Microsoft Word - src.doc


고객 카드

PowerPoint Presentation

歯어린이영어사교육보고서최종2.PDF

Software Modeling < < OOAD Stage 김정태 최정명 이낙원 송준현

PowerPoint 프레젠테이션

Operating Instructions

구미시설공단 유연근무제 시행내규 제정,내규 제84호 제1장 총 칙 제1조(목적)이 내규는 구미시설공단(이하 공단 이라 한다)직원의 유연근무제 시행에 필요한 사항을 규정함을 목적으로 한다. 제2조(용어의 정의)1 시간제근무 라 함은 주 40시간보다 짧은

F120L(JB)_UG_V1.0_ indd

PowerPoint 프레젠테이션

ePapyrus PDF Document

SH100_V1.4

Microsoft Word - Korean_뷰어 메뉴얼_공용_ADVR&SWi_.doc

Microsoft Word - 문필주.doc

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.

Flex Builder 2 & 차트

coinone_brand_guide_(KOR) 복사본

포인팅 장치 및 키보드

2 PX-8000과 RM-8000/LM-8000등의 관련 제품은 시스템의 간편한 설치와 쉬운 운영에 대한 고급 기술을 제공합니다. 또한 뛰어난 확장성으로 사용자가 요구하는 시스템을 손쉽게 구현할 수 있습니다. 메인컨트롤러인 PX-8000의 BGM입력소스를 8개의 로컬지

경우 1) 80GB( 원본 ) => 2TB( 복사본 ), 원본 80GB 는 MBR 로디스크초기화하고 NTFS 로포맷한경우 복사본 HDD 도 MBR 로디스크초기화되고 80GB 만큼포맷되고나머지영역 (80GB~ 나머지부분 ) 은할당되지않음 으로나온다. A. Window P

C스토어 사용자 매뉴얼

2_안드로이드UI

SBR-100S User Manual

Microsoft PowerPoint _사용자매뉴얼.ppt

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A

파일관리 microsd, SD 카드및 USB 장치에저장된내데이터를어떻게액세스합니까? 오른쪽하단에있는프롬프트에있는 SD 카드또는 USB 아이콘을두드리십시오. 폴더아이콘을두드리면선택된저장장치에들어있는데이터가표시됩니다. 자세한내용은사용설명서를참조하십시오. 선택한폴더를다른폴더

제8장 자바 GUI 프로그래밍 II

5-03-Â÷¼¼´ëÀ¥Iš

Phaser 7300 컬러 프린터 기능 안내서

슬라이드 1

AndroidUsersGuide.book

MLB 2K9_PS3_MN

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

B2B 매뉴얼

LCD Display

신입생을 위한 iPad 설정 및 등록 방법

볼륨 조절 아이콘 표시하기 만일 알림 영역에 볼륨 조절 아이콘이 표시되지 않았다면 아래의 방법을 따라합니다. 1> [시작] - [제어판] - [사운드 및 오디오 장치] 아이콘을 더블 클릭합니다. 2) [사운드 및 오디오 장치 등록 정보] 대화상자에서 [볼륨] 탭을 클릭

ThinkVantage Fingerprint Software

Contents 01. 안전을 위한 주의 사항 터치형 멀티 조절기 각부 명칭 터치형 각방 조절기 각부 명칭 조절기 난방/정지 하기 조절기 외출 /해제하기 조절기 반복난방 하기 조절기 예약난방 /

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

Galaxy S 사용의 필수 지침서 SMART Basic 10 Contents Basic 1. 처음 사용하기 006 단말기 기본 사용하기 1 내부 구성품 살펴보기 2 배터리 교체하기 3 버튼별 기능 살펴보기 4 터치/드래그 사용하기 5 보안 설정/해제하기 025 전화

GBF-1257B 카스블루투스체지방계앱사용매뉴얼

슬라이드 1

SKT - 0.0% SKT 9, % 7, % 2, % 3, % 13, % 11,273 15,970

MY19 power meter user manual KO

슬라이드 1

01

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

7. 설치가 끝나면 오픈오피스를 실행합니다. 오픈오피스 설치 이 설명서는 여러분이 윈도우에 대한 기본적인 지식을 가지고 있다고 가정합니다. 따라서 일반적인 윈도우 시스템의 관리에 대해서는 언급하지 않습니다. 여기에서 설명하는 단계별 절차에 따라 윈도우 시스템에 오픈오피

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax

IRISCard Anywhere 5

SMT Kor.indd

어댑터뷰

기가바이트 노트북을 구매 하신 것을 축하 합니다. 이 설명서는 당신이 당신의 노트북을 시작하는 것을 도줄 것입니다. 좀더 자 세 정보는 기가바이트 웹사이트 를 방문하십시오. 모든 스펙은 선적시의 구성 장치 이며 떤 서문이나 사전 통지 없이

System Recovery 사용자 매뉴얼

歯Phone

화해와나눔-여름호(본문)수정

화해와나눔-가을호(본문)

KARAAUTO_4¿ù.qxd-ÀÌÆå.ps, page Normalize

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

Subject

PowerPoint 프레젠테이션

Brother 제품을사용하기전에 표기법 본사용자가이드에서는다음과같은기호와표기를사용합니다. 팁아이콘은힌트와보충정보를제공합니다. 상표 BROTHER 는 Brother Industries, Ltd. 의상표또는등록상표입니다. Wi-Fi 및 Wi-Fi Direct 는 Wi-Fi

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

Transcription:

2011. 10

목 차 Ⅰ. 애플리케이션접근성준수사항 Ⅱ. 애플리케이션접근성권고사항 Ⅲ. 애플리케이션접근성권장사항 ( 평가제외항목 ) ( 부록 )

Ⅰ. 애플리케이션접근성준수사항 1. ( 대체텍스트 ) 텍스트아닌콘텐츠는대체가능한텍스트와함께제공되어야한다. 가 ) 점검기준 1) 텍스트아닌콘텐츠에대응하는대체텍스트가그의미나기능을파악할수있도록짧고명확하게제공되었는가? 나 ) 점검방법 1) 음성읽기기능 (VoiceOver) 을활용하여텍스트아닌콘텐츠에대응하는대체텍스트를읽어주고그의미나기능을파악할수있도록짧고명확한지판단 음성읽기기능 (VoiceOver) 켜기 전체읽기기능 3 1 2-2 -

다 ) 사례 1) 준수사례 점검내용준수사례 ( 텍스트아닌콘텐츠에대체텍스트가있는경우 ) 1 2 3 4 1 2 3-3 -

2) 미준수사례 점검내용미준수사례 ( 텍스트아닌콘텐츠의대체텍스트가없는경우 ) 1 2 3 1 OO 은행 (2011.10.19 캡처 ) 전예금조회 버튼 전예금조회버튼 계좌이체 버튼 계좌이체버튼 자주쓰는계좌 버튼 자주쓰는계좌버튼 OO 은행 (2011.9.18 캡처 ) - 4 -

마 ) 제공방법 ( 개발방법 ) 1) Interface Builder 이용 Interface Builder 의기본사용법은부록을참고 < Interface Builder 화면 > - 5 -

2) UIAccessibility API 등을활용하여직접코드에삽입하는경우 * 버튼일경우 [housebutton setisaccessibilityelement:yes]; [housebutton setaccessibilitylabel:@" 재생 "]; [housebutton setaccessibilityhint:@" 음악을재생합니다."]; * 이미지뷰일경우 [myimageview setisaccessibilityelement:yes]; [myimageview setaccessibilitylabel:@" 다음로고 "]; * 사용자변형 UI 컴포넌트 (Custom UI Component) 일경우 [mycontroller setisaccessibilityelement:yes]; [mycontroller setaccessibilitylabel:@" 밀어서잠금해제 "]; [mycontroller setaccessibilityhint:@" 밀거나이중탭하십시오. ]; - 6 -

2. ( 초점 ) 모든객체에는초점 (focus) 이적용되고, 초점은순차적으로이동되어야한다. 가 ) 점검기준 1) 모든객체에초점이제공되고제공된초점은논리적인순서로제공되었는가? 2) 표객체에적용되는초점은논리적인순서로제공되었는가? 나 ) 점검방법 1) 음성읽기기능 (VoiceOver) 의 화면상단의항목부터모두읽기 기능을활용하여초점이논리적인순서로적용되는지판단 2) 표의내부에서콘텐츠가논리적순서로적용되는지판단 * 음성읽기기능 (VoiceOver) 의전체읽기기능 : 두손가락위로쓸어넘기기 * 표의논리적순서 : 상단부터좌측에서우측으로진행되는것이바람직하다. 논리적인순서의예 논리적이지못한순서의예 1 2 7 1 4 7 3 4 8 2 5 8 5 6 9 3 6 9-7 -

다 ) 사례 1) 준수사례 점검내용 준수사례 ( 초점이제대로적용된경우 ) 22 22 2...... 1 다음앱 (2011. 10. 18 캡처 ) 2) 미준수사례 점검내용 미준수사례 ( 텍스트의초점이제대로적용되지않은경우 ) - 초점미적용 - 초점미적용 - 8 -

점검내용 미준수사례 ( 컨트롤러의초점이제대로적용되지않은경우 ) -> 초점미적용 ( 컨텐츠의초점이제대로적용되지않은경우 ) -> 초점미적용 - 9 -

점검내용 미준수사례 1 ( 초점이제대로적용되지않은경우 ) 2 3 4 ( 초점의순서가논리적이지못하여의미가명확하게전달되지않는경우 ) OOO 앱 (2011. 10. 16 캡처 ) 1 지역, 날짜 - 2 현재온도 - 3 기타정보 - OOO 앱 (2011. 10. 16 캡처 ) - 10 -

점검내용미준수사례 ( 텍스트아닌콘텐츠의대체텍스트가없는경우 ) ( 초점이제대로적용되지않은경우 ) 1 2 OOOO 지킴이앱 (2011.10.10 캡처 ) ( 초점이제대로적용되지않은경우 ) 1 2-11 - OOOO 지킴이앱 (2011.10.10 캡처 )

라 ) 제공방법 ( 개발방법 ) < Accessibility 속성이활성화되지않은경우 ( 초점미적용 ) > < Accessibility 속성이활성화된경우 ( 초점적용 ) > * Interface Builder 를사용하지않고코딩할경우 [housebutton setisaccessibilityelement:no]; // 초점비활성화메서드 [housebutton setisaccessibilityelement:yes]; // 초점활성화메서드 * Accessibility 속성이기본값으로활성화되어있지않은객체 - 12 -

< 권장사항 > * 탭바컨트롤러밑으로초점이잡히는경우 < 뷰의영역과탭바컨트롤러의영역이겹쳐진경우 > ( 초점항목미준수 ) < 뷰의영역과탭바컨트롤러의영역이겹지지않는경우 > ( 초점항목준수 ) 1View와 2탭바컨트롤러의영역이겹쳐져있어눈에는보이지않지만초점이겹쳐서적용되어사용자에게혼돈을줄수있다. 1View와 2탭바컨트롤러의영역의사이즈를조절하여서로겹치지않도록해사용자가혼돈이없도록한다. * 뷰가전환되어사용하지않는컨트롤러혹은객체들은기존뷰에서제거하거나, hidden 속성을 YES로바꾼다. 뷰가전환될때 [housebutton removefromsuperview]; // 객체를뷰에서제거하는메서드 [housebutton sethidden:yes]; // 객체를뷰에서숨기는메서드 - 13 -

3. ( 운영체제접근성기능지원 ) 운영체제가제공하는접근성기능및속성이사용되어야한다. 가 ) 점검기준 1) 입력서식은운영체제에서제공하는접근성속성을활용하여사용자가이해하기쉽도록제공하고있는가? 나 ) 점검방법 1) VoiceOver 기능을사용해모든입력서식에적절한설명을하고있는지판단. * 대표적인좋은사례, 준수사례, 미준수사례 좋은사례준수사례미준수사례 애플 - 게임센터 (2011. 10. 19 캡처 ) 우리은행앱 (2011. 10. 16 캡처 ) OOOOOO 취업도우미앱 (2011. 10. 14 캡처 ) 입력서식의대체텍스트뿐만아니라 입력서식위에설명글귀를함께제공하는경우 입력서식의대체텍스트를 명확하게제공하는경우 입력서식의대체텍스트를제공하지않는경우 - 14 -

다 ) 사례 1) 준수사례 점검내용 준수사례 ( 입력서식에적절한 Label 을삽입해이해하기쉽도록한경우 ) 우체국앱 (2011. 10. 17 캡처 ) 우리은행 (2011. 10.16 캡처 ) 버스앱 (2011. 10. 12 캡처 ) 우체국앱 (2011. 10. 17 캡처 ) - 15 -

2) 미준수사례 점검내용 미준수사례 ( 입력서식에적절한 Label 을제공하지않은경우 ) * 입력서식에텍스트가제공되었다하더라도 VoiceOver 기능이용시읽어주지못한다면미준수사례로인정한다. 마 ) 제공방법 ( 개발방법 ) * Interface Builder 의 Accessibility 속성사용 < Interface Builder 화면 > 1 2 3 일반객체에대체텍스트를적용하는것과동일함 1) Accessibility 속성을반드시활성화 (Enabled) 시킨다. 2) Label 속성에입력서식에대한간략한설명글을적는다. 3) 부가적인설명이필요할경우에는 Hint 속성을활용하여추가적인정보를제공한다. * Interface Builder를사용하지않고 Code로처리 [mytextfield setisaccessibilityelement:yes]; [mytextfield setaccessibilitylabel:@" 이름 "]; [mytextfield setaccessibilityhint:@" 이름을입력하세요."]; - 16 -

4. ( 누르기동작지원 ) 터치 (touch) 기반모바일기기의모든컨트롤은누르기동작으로제어할수있어야한다. 가 ) 점검기준 1) 다중누르기 (Multi-touch) 슬라이드 (Slide), 끌기와놓기 (Drag and drop) 등의복잡한동작을단순한누르기동작으로대체할수있는방법이제공되었는가? 나 ) 점검방법 1) 다중누르기 (Multi-touch), 슬라이드 (Slide), 끌기와놓기 (Drag and drop) 등의복잡한동작을사용하는기능이있는지체크하고해당기능을대체할수있는단순한누르기동작이있는지판단 단순한누르기동작이란? : 한손가락으로동작이가능한터치, 탭등의동작을말한다. 터치란? : 사물에손등이닿는행위탭이란? : 손가락등으로가볍게치는동작 다 ) 사례 1) 준수사례 점검내용 준수사례 ( 단순한누르기동작으로대체할수있는방법을제공한경우 ) 아임 IN 핫스팟앱 (2011. 10. 10 캡처 ) - 17 -

점검내용 준수사례 ( 슬라이드 (Slide), 끌기와놓기 (Drag and drop) 등의복잡한동작을단순한누르기동작으로대체할수있는방법을제공한경우 ) iphone 잠금화면 (2011. 10. 14 캡처 ) 2 1 R-2 Player 앱 (2011. 10. 17 캡처 ) - 18 -

2) 미준수사례 점검내용 준수사례 ( 다중누르기 (Multi-touch) 동작을대체할수있는방법을제공하지않은경우 ) ( 슬라이드 (Slide), 끌기와놓기 (Drag and drop) 등의복잡한동작을단순한누르기동작으로대체할수있는방법을제공하지않은경우 ) 1 OO 맵앱 (2011. 10. 10 캡처 ) OOO 카드 (2011. 10. 14 캡처 ) 2 라디오 OO 앱 (2011. 10. 17 캡처 ) OOOO 용어앱 (2011. 10. 11 캡처 ) - 19 -

라 ) 제공방법 ( 개발방법 ) * 슬라이더 (UISlider) 를사용할경우슬라이더의값을증가, 감소시키는버튼을함께제공한다. < Interface Builder 화면 > 1 2 * Interface Builder 를사용하지않고코딩할경우 - 20 -

* 사용자변형 UI 컴포넌트 (Custom UI Component) 를사용할경우접근성속성을반드시활성화하고다중누르기혹은슬라이더동 작등복잡한동작을사용할경우단순한터치동작도가능하도록한다. < 사용자변형 UI 컴포넌트를사용한경우 > 2 1-21 -

5. ( 색에무관한인식 ) 화면에표시되는모든정보는색에관계없이인식할수있어야한다. 가 ) 점검기준 1) 색상으로정보를구분할경우, 색상이외의다른방법으로도동등한내용을전달하고있는가? 나 ) 점검방법 1) 색상으로정보를구분하는경우, 색상을대체할수있는텍스트, 이미지, 심볼등이있는지판단 다 ) 사례 1) 준수사례 점검내용 준수사례 ( 색상외에도정보를구분할수있도록제공한경우 ) SKT:1.8 KT:1.0 LGU+:0.9 벤치비속도측정앱 (2011. 10. 12 캡처 ) - 22 -

2) 미준수사례 점검내용 1 미준수사례 2 ( 색상으로만정보를표시한경우 ) OO 청 (2011. 10. 10 캡처 ) OOO 속도층정 (2011. 10. 12 캡처 ) 마 ) 제공방법 ( 개발방법 ) * 색상으로정보를구분하는경우색상외에도다음과같은방법등으로정보를구분하는것이바람직하다. 텍스트를함께제공선의종류를다르게표현기호나심볼을함께제공 - 23 -

6. ( 명도대비 ) 화면에표시되는모든정보는전경색과배경색이구분될수있도록최소대비이상으로제공되어야한다. 가 ) 점검기준 1) 화면상의모든정보의최소대비가 3:1 이상인가? 사진과동영상, 로고는예외로한다. 나 ) 점검방법 1) 해당앱페이지의스크린샷을찍어 PC 로가져온후 CCA 2.2 (Colour Contrast Analyser ver.2.2) 프로그램을사용하여전경색과배경색의대비를측정 CCA 2.2 에관한정보참조 (http://www.paciellogroup.com/resources/contrast-analyser.html) 다 ) 점검방법 점검내용 점검화면 1 2 3-24 -

라 ) 사례 1) 준수사례 < 화면상의모든정보의전경색과배경색이최소대비가 3:1 이상인경우 > 5.6:1 메모장앱 (2011. 10. 15) iseoultour 앱 (2011. 10. 12) tbs 앱 (2011. 10. 12) 캘린더앱 (2011. 10. 15) - 25 -

2) 미준수사례 점검내용 미준수사례 ( 화면상의모든정보의전경색과배경색이최소대비가 3:1 이상이아닌경우 ) 1 2 3 1.81:1 OOOO 앱 (2011. 10. 12 캡처 ) 2.2:1 OOOO 앱 (2011. 10. 12 캡처 ) - 26 -

마 ) 제공방법 ( 개발방법 ) * 다음의툴로확인하여모든정보의최소대비를 3:1 이상으로제작한다. CCA 2.2 (Colour Contrast Analyser ver.2.2) 사용방법 3 1 2-27 -

7. ( 자막, 수화등의제공 ) 멀티미디어콘텐츠에는동등한내용의자막, 원고또는수화가제공되어야한다. 가 ) 점검기준 1) 멀티미디어콘텐츠가있을경우, 음성, 자막, 원고또는수화를동등하게제공하는가? 나 ) 점검방법 1) 멀티미디어콘텐츠가있는지판단하고있을경우, 영상외에음성, 자막, 원고또는수화 를동등하게제공하는지판단 점검내용 점검화면 - 28 -

다 ) 사례 1) 준수사례 점검내용 준수사례 ( 영상미디어콘텐츠재생시음성과 자막, 원고또는수화 가동등하게제공되는경우 ) ( 음성미디어콘텐츠재생시 자막, 원고또는수화 가동등하게제공되는경우 ) LinguaTalk 앱 (2011. 10. 17 캡처 ) - 29 -

2) 미준수사례 점검내용 미준수사례 ( 영상미디어콘텐츠재생시 자막, 원고또는수화 를제공하지않은경우 ) ( 음성정보를제공하지않은경우 ) OO 미추앱 (2011. 10. 17 캡처 ) OO 의료앱 (2011. 10. 10 캡처 ) - 30 -

( 정보를함께제공하지않은경우 ) OO 뉴스앱 (2011. 10. 17 캡처 ) OOO 뉴스앱 (2011. 10. 17 캡처 ) ( 요약정보를제공한경우 ) OO 지킴이앱 (2011. 10. 15 캡처 ) - 31 -

Ⅱ. 애플리케이션접근성권고사항 1. ( 컨트롤간충분한간격 ) 컨트롤은충분한간격으로배치하는것이바람직하다. 가 ) 점검기준 1) 컨트롤중심간의간격은 13mm 이상인가? 나 ) 점검방법 1) 사용자의도와무관하게다른컨트롤을누르지않을지판단. 2) 컨트롤중심간의간격이 13mm 이상인지판단. 아이폰으로컨트롤간의간격을측정하기위해서앱스토어에서아래의무료어플리케이션중하나를검색후사용. 1 presize ruler 2 Ruler+ CM 3 Ruler - 32 -

다)준수 사례 2011년 10월 12일 캡처됨 준수 사례 충분한 컨트롤 중심간의 간격(13mm 이상) 미준수 사례 * 탭바의 아이콘은 4개 이하로 만들어야 충분한 컨트롤 중심 간의 간격 (13mm이상)을 제공할 수 있다. 충분하지 않은 컨트롤 중심간의 간격(13mm 이하) - 33 -

라 ) 제공방법 ( 개발방법 ) 점검내용 < Interface Builder 화면 > mm 를 Pixel 로변환하는방법 - 34 -

2. ( 알림기능 ) 사용자에게알림을제공할때에는진동, 시각, 소리등최대한다양한방법으로사용자가선택할수있도록제공 하는것이바람직하다. 가 ) 점검기준 1) 화면상의모든알림정보는한가지양식으로만제공되지않도록하며, 다양한감각양식을활용할수있도록한다.. 나 ) 점검방법 1) 알림창이나타났을때알림창의텍스트가적절하게인지되는지판단. 2) 알림창이나타났을때알림소리와진동이제공되는지판단. 3) 해당어플리케이션내의설정창에알림정보에대해진동, 소리를설정할수있는지판단. 점검내용 점검화면 - 35 -

라 ) 준수사례 알림창의텍스트가적절하게제공 - 36 -

마 ) 제공방법 ( 개발방법 ) 알림창의텍스트를적절하게나타내기 - 37 -

3. ( 사용자인터페이스의일관성 ) 사용자인터페이스요소들의배치를일관성있게제공하는것이바람직하다. 가 ) 점검기준 : 1) 일관성있는 UI 를제공하고있는가? 나 ) 점검방법 1) 해당애플리케이션내의 UI 요소들의위치가동일한지판단. 다 ) 준수사례 iseoultour (2011.10.12 캡처 ) 일관성있는 UI 를제공한경우 교통정보교통정보상세서울베스트서울베스트 1 2 3-38 -

라 ) 미준수사례 일관성있는 UI 를제공하지않은경우 1OO 투데이 2 기부금소득공제알아보기 3 공감퍼즐 4 정부누리집 마 ) 제공방법 ( 개발방법 ) 일관성있는 UI 를제공하기위한방법 - 39 -

4. ( 깜빡거림의사용제한 ) 광과민성발작을일으킬수있는콘텐츠를제공하지않는것이바람직하다. 가 ) 점검기준 1) 깜빡이거나번쩍이는객체를사용자인터페이스에사용하지않았는가? 나 ) 점검방법 1) 육안으로확인했을때깜빡이거나번쩍이는객체가있는지판단. 다 ) 점검방법 점검내용 - 40 -

5. ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않는것이바람직하다. 가 ) 점검기준 1) 자동으로재생되는동영상, 음악, 음성안내를사용하지않았는가? 사용했더라도경우 3 초이하로재생되는가? 나 ) 점검방법 1) 애플리케이션을사용할때자동으로재생되는미디어들이있거나재생이 3초이하로이루어지는지판단. 배경음이나오는페이지에서사용자가손쉽게멈춤, 일시정지, 음량조절등을제어가능한컨트롤러가있는지, 또한, 그컨트롤러를쉽게찾을수가있는지판단. 다 ) 제공방법 ( 개발방법 ) 자동으로재생되는배경음을사용 - 41 -

라 ) 준수사례 준수사례 미준수사례 - 42 -

Ⅲ. 애플리케이션접근성권고사항 ( 평가제외항목 ) 1. 폰트의크기조절 폰트의크기조절, 확대기능을제공하거나운영체제에서제공하는관련기능을활용할수있는방법을제공하는것이바람직하다. 가 ) 권장내용 1) 해당어플리케이션의설정화면에서폰트크기조절기능을제공하도록권장한다. 2) 텍스트를표현할때는이미지보다폰트가지정되어있는텍스트를사용하도록권장한다. Font Family: American Typewriter Font:AmericanTypewriter Font:AmericanTypewriter-Bold Font Family: AppleGothic Font:AppleGothic Font Family: Arial Font:ArialMT Font:Arial-BoldMT Font:Arial-BoldItalicMT Font:Arial-ItalicMT Font Family: Arial Rounded MT Bold Font:ArialRoundedMTBold Font Family: Arial Unicode MS Font:ArialUnicodeMS Font Family: Courier Font:Courier Font:Courier-BoldOblique Font:Courier-Oblique Font:Courier-Bold Font Family: Courier New Font:CourierNewPS-BoldMT Font:CourierNewPS-ItalicMT Font:CourierNewPS-BoldItalicMT Font:CourierNewPSMT Font Family: DB LCD Temp Font:DBLCDTempBlack Font Family: Georgia Font:Georgia-Bold Font:Georgia Font:Georgia-BoldItalic Font:Georgia-Italic Font Family: Helvetica Font:Helvetica-Oblique Font:Helvetica-BoldOblique Font:Helvetica Font:Helvetica-Bold Font Family: Helvetica Neue Font:HelveticaNeue Font:HelveticaNeue-Bold Font Family: Hiragino Kaku Gothic-W3 Font:HiraKakuProN-W3 Font Family: Hiragino Kaku Gothic-W6 Font:HiraKakuProN-W6 Font Family: Marker Felt Font:MarkerFelt-Thin Font Family: STHeiti J Font:STHeitiJ-Medium Font:STHeitiJ-Light Font Family: STHeiti K Font:STHeitiK-Medium Font:STHeitiK-Light Font Family: STHeiti SC Font:STHeitiSC-Medium Font:STHeitiSC-Light Font Family: STHeiti TC * 한글을사용할때는 ios 에서제공하는기본서체인애플고딕을사용하도록권장. Font:STHeitiTC-Light Font:STHeitiTC-Medium Font Family: Times New Roman Font:TimesNewRomanPSMT Font:TimesNewRomanPS-BoldMT Font:TimesNewRomanPS-BoldItalicMT Font:TimesNewRomanPS-ItalicMT Font Family: Trebuchet MS Font:TrebuchetMS-Italic Font:TrebuchetMS - 43 -

나 ) 준수사례 Twitter, 시사경제용어 (2011.10.12 캡처 ) 폰트의크기조절을제공하는경우 - 44 -

2. (Native UI Com ponent) 운영체제에서제공하는기본사용자인터페이스컴포넌트 (Native UI Com ponent) 를최대한이용하는것이바람직하다. 가 ) 권장내용 1) 사용자변형 UI 컴포넌트 (Custom UI Component) 를사용하는경우에는운영체제에서제공하는 VoiceOver 등이 동작하지않을수있어최대한기본사용자인터페이스를활용하는것이바람직하다. 나 ) 기술구현방법 : 모바일애플리케이션을개발함에있어기본사용자인터페이스컴포넌트를최대한활용하는것이접근성을높이는데도움이된다. 1) 애플의 ios에서제공방법 : Native UI Component에는 UIWindow, UILabel, UIPickerView 등이있다. 특히웹페이지를내장하는페이지를만들경우에는 UIWebView를통해작성을하게된다. 다 ) 구축사례 : 대표적인애플과구글의운영체제에서제공하는 Native UI Component 는아래의그림과같다. < ios 에서의 Natiove UI Component > < 안드로이드에서의 Natiove UI Component> - 45 -

3. ( 장애인사용자평가 ) 애플리케이션개발시다양한모바일기기에서의이용가능여부를점검해야하며, 장애인테스트를수행하는것이바람직하다. 가 ) 권장내용 1) 모바일애플리케이션을개발함에있어앞에서말한모든지침항목을준수하여개발하였다하더라도장애인사용자 가실제로사용할수있는지점검하는것이중요 나 ) 준수방법 : 기획단계부터해당애플리케이션에대해장애인사용자평가를수행하는것이바람직하다. 시각, 청각, 상지장애등의다양한장애인사용자를대상으로하는것이좋으며, 고령자도포함하는것이좋다. 또한모바일애플리케이션개발자, 운영자등도운영체제에서제공하는애플의 VoiceOver, 구글의 TalkBalk 등을활용하여지속적으로점검하는것이바람직하다. - 46 -

( 부록 ) 음성읽기기능 (VoiceOver) 켜기 설정 > 일반 > 손쉬운사용 > VoiceOver > VoiceOver 켬 / 끔스위치를터치 팁 ) 홈삼중클릭 을사용하면 VoiceOver 를쉽게 on/off 할수있습니다. 홈삼중클릭사용법 : 설정 > 일반 > 손쉬운사용 > 홈상중클릭 > 원하는기능선택 - 47 -

- * 살짝누르기 : 항목을말합니다. - * 오른쪽또는왼쪽으로쓸어넘기기 : 다음또는이전항목을선택합니다. - * 두손가락으로위로쓸어넘기기 : 화면상단의항목부터모두읽습니다. - * 두손가락으로아래로쓸어넘기기 : 현재위치의항목부터모두읽습니다. - * 세손가락으로위또는아래로쓸어넘기기 : 한번에한페이지를스크롤합니다. - * 세손가락으로오른쪽또는왼쪽으로쓸어넘기기 : 다음또는이전페이지 ( 홈화면, 주가, Safari와같은 ) 로이동합니다. - 두손가락으로 " 문지르기 ": 두손가락을앞, 뒤로세번빠르게이동하여 ("z" 모양으로 ) 경고가사라지게하거나이전화면으로이동합니다. - 위또는아래로쓸어넘기기 : 로터제어기설정에따릅니다. - 두손가락으로살짝누르기 : 현재항목의말하기를중단합니다. - 세손가락으로살짝누르기 : 스크롤상태 ( 보이는페이지또는열 ) 를말합니다. - 네손가락으로화면상단살짝누르기 : 페이지의첫번째항목을선택합니다. - 네손가락으로화면하단살짝누르기 : 페이지의마지막항목을선택합니다. - 네손가락을위로쓸어넘기기 : 화면의첫번째요소를선택합니다. - 네손가락을아래로쓸어넘기기 : 화면의마지막요소를선택합니다. - 48 -

- * 두번살짝누르기 : 선택한항목을활성화합니다. - * 세손가락으로두번살짝누르기 : VoiceOver 소리를끄거나다시켭니다. - 세번살짝누르기 : 항목을세번살짝누르십시오. - 손가락벌려누르기 : 항목선택및두번살짝누르기의대체동작은한손가락으로항목을터치한다음항목을활성화하기위해다른손가락으로화면을살짝누르는것입니다. - 한손가락으로항목을터치하고, 다른손가락으로화면을살짝누르기 (" 손가락벌려누르기 "): 항목을활성화합니다. - 두번살짝누르고유지 (1초) + 표준동작 : 표준동작을사용합니다. 두번살짝누르고유지하는동작은 iphone에서다음연속동작이표준동작으로인식되게합니다. 예를들어두짝누르고유지한다음손가락을떼지않고드래그하여스위치를밀수있습니다. - 두손가락으로두번살짝누르기 : 전화를받거나끊습니다. ipod, YouTube, 음성메모또는사진에서재생하거나일시중지합니다. 사진을찍습니다 ( 카메라 ). 카메라또는음성메모에서녹음을시작하거나일시정지합니다. 스톱워치를시작하거나중지합니다. - 세손가락으로세번살짝누르기 : 화면커튼을켜거나끕니다. 번살 * VoiceOver 의더자세한내용은애플공식문서 (http://manuals.info.apple.com/ko_kr/iphone_user_guide_kh.pdf) 의 제 29 장, 손쉬운사용 을참고하세요. - 49 -

1. 아이덴티티인스펙터 (Identity inspector) 2. 어트리뷰트인스펙터 (Attributes inspector) 3. 사이즈인스펙터 (Size inspector) * Intefacebuilder 에는파일인스펙터 (File inspector), 퀵헬프인스펙터 (Quick help inspector), 아이덴티티인스펙터 (Identity inspector), 어트리뷰트인스펙터 (Attributes inspector), 사이즈인스펙터 (Size inspector), 커넥션인스펙터 (Connections inspector) 등 6 가지 Inspector 가있다. 여기에는이문서에언급된아이덴티티인스펙터, 어트리뷰트인스펙터, 사이즈인스펙터 3 가지에대해서설명한다. - 50 -

아이덴티티인스펙터에서는객체의 Custom Class 와 Accessibility 에관한설정을할수있다. - 51 -

어트리뷰트인스펙터에서는객체의전반적인속성값에대한조절을할수있다. - 52 -

어트리뷰트인스펙터에서는객체의전반적인속성값에대한조절을할수있다. - 53 -