0을 위한 Flash 제… · Web view2012/01/31 · Flash 콘텐츠 접근성 제작 기법 . 한국형 웹 콘텐츠 접근성 지침 2.0(KICS.OT-10.0003/RI, 2010년 12월 31일

Flash 콘텐츠 접근성 제작 기법

- 한국형 웹 콘텐츠 접근성 지침 2.0(KICS.OT-10.0003/RI,2010년 12월 31일 제정)을 중심으로

연구책임자 : 최두진 단장(한국정보화진흥원 정보사회통합지원단)

참여연구원 : 이정재 과장(NHN)

최승길 과장(KTB 투자증권)

홍성원 부장(한국어도비시스템즈)

홍경순 부장(한국정보화진흥원 정보접근지원부)

현준호 책임(한국정보화진흥원 정보접근지원부)

검 토 자 : 김석일 교수(충북대학교 전기전자 및 컴퓨터공학부)

장은경 과장(실로암시각장애인복지관)

김정호 이사(엑스비전테크놀러지)

목 차

1. KWCAG 2.0 가이드 라인____________________________________________________________________91.1 인식의 용이성(Perceivable) – 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.____________________________________101.2 운용의 용이성(Operable) – 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션 할 수 있어야 한다._____________101.3 이해의 용이성(Understandable) – 콘텐츠는 이해할 수 있어야 한다._____________________________________________111.4 견고성(Robust) – 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.__________________________11

2. 플래시 플랫폼의 접근성 지원_________________________________________________________________132.1 들어가며_________________________________________________________________________________________________14

2.1.1 플랫폼 요구사항____________________________________________________________________________________________14

2.1.2 예제 파일__________________________________________________________________________________________________14

2.2 Adobe Flash CS5 의 액세스 가능성 패널(Accessibility Panel)_________________________________________________142.2.1 액세스 가능성 패널의 유형__________________________________________________________________________________15

2.2.2 액세스 가능성 패널의 옵션__________________________________________________________________________________17

2.3 Adobe Flash Builder 와 Flex 의 접근성 활성화_______________________________________________________________182.3.1 Adobe Flash Builder에서 접근성 활성화 설정_________________________________________________________________18

2.3.2 Flex SDK의 전역 설정 파일에서 설정_________________________________________________________________________19

2.3.3 커맨드 라인 컴파일러를 사용한 접근성 활성화__________________________________________________________________20

2.3.4 Adobe LiveCycle Data Services ES를 사용하여 접근성 활성화__________________________________________________20

2.4 ActionScript 3.0 의 접근성 지원____________________________________________________________________________202.4.1 flash.accessibility Package_________________________________________________________________________________20

2.4.2 fl.accessibility Package____________________________________________________________________________________23

2.4.3 mx.accessibility Package__________________________________________________________________________________27

2.4.4 spark.accessibility Package________________________________________________________________________________31

3. KWACG2.0 을 위한 Flash 제작 기법__________________________________________________________573.0 예제 및 튜토리얼 사용 방법_________________________________________________________________________________58

3.0.1 Flash IDE 샘플 및 튜토리얼__________________________________________________________________________________58

3.0.2 Flash Builder 샘플 및 튜토리얼______________________________________________________________________________58

3.1 텍스트가 아닌 객체에 이름(name) 속성 설정_________________________________________________________________623.1.1 설명______________________________________________________________________________________________________62

3.1.2 Adobe Flash Professional의 Accessibility 패널(액세스 가능성 패널)을 사용______________________________________62

3.1.3 ActionScript 3.0을 사용하여 이름(Name) 속성 설정하기________________________________________________________65

3.1.4 Adobe Flex 또는 Adobe Flash Builder에서 이름(Name) 속성 설정하기__________________________________________67

3.1.5 KWCAG 2.0 관련 항목______________________________________________________________________________________69

3.2 텍스트가 아닌 객체에 설명(Description) 속성 설정____________________________________________________________693.2.1 설명______________________________________________________________________________________________________69


3.2.3 ActionScript 3.0을 사용하여 설명(Description) 속성 설정하기__________________________________________________71

3.2.4 Adobe Flex 또는 Adobe Flash Builder에서 설명(Description) 속성 설정하기_____________________________________73

3.2.5 KWCAG 2.0 관련 항목______________________________________________________________________________________75

3.3 보조 도구가 판독 할 수 없는 플래시 객체의 표시_______________________________________________________________753.3.1 설명______________________________________________________________________________________________________75


3.3.3 ActionScript 3.0을 사용하여 silent 속성 설정하기______________________________________________________________77

3.3.4 Adobe Flex 또는 Adobe Flash Builder에서 silent 속성 설정하기________________________________________________78

3.3.5 KWCAG 2.0 관련 항목______________________________________________________________________________________79

3.4 플래시 콘텐츠의 자식 객체에 보조 도구가 접근할 수 없도록 설정________________________________________________803.4.1 설명______________________________________________________________________________________________________80


3.4.3 ActionScript 3.0을 사용하여 silent 속성 설정하기______________________________________________________________83

3.4.4 KWCAG 2.0 관련 항목______________________________________________________________________________________85

3.5 자동 레이블(Auto Labeling)_______________________________________________________________________________853.5.1 설명______________________________________________________________________________________________________85


3.5.3 ActionScript 3.0을 사용하여 noAutoLabeling 속성 설정하기____________________________________________________87

3.5.4 KWCAG 2.0 관련 항목______________________________________________________________________________________88

3.6 동적으로 표시 객체의 접근성 정보 변경 및 변경에 대한 통지____________________________________________________883.6.1 설명______________________________________________________________________________________________________88

3.6.2 Accessibility.updateProperties() 메소드 사용하기_____________________________________________________________89

3.6.3 Adobe Flex 또는 Adobe Flash Builder에서 동적으로 접근성 정보 변경하기_______________________________________93

3.6.4 KWCAG 2.0 관련 항목______________________________________________________________________________________95

3.7 시각적으로 구분할 수 있는 포커스의 제공____________________________________________________________________953.7.1 설명______________________________________________________________________________________________________95

3.7.2 Flash Professional에서 fl 패키지의 UI Component의 포커스 스킨 변경하기_______________________________________95

3.7.3 Flex에서 mx 패키지의 포커스 스킨 변경하기__________________________________________________________________97

3.7.4 사용자 포커스 제작하기_____________________________________________________________________________________102

3.7.5 KWCAG 2.0 관련 항목______________________________________________________________________________________110

3.8 플래시 문서 안에서 논리적으로 읽는 순서를 명시______________________________________________________________1103.8.1 설명______________________________________________________________________________________________________110


3.8.3 ActionScript 3.0을 사용하여 tabIndex 속성 설정하기__________________________________________________________114

3.8.4 KWCAG 2.0 관련 항목______________________________________________________________________________________117

3.9 키보드의 SPACE 키를 사용하여 클릭 이벤트 트리거____________________________________________________________1173.9.1 설명______________________________________________________________________________________________________117

3.9.2 ActionScript를 사용하여 SPACE 키로 클릭 이벤트를 트리거 하는 버튼 제작하기___________________________________117

3.9.3 플래시 저작도구의 fl 패키지와 플렉스의 mx, spark 패키지의 컴포넌트____________________________________________125

3.9.4 KWCAG 2.0 관련 항목______________________________________________________________________________________125

3.10 키보드 단축키의 제공______________________________________________________________________________________1253.10.1 설명______________________________________________________________________________________________________125


3.10.3 ActionScript 3.0을 사용하여 shortcut 속성 설정하기___________________________________________________________129

3.10.4 Flex에서 단축키(shortcut) 속성 설정하기_____________________________________________________________________134

3.10.5 KWCAG 2.0 관련 항목______________________________________________________________________________________136

3.11 폼(Form) 컨트롤의 레이블 설정_____________________________________________________________________________1363.11.1 설명______________________________________________________________________________________________________136

3.11.2 플래시 저작도구에서 Accessibility(액세스 가능성) 패널을 사용한 폼 레이블 설정___________________________________136

3.11.3 플래시 저작도구에서 ActionScript 3.0을 사용한 폼 레이블 설정__________________________________________________141

3.11.4 Flex에서의 폼 레이블 설정__________________________________________________________________________________145

3.11.5 KWCAG 2.0 관련 항목______________________________________________________________________________________148

3.12 테이블의 사용____________________________________________________________________________________________1483.12.1 설명______________________________________________________________________________________________________148

3.12.2 플래시 저작도구에서 드로잉 도구를 사용하여 접근성 있는 테이블 제작____________________________________________148

3.12.3 플래시 저작 도구에서 DataGrid 컴포넌트를 사용하여 접근성 있는 테이블 제작_____________________________________150

3.12.4 Flex에서 DataGrid 컴포넌트를 사용하여 접근성 있는 테이블 제작________________________________________________151

3.12.5 KWCAG 2.0 관련 항목______________________________________________________________________________________153

3.13 자동으로 스크롤 되는 콘텐츠의 제어_________________________________________________________________________1533.13.1 설명______________________________________________________________________________________________________153

3.13.2 Flex를 사용하여 스크롤을 일시 정지 하고 재개하는 컨트롤 제작__________________________________________________153

3.13.3 KWCAG 2.0 관련 항목______________________________________________________________________________________161

3.14 스크린 리더기의 사용 감지_________________________________________________________________________________1613.14.1 설명______________________________________________________________________________________________________161

3.14.2 플래시 어플리케이션과 플래시 플레이어간의 비 동기 통신 확인__________________________________________________162

3.14.3 약간의 시간 차를 두어 정확한 스크린 리더기의 감지____________________________________________________________163

3.14.4 KWCAG 2.0 관련 항목______________________________________________________________________________________165

3.15 스크린 리더를 감지하여 자동으로 재생하는 소리를 정지________________________________________________________1653.15.1 설명______________________________________________________________________________________________________165

3.15.2 플래시 저작도구를 사용하여 스크린 리더기를 감지하여 자동으로 재생하는 소리를 정지하기__________________________165

3.15.3 Flex에서 스크린 리더기를 감지하여 자동으로 재생하는 소리를 정지하기___________________________________________169

3.15.4 KWCAG 2.0 관련 항목______________________________________________________________________________________171

3.16 시간 제한이 있는 콘텐츠의 경우 사용자에게 안내______________________________________________________________1713.16.1 설명______________________________________________________________________________________________________171

3.16.2 Flex를 사용하여 시간 제한이 만료되어감을 안내하고 시간 제한을 연장____________________________________________172

3.16.3 KWCAG 2.0 관련 항목______________________________________________________________________________________176

3.17 읽는 순서가 논리적으로 보장된 메뉴 구조의 제작______________________________________________________________176

3.17.1 설명______________________________________________________________________________________________________176

3.17.2 플래시 저작 도구를 사용하여 논리적으로 읽는 순서가 보장된 메뉴 구조의 제작_____________________________________176

3.17.3 KWCAG 2.0 관련 항목______________________________________________________________________________________182

3.18 복잡한 데이터를 포함하는 그래프나 차트의 설명______________________________________________________________1823.18.1 설명______________________________________________________________________________________________________182

3.18.2 Flex의 차트 컴포넌트로 제작한 차트의 요약 정보 제공__________________________________________________________183

3.18.3 KWCAG 2.0 관련 항목______________________________________________________________________________________187

3.19 색상 정보에 의존하지 않는 차트_____________________________________________________________________________1873.19.1 설명______________________________________________________________________________________________________187

3.19.2 Flex의 ColumnChart의 Custom ItemRenderer 제작___________________________________________________________187

3.19.3 KWCAG 2.0 관련 항목______________________________________________________________________________________195

3.20 폼(양식) 에서 필수 요구사항 표현____________________________________________________________________________1953.20.1 설명______________________________________________________________________________________________________195

3.20.2 플래시 저작도구를 사용하여 폼 양식에 필수 요구사항 표기______________________________________________________196

3.20.3 플렉스를 사용하여 폼 양식에 필수 요구사항 표기_______________________________________________________________198

3.20.4 KWCAG 2.0 관련 항목______________________________________________________________________________________200

3.21 비디오 콘텐츠에 자막 사용_________________________________________________________________________________2013.21.1 설명______________________________________________________________________________________________________201

3.21.2 플래시 저작도구에서 Timed Text XML, FLVPlayback과 FLVPlaybackCaptioning 컴포넌트를 사용한 자막 구현________202

3.21.3 ActionScript 3.0으로 Timed Text XML, FLVPlayback과 FLVPlaybackCaptioning 컴포넌트를 사용한 자막 구현_______205

3.21.4 KWCAG 2.0 관련 항목______________________________________________________________________________________207

3.22 파이어폭스 브라우저에서 키보드 포커스의 트랩 방지___________________________________________________________2083.22.1 설명______________________________________________________________________________________________________208

3.22.2 SWFFocus.as 클래스를 사용하여 키보드 포커스의 트랩 회피____________________________________________________209

3.22.3 KWCAG 2.0 관련 항목______________________________________________________________________________________215

4. 사용자 접근성 구현 클래스의 제작____________________________________________________________2174.1 사용자(커스텀) 접근성 구현 클래스__________________________________________________________________________218

4.1.1 사용자 접근성 구현 클래스의 필요성__________________________________________________________________________218

4.1.2 AccessibilityImplementation 클래스_________________________________________________________________________218

4.1.3 Accessibility 구현 상수 목록_________________________________________________________________________________220

4.2 – 튜토리얼 사용자 접근성 구현 클래스 제작 : Slider (flash package)_____________________________________________2284.2.1 프로젝트 생성 및 환경 설정하기______________________________________________________________________________228

4.2.2 기반 클래스 제작___________________________________________________________________________________________237

4.2.3 슬라이더 컴포넌트 및 슬라이더의 접근성 구현 클래스 제작______________________________________________________252

4.2.4 CustomAccessibilityImplement – 도큐먼트 클래스____________________________________________________________268

4.2.5 검토______________________________________________________________________________________________________269

4.3 Flex 에서 사용자 컴포넌트 접근성 구현______________________________________________________________________2694.3.1 Flex 프레임웍의 접근성 구현_________________________________________________________________________________270

4.4 – 튜토리얼 사용자 접근성 클래스 제작 : Degree Selector(mx package)_________________________________________2764.4.1 DegreeSelector 클래스_____________________________________________________________________________________277

4.4.2 DegreeSelectorAccImpl 클래스_____________________________________________________________________________279

4.4.3 접근성 향상________________________________________________________________________________________________281

5. 테스트 도구________________________________________________________________________________2835.1 Microsoft Windows SDK 7.1______________________________________________________________________________284

5.1.1 Accessible Event Watcher_________________________________________________________________________________284

5.1.2 Inspect Objects___________________________________________________________________________________________285

5.2 UI Accessiblility Checker(AccChecker)____________________________________________________________________287

6. 참고 자료__________________________________________________________________________________2916.1 Adobe Flash CS5 의 접근성을 지원하는 구성 요소(Component)_______________________________________________292

6.1.1 Button 구성 요소의 상호작용과 접근성 활성화_________________________________________________________________293

6.1.2 CheckBox 구성 요소의 상호작용과 접근성 활성화______________________________________________________________293

6.1.3 ComboBox 구성 요소의 상호작용과 접근성 활성화_____________________________________________________________294

6.1.4 DataGrid 구성 요소의 상호작용과 접근성 활성화_______________________________________________________________294

6.1.5 List 구성요소의 상호작용과 접근성 활성화_____________________________________________________________________295

6.1.6 RadioButton 구성요소의 상호작용과 접근성 활성화____________________________________________________________296

6.1.7 TileList 구성요소의 상호작용과 접근성 활성화_________________________________________________________________296

6.2 Flex 4 의 접근성 있는 구성 요소(Component) 와 컨테이너(Container)__________________________________________2976.2.1 Spark 컴포넌트____________________________________________________________________________________________297

6.2.2 MX 컴포넌트_______________________________________________________________________________________________301

6.2.3 AdvancedDataGrid의 접근성 사용___________________________________________________________________________310

6.3 ActionScript 3.0 이전 버전에서의 접근성 지원_______________________________________________________________3126.3.1 _accProps 전역 속성_______________________________________________________________________________________313

6.3.2 Accessibility 클래스________________________________________________________________________________________313

6.3.3 hasAccessibility 속성______________________________________________________________________________________314

9 / 307

1.KWCAG 2.0 가이드 라인

10 / 307

6. 참고 자료

1.1 인식의 용이성(Perceivable) – 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.인식의 용이성이란 사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식 할 수 있도록 콘텐츠를 제공하는 것을 의미합니다. 인식의 용이성은 대체 텍스트, 멀티미디어 대체 수단, 명료성 세 가지의 지침과 그에 해당하는 여섯 개의 검사 항목으로 이루어져 있습니다.

지침 검사 항목

1.1 (대체 텍스트) 텍스트가 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.

1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

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

1.2.1(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 합니다.

1.3(명료성) 콘텐츠는 명확하게 전달되어야 한다. 1.3.1(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.1.3.2(명확한 지시 사항 제공) 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.1.3.3(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경간의 명도 대비는 4.5 대 1 이상이어야 한다.1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.

1.2 운용의 용이성(Operable) – 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션 할 수 있어야 한다.운용의 용이성이란 사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 기능을 운용할 수 있게 제공하는 것을 의미합니다. 운용의 용이성은 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션의 네 가지의 지침과 그에 해당하는 여덟 개의 검사 항목으로 이루어져 있습니다.


2.1(키보드 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다. 2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

2.2(충분한 시간 제공) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.

2.2.1(응답 시간 조절) 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다.2.2.2(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

2.3(광과민성 발작 예방) 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.

2.3.1(깜빡임과 번쩍임 사용 제한) 초당 3~50 회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

2.4(쉬운 내비게이션) 콘텐츠는 쉽게 내비게이션 할 수 있어야 한다.

2.4.1(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너 뛸 수 있어야 한다.2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.2.4.3(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

11 / 307

6. 참고 자료

1.3 이해의 용이성(Understandable) – 콘텐츠는 이해할 수 있어야 한다.이해의 용이성이란 사용자가 장애의 유무와 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미합니다. 이해의 용이성은 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움의 네 가지의 지침과 그에 해당하는 여섯 가지의 검사 항목으로 이루어져 있습니다.


3.1(가독성) 콘텐츠는 읽고 이해하기 쉬워야 한다. 3.1.1(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.3.2(예측 가능성) 콘텐츠의 기능과 실행 결과는 예측 가능해야 한다.

3.2.1(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.

3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다. 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.3.3.2 (표의 구성) 표는 이해하기 쉽게 구성해야 한다.

3.4(입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다. 3.4.1(레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다.3.4.2(오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

1.4 견고성(Robust) – 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.견고성이란 사용자가 기술에 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이용할 수 있도록 제공하는 것을 의미합니다. 견고성은 문법 준수, 웹 애플리케이션 접근성의 두 가지 지침과 그에 해당하는 두 가지의 검사 항목으로 이루어져 있습니다.


4.1(문법 준수) 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.

4.1.1(마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

4.2(웹 애플리케이션 접근성) 웹 애플리케이션은 접근성이 있어야 한다.

12 / 307

6. 참고 자료

13 / 307

2.플래시 플랫폼의 접근성 지원

14 / 307

6. 참고 자료

1.5 들어가며Adobe Flash Player 는 크로스 플랫폼을 지향하는 브라우저의 플러그인 입니다. Flash 개발자나 디자이너들은 텍스트, 비디오, 사운드, 이미지, 벡터 기반의 그래픽, 애니메이션 등의 다양한 요소들을 사용하여 웹 어플리케이션이나 컴포넌트들을 제작하고 웹에 배포합니다. 하지만 Flash Player 에서 재생하는 콘텐츠들도 다른 웹 콘텐츠들과 마찬가지로 다양한 사용자에 대한 접근성 기준을 보장해야 한다는 것은 매우 중요한 일입니다.

Adobe Flash Player 는 접근성과 관련하여 스크린 리더기와 같은 보조 도구(보조공학)들이 콘텐츠에 접근하여 판독할 수 있도록 내부적으로 접근성 API 를 제공하고 있습니다. 플래시의 접근성은 MSAA(Microsoft Active Accessibility) 인터페이스를 구현한 보조 도구(MSAA 클라이언트)를 지원하며, 플래시 콘텐츠에 대한 정보를 MSAA 인터페이스를 사용하여 보조 도구로 전달하도록 구현이 되어 있습니다

1.5.1 플랫폼 요구사항Adobe Flash Player 는 접근성을 지원하기 위해 MSAA 인터페이스를 사용합니다. 그렇기 때문에 접근성 있는 플래시 콘텐츠를 제작하더라도 Microsoft Windows 플랫폼 환경에서만 스크린 리더기가 플래시 콘텐츠를 탐색하고 읽을 수 있습니다. 그리고 Microsoft Internet Explorer 브라우저와 Flash Player Active-X 컨트롤에서 가장 잘 동작합니다.

스크린 리더기가 플래시 콘텐츠를 인지하고 상호작용을 하기 위한 플랫폼 요구사항은 다음과 같습니다.• Microsoft Windows98 이상의 Windows OS• Microsoft Internet Explorer 6 또는 그 이상의 버전, Mozilla Firefox 3 또는 그 이상의 버전

• Adobe Flash Player 6 또는 그 이상의 버전

• 브라우저에 플래시 콘텐츠를 삽입하기 위해 사용하는 wmode 값이 transparent 또는 opaque 일 경우에는 MSAA 인터페이스를 사용할 수 없습니다.

1.5.2 예제 파일이 문서에 기술된 예제 파일들은 Flash Professional CS5.5, Flash Builder 4.5 그리고 ActionScript 3.0 을 사용하여 제작하였으나, 이 앞에 열거한 제품의 버전에서 적용할 수 있는 것은 아닙니다. ActionScript 버전이 3.0 이라면 ActionScript 3.0 을 지원하는 플래시 저작도구에서 동일한 방법으로 제작을 할 수 있습니다.

1.6 Adobe Flash CS5 의 액세스 가능성 패널(Accessibility Panel)Adobe Flash 는 Flash MX 버전부터 현재의 버전까지 “액세스 가능성(Accessibility) 패널”을 통해 접근성 있는 콘텐츠를 제작할 수 있는 기능을 추가하였습니다. 액세스 가능성 패널은 Adobe Flash 의 메뉴에서 “윈도우 > 기타 패널 > 액세스 가능성”을 선택하거나 Alt+Shift+F11 키를 눌러 화면에 노출시킬 수 있습니다.

또한 Flash 문서에서 기본적으로 접근성을 지원하는 요소들이 있습니다. 이 요소들은 액세스 가능성 패널을 사용하지 않더라도 기본적으로 Adobe Flash Player 상에서 스크린 리더기가 접근할 수 있도록 정보를 제공합니다.• 동적 텍스트 또는 정적 텍스트 : 텍스트 필드 안의 텍스트가 스크린 리더기에 Name 값으로 전송이 됩니다.• 입력 텍스트 필드 : 텍스트가 스크린 리더기에 전송이 됩니다. 입력 텍스트 필드 주변에 정적 텍스트가 위치하여 일종의

레이블(Form – 양식) 관계를 가지고 있으면, 이 정적 텍스트의 내용이 Name 값으로 스크린 리더기에 전송이 됩니다. 설명

(Description)이나 키보드 단축키(Short cut) 내용은 전달하지 않습니다.• 버튼 : 버튼의 상태(State)가 스크린 리더기로 전송됩니다. 버튼 내부에 텍스트로 레이블이 있는 경우 Name 값으로 스크린

리더기에 전송이 됩니다. 설명(Description)이나 키보드 단축키(Short cut) 내용은 전달하지 않습니다.• 플래시 문서 : 문서의 상태(State)가 스크린 리더기로 전송이 됩니다. 하지만 이름(Name)이나 설명(Description) 내용은

전달하지 않습니다.

액세스 가능성 패널은 Adobe Flash 에서 선택한 객체의 종류에 따라 다른 형태로 나타납니다.

15 / 307

6. 참고 자료

1.6.1 액세스 가능성 패널의 유형A. 플래시 문서

그림 1 플래시 문서를 선택한 상태에서의 액세스 가능성 패널

B. 무비 클립 심볼

그림 2 무비 클립 심볼을 선택한 상태에서의 액세스 가능성 패널

16 / 307

6. 참고 자료

C. 버튼 심볼

그림 3 버튼 심볼을 선택한 상태에서의 액세스 가능성 패널

D. 동적 텍스트 필드

그림 4 동적 텍스트 필드를 선택한 상태에서의 액세스 가능성 패널

17 / 307

6. 참고 자료

E. 입력 텍스트 필드

그림 5 입력 텍스트 필드를 선택한 상태에서의 액세스 가능성 패널

1.6.2 액세스 가능성 패널의 옵션A. 객체를 액세스 가능하게 만들기(Make Object Accessible)

객체의 접근성 정보를 스크린 리더기가 판독할 수 있도록 Flash Player 에 지시합니다. 이 옵션을 해제하면 객체의 접근성 정보가 스크린 리더기에 전달되지 않습니다. 콘텐츠 내용과 관련이 없거나 배경, 장식용으로 제작한 객체들에 이 옵션값을 설정하여 접근 가능하게 만든다면, 오히려 스크린 리더기와 같은 보조 도구 사용자들을 불편하거나 혼란스러울 수 있습니다. 이 값을 사용하지 않으면 액세스 가능성 패널에서 제공하는 다른 옵션들도 모두 사용할 수 없도록 비활성화 됩니다.

B. 자식 객체 액세스 가능(Make Child Object Accessible)

무비 클립 안에 있는 자식 객체들도 스크린 리더기가 판독할 수 있도록 Flash Player 에 지시합니다. 이 옵션을 해제하면 무비 클립 객체 안에 있는 텍스트, 버튼, 무비 클립 등에 대한 접근성 있는 자식 객체들이 스크린 리더기가 판독할 수 없게 됩니다. 이 기능은 내용과 관련 없는 무비 클립의 자식 객체들을 스크린 리더기에 숨길 때 유용하게 사용할 수 있습니다.

C. 자동 레이블(Auto Label)

스테이지 객체에 자동으로 레이블을 지정하도록 Flash Player 에 지정합니다. 이 값을 사용하면 입력 텍스트 필드나 폼(양식) 요소(입력 텍스트 필드)의 위나 왼쪽에 있는 정적 텍스트를 입력 텍스트 필드나 폼 요소의 레이블로 자동으로 지정하게 됩니다. 하지만, 폼을 구성할 때 명시적으로 레이블 값을 지정해주는 것을 권장합니다.

D. 이름(Name)

객체의 이름을 지정합니다. 스크린 리더기는 텍스트가 아닌 객체의 이 이름을 읽어 객체를 식별합니다. 예를 들어 버튼 심볼에 이름이 지정이 되지 않았다면, 스크린 리더기는 “버튼” 이라는 일반적인 객체의 유형을 읽게 되므로 정확한 정보의 전달을 할 수 없게 됩니다. 스크린 리더기에 전달하고자 하는 내용 그래픽 요소에 대한 대체 텍스트를 지정할 때 사용하는 필드입니다. HTML에서 alt 속성에 해당합니다.

이 값은 Adobe Flash 의 속성(Properties) 패널에서 지정한 인스턴스 이름과 다른 개념입니다.

E. 설명(Description)

객체에 대한 설명을 지정합니다. 객체를 설명하기에 Name 으로 설명하기에는 긴 설명문을 제공할 때 사용하는 필드이며, 스크린 리더기는 접근성 정보에서 이름을 읽은 다음 설명을 읽습니다. 그렇기 때문에 이름 필드에 작성한 값과 동일한 내용을 설명

18 / 307

6. 참고 자료

필드에 작성하게 되면 스크린 리더기는 동일한 내용을 두 번 읽는다는 점에 주의해야 합니다. 이 옵션은 HTML 에서의 longdesc 속성에 해당합니다.

F. 단축키(Shortcut)

스크린 리더기 사용자에게 현재 위치한 객체에 대한 단축키를 설명합니다. 예를 들어 “실행” 이라는 버튼에 대해 “Control+7” 이라고 입력하면 스크린 리더기는 해당한 객체에 대한 이름인 “실행 버튼”을 읽은 후 “컨트롤 칠” 이라는 단축키를 읽습니다. 사용자들이 자주 사용할 만한 기능에 단축키에 대한 정보를 제공함으로써, 스크린 리더기 사용자는 쉽게 기능을 사용할 수 있습니다.

주의할 점은 단축키 필드를 작성한다고 자동으로 단축키가 기능으로써 구현되지 않는 다는 것입니다. 단축키를 눌렀을 때 기능을 수행하기 위해서는 ActionScript 를 사용하여 그 기능을 직접 구현해야 합니다. 이 값은 단지 기능에 대한 단축키의 맵핑 역할만 할 뿐입니다.

G. 탭 인덱스(Tab Index)

사용자가 Tab 키를 누를 때 마다 객체에 접근하는 순서를 지정합니다. 일반적으로 논리적인 또는 선형적인 문서 구조로 만들어진 웹 페이지는 문서의 구조대로 스크린 리더기가 문서를 읽습니다. 하지만, 논리적이거나 선형적인 문서 구조를 사용할 수 없는 플래시의 경우에는 탭 인덱스의 순서를 통해서 스크린 리더기가 문서를 읽을 수 있도록 제어를 할 필요가 있습니다.

탭 인덱스는 0 부터 시작하는 순차적인 숫자로 지정을 하며, 여러 개의 객체가 동일한 탭 인덱스를 가질 수 없습니다. 스크린 리더기는 탭 인덱스가 작은 값에서부터 큰 값의 순서대로 읽습니다.

1.7 Adobe Flash Builder 와 Flex 의 접근성 활성화Flex 어플리케이션을 개발할 때 Flash Builder(또는 Flex Builder)를 사용하거나 Flex SDK 를 사용하여 Flex 어플리케이션을 개발합니다. Flex 에서는 어플리케이션에 대한 접근성은 기본적으로 활성화 되어 있습니다. 전역적으로 Flex 어플리케이션에 대한 접근성 활성화 방법은 Flex 통합 개발 도구인 Adobe Flash Builder (또는 Adobe Flex Builder)의 컴파일러 옵션에서 설정하거나 Flex Framework 에 대한 전역적인 설정 파일을 변경하거나 또는 커맨드 라인 명령을 통해 직접적으로 접근성에 대한 컴파일러 옵션을 명시하여 활성화 할 수 있습니다.

1.7.1 Adobe Flash Builder 에서 접근성 활성화 설정Adobe Flash Builder 에서 제작하는 Flex 어플리케이션에 대한 접근성을 활성화 시키려면 다음 단계를 수행합니다.1. Project > Properties 선택 또는 Project Explorer 에서 해당 Project 우 클릭 > Properties 선택2. 프로젝트의 Properties 다이얼로그에서 Flex Complier 항목 선택

3. Generate accessible SWF file 을 체크 박스 선택

19 / 307

6. 참고 자료

그림 6 프로젝트의 Properties 다이얼로그에서 Flex 어플리케이션에 대한 전역적인 접근성 설정 화면

Generate accessible SWF file 체크 상자의 설정 값에 따라 프로젝트 내부에 있는 프로젝트 속성 파일(.actionScriptProperties)의 컴파일러 옵션 값이 변경이 됩니다.1. Generate accessible SWF file 값을 설정했을 때

<compiler additionalCompilerArguments="-locale en_US" generateAccessible="true" … 이하 생략 />

2. Generate accessible SWF file 값을 설정하지 않았을 때

<compiler additionalCompilerArguments="-locale en_US" generateAccessible="false" … 이하 생략 />

1.7.2 Flex SDK 의 전역 설정 파일에서 설정Flex SDK 가 있는 디렉터리 안의 frameworks 폴더 안에는 Flex 어플리케이션의 전역적인 설정 값을 저장하는 flex-config.xml 파일이 있습니다. 이 설정 파일 내의 <compiler/> 노드 안의 <accessible/> 의 값을 true 로 설정하면 모든 Flex 어플리케이션에 대해 전역적으로 접근성을 활성화 할 수 있습니다.

C:\{Flex 4 SDK}\frameworks\flex-config.xml ({Flex 4 SDK}는 Flex 4의 SDK가 설치된 경로입니다.)

<?xml version="1.0"?>

<flex-config> 

20 / 307

6. 참고 자료

<target-player>10.0.0</target-player>

<compiler>

 <accessible>true</accessible>

</compiler></flex-config>

1.7.3 커맨드 라인 컴파일러를 사용한 접근성 활성화Flex SDK 에 포함되어 있는 Flex 컴파일러(mxmlc)를 사용하여 Flex 어플리케이션의 접근성을 활성화 할 수 있습니다. Flex 컴파일러를 사용하면 flex-config.xml 에 설정되어 있는 값을 덮어쓰기 하며, 설정한 컴파일러 옵션값을 적용합니다. 컴파일러 옵션 중 -compiler.accessible 또는 –accessible 옵션을 사용하여 Flex 어플리케이션의 접근성 기능을 활성화 합니다.mxmlc -compiler.accessible c:/dev/myAccessibleApps/myAccessibility.mxmlmxmlc -accessible c:/dev/ myAccessibleApps / myAccessibility.mxml

1.7.4 Adobe LiveCycle Data Services ES 를 사용하여 접근성 활성화Adobe LiveCycle Data Services ES 를 사용하면 MXML 파일을 동적으로 컴파일 하여, MXML 파일 그 자체를 html처럼 그대로 웹사이트 배포할 수 있습니다. 이 경우에는 URL 파라미터에 accessible 이라는 파라미터 값을 추가함으로써 동적으로 Flex 어플리케이션의 접근성을 활성화 할 수 있습니다.http://www.mycompany.co.kr/accessble/flex/myAccessible.mxml?accessble=true

1.8 ActionScript 3.0 의 접근성 지원ActionScript 3.0 에서는 접근성을 지원하기 위한 여러 가지의 리소스가 있습니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트와의 정보를 교환하기 위해서 MSAA(Microsoft Active Accessibility) 인터페이스에 최적화 되어 있습니다. ActionScript 3.0 에서는 MSAA 인터페이스를 구현하기 위한 접근성과 관련한 리소스가 있으며, 이러한 리소스를 사용하여 직접 스크린 리더기와 정보를 교환하는 UI 컴포넌트(또는 클래스)를 제작할 수 있습니다. 또한 사용자의 환경이 스크린 리더기를 사용할 수 있는 환경인지, 또는 스크린 리더기를 사용 중인지를 감지할 수 있습니다.

1.8.1 flash.accessibility Packageflash.accessibility 패키지에는 Flash 로 제작한 콘텐츠 내용과 Flash 로 제작한 어플리케이션의 접근성을 지원하는 클래스들이 있습니다.

A. Accessibility Class

Accessibility 클래스는 Flash Player 와 스크린 리더기간의 통신을 관리합니다. Flash Player 가 스크린 리더기와 현재 통신 중인지를 확인하고, Flash 콘텐츠 내용 중 갱신된 내용들이 있을 때, 스크린 리더기로 변경된 내용들을 일괄적으로 통지하는 기능을 수행합니다.• active 속성

Accessibility.active 속성을 사용하면 사용자가 현재 스크린 리더기를 사용 중인지의 여부를 확인할 수 있고, 스크린

리더기의 사용 여부에 따라 플래시 콘텐츠를 다르게 구성할 때 유용합니다. 이 속성의 값이 true라면, 사용자는 스크린

리더기를 사용하고 있음을 의미합니다.

플래시 콘텐츠가 처음 실행 될 때, 실제 사용자가 스크린 리더기를 사용하고 있는 중이라 하더라도, Accessibility.active 속성 값이 false로 반환 될 수가 있습니다. Flash Player 와 시스템간의 통신이 비동기적, 즉 통신이 완료되기 까지 약간의 지연이 생길 수 있기 때문입니다. setTimeout 과 같은 함수를 사용하여 플래시 콘텐츠가 실행된 후 약간의 시간이 지난 후에 Accessibility.active 값을 확인 하는 방법을 권장합니다.

21 / 307

6. 참고 자료

• updateProperties() 메소드

플래시 콘텐츠 내의 접근성 정보가 변경 되었을 때, 예를 들어 Play 버튼을 클릭해서 Pause 버튼으로 변경이 되었을 때처럼

변경된 정보를 스크린 리더기로 전송할 때 사용하는 메소드입니다. 이 메소드를 호출하면 변경된 모든 내용들을 한번에

일괄적으로 스크린 리더기로 전달하기 때문에, 접근성 정보를 매번 변경할 때마다 이 메소드를 호출할 필요가 없습니다.

만약 스크린 리더기를 지원하지 않는 환경에서 Accessibility.updateProperties() 메소드를 호출하면, IllegalOperationError 라는 오류가 발생합니다. 오류를 방지하려면 사용자의 시스템 환경이 보조도구를 지원하는지의 여부를 확인하는 flash.system.Capabilities.hasAccessibility 속성 값이 true인지를 먼저 확인 한 후, Accessibility.updateProperties() 메소드를 호출하도록 합니다.

B. AccessibilityProperties Class

AccessibilityProperties 클래스는 스크린 리더기와 같은 보조 도구에 전달하는 플래시 콘텐츠 또는 콘텐츠 내부의 요소에 대한 접근성 정보를 포함한 클래스입니다. AccessibilityProperties는 DisplayObject 클래스를 상속받은 클래스들의 accessibilityProperties 라는 속성으로 화면 표시 객체에 연결이 되어 있습니다. AccessibilityProperties 클래스의 속성들은 Flash 의 액세스 가능성 패널 안의 항목들과 매칭을 합니다. 하지만 액세스 가능성 패널과 AccessibilityProperties 에서 중복으로 접근성 정보를 설정했을 경우, 액세스 가능성 패널에서 정의한 접근성 정보들은 AccessibilityProperties의 속성들에 의해 재정의 됩니다.

AccessibilityProperties 클래스는 다음과 같은 속성들을 가지고 있습니다.• name 속성

스크린 리더기와 같은 보조 도구가 인식하는 객체의 이름입니다. 접근성 있는 콘텐츠를 제작할 때의 가장 중요한 항목이

객체의 이름을 의미 있게 지정하는 것입니다. name 속성은 SWF 문서 전체, 버튼, 무비 클립, 입력 텍스트 객체에 지정할 수

있습니다. 이 속성은 Flash 의 액세스 가능성 패널 안의 [이름] 필드에 해당하는 값입니다.• description 속성

스크린 리더기와 같은 보조 도구가 인식하는 객체의 설명입니다. 객체에 대해 표시할 내용이 많은 경우 name 속성에는

간결한 내용을 넣고, description 속성에는 대부분의 내용을 넣습니다. description 속성은 SWF 문서 전체, 버튼, 무비

클립, 동적 텍스트, 입력 텍스트 객체에 지정할 수 있습니다. 이 속성은 Flash 의 액세스 가능성 패널 안의 [설명] 필드에

해당하는 값입니다.• noAutoLabeling 속성

플래시 콘텐츠 내부에서 버튼 안의 레이블이나 폼 형태에서 입력 텍스트 주변에 있는 텍스트를 자동으로 레이블로 지정하는

기능을 하는 속성입니다. 이 값이 true 로 설정이 되면 자동 레이블을 하지 않습니다. noAutoLabeling 속성은 플래시

콘텐츠의 전역적으로 적용이 되며, Flash Player 가 스크린 리더기와 통신하기 전, 최대한 빨리 설정이 되어 있어야 합니다. 그 이후에 설정하는 값들은 무시가 됩니다.

• forceSimple 속성

DisplayContainer 안의 자식 객체에도 스크린 리더기와 같은 보조 도구가 접근할 수 있는지에 대한 여부를 결정합니다. 이

값이 true 이면 스크린 리더기는 컨테이너 안의 자식 객체에 접근할 수 없습니다. forceSimple 속성은 SWF 문서 전체와

Sprite, MovieClip 등 컨테이너의 역할을 하는 객체에 지정할 수 있습니다. 이 속성은 Flash 의 액세스 가능성 패널 안의 [자식 객체 액세스 가능] 체크 박스와 역 논리 값에 해당합니다.

• silent 속성

표시 객체에 스크린 리더기와 같은 보조 도구가 접근할 수 있는지에 대한 여부를 결정합니다. 이 값이 true 이면 스크린

리더기는 해당 객체에 접근할 수 없습니다. 스크린 리더기와 같은 보조 도구에 대해서 객체에 접근할 수 없도록 하려면 이

속성을 이용합니다. silent 속성은 SWF 문서 전체와 버튼, 무비 클립, 동적 텍스트, 입력 텍스트 객체에 지정할 수

있습니다. 이 속성은 Flash 의 액세스 가능성 패널 안의 [객체를 액세스 가능하게 만들기|객체 액세스 가능] 체크 박스와 역

논리 값에 해당합니다.• shortcut 속성

표시 객체와 연결이 되는 단축키를 지정하는 속성입니다. 이 값이 “F” 라는 문자열을 지정하면 스크린 리더기는 표시 객체를

읽을 때, 단축키 “F”의 정보도 함께 알려줍니다. 이 값을 지정한다 하더라도 자동으로 단축키의 실행 기능은 제공되지

22 / 307

6. 참고 자료

않습니다. 단축키를 눌렀을 때의 실행 기능은 KeyboardEvent 의 이벤트 객체를 수신하여 별도로 구현해야 합니다. 두 개

이상의 키를 조합하여 지정할 경우에는 “Ctrl+F” 와 같은 형태로 플러스(+) 문자열을 사용하여 조합합니다. shortcut 속성은 버튼, 무비 클립, 입력 텍스트 객체에 지정할 수 있습니다. 이 속성은 Flash 의 액세스 가능성 패널 안의 [단축키] 필드에 해당합니다.

속성 데이터 유형 액세스 가능성 패널에서 해당하는 옵션 적용 범위

name String 이름 SWF 문서 전체

버튼

무비 클립

입력 텍스트

description String 설명 SWF 문서 전체

버튼

무비 클립

동적 텍스트

입력 텍스트

silent Boolean 동영상을 액세스 가능하게 만들기/객체 액세스 가능(역 논리)

SWF 문서 전체

버튼

무비 클립

동적 텍스트

입력 텍스트

forceSimple Boolean 자식 객체 액세스 가능(역 논리) SWF 문서 전체

무비 클립

shortcut String 단축키 버튼

무비 클립

입력 텍스트

[참고] Flash 의 액세스 가능성 패널 안에 있는 [탭 인덱스] 값은 InteractiveObject 클래스의 tabIndex 속성에 해당합니다.

C. AccessibilityImplementation Class

AccessibilityImplementation 클래스는 UI 컴포넌트의 접근성을 구현하는데 사용하는 기본 클래스로, 클래스 내부에 정의된 메소드들은 IAccessible 인터페이스의 하위 세트입니다. 이 클래스는 UI 객체의 역할(Role), 이벤트(Event), 상태(State)에 대한 정보를 개발자가 직접 스크린 리더기와 같은 보조도구로 보낼 수 있도록 다양한 메소드를 제공합니다.

fl.accessibility 패키지 안의 AccImpl 클래스는 AccessibilityImplementation 클래스를 직접 상속받은 클래스로 fl 패키지 안의 UI 컴포넌트의 접근성 구현을 위한 기본 클래스입니다. 이 클래스들 안에는 스크린 리더기로 객체의 접근성 정보(역할, 이벤트, 상태)를 전달하기 위한 상수가 정의되어 있습니다. Flash Player 는 MSAA 를 지원하며, AccessibilityImplementation 클래스가 IAccssible 인터페이스의 하위 집합이기 때문에 MSAA 에 정의된 값 을 사용합니다.

객체의 역할, 이벤트, 상태를 직접 정의하여 개발을 하거나 접근성 지원이 되는 UI 컴포넌트 셋을 제작할 때, AccessibilityImplementation 클래스를 사용합니다.

1.8.2 fl.accessibility Packagefl.accessibility 패키지에는 Flash 의 UI 컴포넌트들의 접근성을 지원하는 클래스들이 들어 있습니다. 이 패키지 안의 UIComponentAccImpl 클래스를 제외한 나머지 클래스들은 AccImpl 클래스를 상속받습니다. Flash 의 UI 컴포넌트의 접근성을 활성화 하려면 각각의 접근성 구현 클래스 안의 enableAccessibility() 메소드를 호출합니다. 이 메소드는 한 번 호출하면 관련된 UI 컴포넌트의 인스턴스의 접근성 정보가 활성화 됩니다.

http://msdn.microsoft.com/en-us/library/dd318024(v=VS.85).aspx

23 / 307

6. 참고 자료

A. ButtonAccImpl

이 클래스는 Button 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. Button 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role

∘ ROLE_SYSTEM_PUSHBUTTON (0x2B) - HTML 마크업에서 input 태그의 button 어트리뷰트에 해당합니다. 푸시 버튼 컨트롤을 나타냅니다.

2. State∘ STATE_SYSTEM_NORMAL (0x00000000) – 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) – 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_PRESSED (0x00000008) – 객체가 눌려진 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) – 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가 되어 있는

상태입니다.3. Event

∘ EVENT_OBJECT_STATECHANGE (0x800A) – 객체의 상태가 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_NAMECHANGE (0x800C) – 객체의 Name 속성이 변경되었을 때의 이벤트입니다.

Button 컴포넌트의 접근성을 활성화 하려면 ButtonAccImpl.enableAccessibility() 메소드를 호출합니다. Space 나 Enter 키를 사용하여 Button 컴포넌트의 기능을 실행합니다.

B. CheckBoxAccImpl

이 클래스는 CheckBox 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. CheckBox 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role

∘ ROLE_SYSTEM_CHECKBUTTON (0x2C) - HTML 에서 input태그의 checkbox 어트리뷰트에 해당합니다. 체크박스 컨트롤을 나타냅니다.

2. State∘ STATE_SYSTEM_NORMAL (0x00000000) - 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) - 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) - 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_PRESSED (0x00000008) - 객체가 눌려진 상태입니다.∘ STATE_SYSTEM_CHECKED (0x00000010) – 객체의 체크박스가 체크된 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) - 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가 되어 있는


∘ EVENT_OBJECT_STATECHANGE (0x800A) - 객체의 상태가 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_NAMECHANGE (0x800C) - 객체의 Name 속성이 변경되었을 때의 이벤트입니다.

CheckBox 컴포넌트의 접근성을 활성화 하려면 CheckBoxAccImpl.enableAccessibility() 메소드를 호출합니다. Space 나 Enter 키를 사용하여 CheckBox 컴포넌트의 기능을 실행합니다.

C. ComboBoxAccImpl

이 클래스는 ComboBox 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. ComboBox 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role

∘ ROLE_SYSTEM_COMBOBOX (0x2E) – HTML 에서 multiple 어트리뷰트가 선택되지 않은 select태그에 해당합니다. 콤보 박스 컨트롤을 나타내는 객체입니다.

2. State∘ STATE_SYSTEM_NORMAL (0x00000000) - 객체에 할당된 다른 상태가 없다는 것을 말합니다.

24 / 307

6. 참고 자료

∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) - 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) - 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_PRESSED (0x00000008) - 객체가 눌려진 상태입니다.∘ STATE_SYSTEM_CHECKED (0x00000010) – 객체의 체크박스가 체크된 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) - 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가 되어 있는

상태입니다.∘ STATE_SYSTEM_SELECTED (0x00000002) – 객체가 선택된 상태입니다.∘ STATE_SYSTEM_SELECTABLE (0x00200000) – 객체를 선택할 수 있는 상태입니다.

3. Event∘ EVENT_OBJECT_SELECTION (0x8006) – 컨테이너 안의 선택이 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_STATECHANGE (0x800A) – 객체의 상태가 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_NAMECHANGE (0x800C) – 객체의 Name 속성이 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_VALUECHANGE (0x800E) – 객체의 Value 속성이 변경되었을 때의 이벤트입니다.

D. DataGridAccImpl

이 클래스는 DataGrid 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. DataGrid 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role

∘ ROLE_SYSTEM_LIST (0x21) – 사용자가 하나 또는 그 이상을 선택할 수 있는 리스트 박스를 나타내는 객체입니다.∘ ROLE_SYSTEM_LISTITEM (0x22) – 리스트 박스 또는 콤보 박스, 드롭 다운 리스트 박스, 드롭 다운 콤보 박스의 리스트 영역 안의 아이템을 나타내는 객체입니다.

2. State∘ STATE_SYSTEM_NORMAL (0x00000000) – [DataGrid] 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) – [DataGrid] 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – [DataGrid] 객체에 키보드 포커스를 받은 상태입니다. ∘ STATE_SYSTEM_FOCUSABLE (0x00100000) – [DataGrid] 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가

되어 있는 상태입니다.∘ STATE_SYSTEM_SELECTED (0x00000002) – [DataGrid 의 아이템] 객체가 선택된 상태입니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – [DataGrid 의 아이템] 객체가 포커스를 받은 상태입니다.∘ STATE_SYSTEM_INVISIBLE (0x00008000) – [DataGrid 의 아이템] 객체가 프로그래밍적으로 숨겨진 상태입니다.∘ STATE_SYSTEM_OFFSCREEN (0x00010000) – [DataGrid 의 아이템] 객체가 뷰의 밖으로 스크롤 되거나 부분만 나간

상태입니다. 숨겨진 상태를 의미하지 않습니다.∘ STATE_SYSTEM_SELECTABLE (0x00200000) – [DataGrid 의 아이템] 객체를 선택할 수 있는 상태입니다.

3. Event∘ EVENT_OBJECT_FOCUS (0x8005) – 객체가 키보드 이벤트를 받을 때의 이벤트입니다.∘ EVENT_OBJECT_SELECTION (0x8006) – 컨테이너 안의 선택이 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_STATECHANGE (0x800A) – 객체의 상태가 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_NAMECHANGE (0x800C) – 객체의 Name 속성이 변경되었을 때의 이벤트입니다.

E. LabelButtonAccImpl

이 클래스는 LabelButton 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. LabelButton 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role

∘ ROLE_SYSTEM_PUSHBUTTON (0x2B) - HTML 마크업에서 input 태그의 button 어트리뷰트에 해당합니다. 푸시 버튼 컨트롤을 나타냅니다.

2. State∘ STATE_SYSTEM_NORMAL (0x00000000) – 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) – 객체의 사용 불가능한 상태를 말합니다.

25 / 307

6. 참고 자료

∘ STATE_SYSTEM_FOCUSED (0x00000004) – 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_PRESSED (0x00000008) – 객체가 눌려진 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) – 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가 되어 있는


∘ EVENT_OBJECT_STATECHANGE (0x800A) – 객체의 상태가 변경되었을 때의 이벤트입니다.∘ EVENT_OBJECT_NAMECHANGE (0x800C) – 객체의 Name 속성이 변경되었을 때의 이벤트입니다.

F. ListAccImpl

이 클래스는 List 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. List 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role


2. State∘ STATE_SYSTEM_NORMAL (0x00000000) – [List] 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) – [List] 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – [List] 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) – [List] 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가 되어

있는 상태입니다.∘ STATE_SYSTEM_SELECTED (0x00000002) – [List 의 아이템] 객체가 선택된 상태입니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – [List 의 아이템] 객체가 포커스를 받은 상태입니다.∘ STATE_SYSTEM_INVISIBLE (0x00008000) – [List 의 아이템] 객체가 프로그래밍적으로 숨겨진 상태입니다.∘ STATE_SYSTEM_OFFSCREEN (0x00010000) – [List 의 아이템] 객체가 뷰의 밖으로 스크롤 되거나 부분만 나간

상태입니다. 숨겨진 상태를 의미하지 않습니다.∘ STATE_SYSTEM_SELECTABLE (0x00200000) – [List 의 아이템] 객체를 선택할 수 있는 상태입니다.


G. RadioButtonAccImpl

이 클래스는 RadioButton 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. RadioButton 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role

∘ ROLE_SYSTEM_RADIOBUTTON (0x2D) – 일반적으로 라디오 버튼으로 부르는 옵션 버튼을 나타내는 객체입니다.2. State

∘ STATE_SYSTEM_NORMAL (0x00000000) - 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) - 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) - 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_PRESSED (0x00000008) - 객체가 눌려진 상태입니다.∘ STATE_SYSTEM_CHECKED (0x00000010) - 객체의 체크박스가 체크된 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) - 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가 되어 있는


∘ EVENT_OBJECT_STATECHANGE (0x800A) – 객체의 상태가 변경되었을 때의 이벤트입니다.

26 / 307

6. 참고 자료

∘ EVENT_OBJECT_NAMECHANGE (0x800C) – 객체의 Name 속성이 변경되었을 때의 이벤트입니다.

H. TileListAccImpl

이 클래스는 TileList 컴포넌트와 스크린 리더기와의 통신을 가능하게 합니다. TileList 클래스는 스크린 리더기에 다음의 역할(Role), 객체 기반 이벤트(Event), 상태(State) 값을 전달합니다.1. Role


2. State∘ STATE_SYSTEM_NORMAL (0x00000000) – [TileList] 객체에 할당된 다른 상태가 없다는 것을 말합니다.∘ STATE_SYSTEM_UNAVAILABLE (0x00000001) – [TileList] 객체의 사용 불가능한 상태를 말합니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – [TileList] 객체에 키보드 포커스를 받은 상태입니다.∘ STATE_SYSTEM_FOCUSABLE (0x00100000) – [TileList] 객체가 활성화가 되어 있고 키보드 포커스를 받을 준비가

되어 있는 상태입니다.∘ STATE_SYSTEM_SELECTED (0x00000002) – [TileList 의 아이템] 객체가 선택된 상태입니다.∘ STATE_SYSTEM_FOCUSED (0x00000004) – [TileList 의 아이템] 객체가 포커스를 받은 상태입니다.∘ STATE_SYSTEM_INVISIBLE (0x00008000) – [TileList 의 아이템] 객체가 프로그래밍적으로 숨겨진 상태입니다.∘ STATE_SYSTEM_OFFSCREEN (0x00010000) – [TileList 의 아이템] 객체가 뷰의 밖으로 스크롤 되거나 부분만 나간

상태입니다. 숨겨진 상태를 의미하지 않습니다.∘ STATE_SYSTEM_SELECTABLE (0x00200000) – [TileList 의 아이템] 객체를 선택할 수 있는 상태입니다.


1.8.3 mx.accessibility PackageFlex frameworks 에 포함된 mx.accessibility 패키지의 클래스들은 Flex 기반의 어플리케이션의 접근성을 지원하는 역할을 합니다. Flash 기반의 어플리케이션의 접근성 지원을 위해 Flash 의 flash.display.DisplayObject 클래스의 속성 중 flash.accessibility.AccessibilityProperties 클래스가 속성으로 존재하듯이, Flex frameworks 에서 화면에 표시되는 디스플레이 객체의 기본이 되는 mx.core.UIComponent 클래스에는 접근성 지원을 위한 몇 가지의 속성이 있습니다. 이 속성은 flash.accessibility.AccessibilityProperties 클래스의 속성과 관련된 속성입니다.

A. UIComponent 의 접근성 지원 속성이 속성들은 mx.accessibility 패키지 안의 클래스에 정의된 속성이 아닌, mx.core.UIComponent 클래스 안에 정의된 속성입니다. 이 속성들을 사용하여 UI 객체의 이름, 설명, 보조 도구에 대한 노출 여부, 단축키를 정의하고 정의한 접근성 정보를 스크린 리더기와 같은 보조도구에 전달합니다.

물론 UIComponent 에는 flash.accessbility.AccessibilityProperties 클래스의 인스턴스인 accessibilityProperties 속성이 있습니다. 아래의 속성들에 값을 지정하면 내부적으로 accessibilityProperties 속성의 값을 변경한 후 flash.accessibility.Accessibility.updateProperties() 메소드를 호출합니다.1. UIComponent.accessibilityDescription

UIComponent 의 accessibilityProperties 객체의 description 속성에 대한 컨비니언스 접근자 입니다. 2. UIComponent.accessibilityEnabled

UIComponent 의 accessibilityProperties 객체의 silent 속성에 대한 컨비니언스 접근자 입니다. 이 속성은 AccessibilityProperties 의 silent 속성의 역 논리입니다. silent 값이 false 라면 accessibilityEnabled 값은 true입니다.

3. UIComponent.accessibilityNameUIComponent 의 accessibilityProperties 객체 의 name 속성에 대한 컨비니언스 접근자입니다.

27 / 307

6. 참고 자료

4. UIComponent.accessibilityShortcutUIComponent 의 accessibilityProperties 객체의 shortcut 속성에 대한 컨비니언스 접근자입니다.

B. AccConst

AccConst 클래스는 Microsoft Active Accessibility(MSAA) 의 스펙에서 정의한 상수를 명시합니다. 이 상수들은 AccessibilityImplementation 클래스의 서브 클래스를 구현할 때 Role, State, Event 등을 정의하기 위해 사용할 수 있습니다.

Flash Player 가 접근성을 지원하기 위해서 MSAA 를 사용하므로 AccConst 클래스 안에 정의한 상수들의 이름은 Microsoft 의 MSAA SDK 에서 정의한 용어 그대로 사용합니다. 하지만 이 상수들에 대한 내용은 MSAA SDK 의 용어와 비교했을 때, 일부 수정이 되어 있습니다. SWF 안의 DisplayObject 가 스크린 리더기와 같은 MSAA 클라이언트에 IAccessible 이라고 하는 COM 인터페이스를 통해 MSAA 정보를 제공하기 때문에 Flash Player 는 “MSAA 제공자 어플리케이션”이 되므로 상수 값을 읽을 때 그대로 설명 내용을 유지하게 됩니다.

C. AccImpl

AccImpl 클래스는 Spark 와 MX 컴포넌트의 접근성 구현을 위한 기본 클래스입니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 컴포넌트를 관찰하고 제어할 수 있도록 이 클래스의 객체를 사용합니다. AccImpl 클래스는 AccessibilityImplementation 클래스를 상속받습니다.1. Children

∘ Flash Player 는 실제로 접근성 있는 객체의 계층 구조를 지원하지 않습니다. DisplayObject 객체가 accessibilityImplementation 객체를 가지고 있다면, 자식 객체의 accessibilityImplementation 객체는 무시됩니다. 하지만 Flash Player 는 컴포넌트의 내부에 있는 파트에 대해 MSAA 정보를 노출하기 위한 컴포넌트의 접근성 구현 클래스를 사용할 수 있습니다.(예를 들어 List 컴포넌트는 List 컴포넌트의 아이템들에 대한 MSAA 정보를 노출합니다.)

∘ getChildIDArray() 메소드를 사용하여 컴포넌트 내부의 자식 객체의 개수와 자식 객체를 식별하기 위해 사용하는 ID 를 확인할 수 있습니다. AccessibilityImplementation 클래스를 기반으로 하는 클래스에서는 단순하게 이 메소드를 호출하면 null 을 반환합니다. Flex 의 AccImpl 클래스는 빈 배열을 반환하기 위해 이 메소드를 오버라이드(재정의)를 합니다.

2. Role∘ 컴포넌트의 MSAA 에서의 Role(역할)과 컴포넌트 내부의 부분들의 역할은 get_accRole() 메소드를 통해 결정됩니다.

Flex 의 AccImpl 클래스에는 protected 접근자로 되어 있는 role 속성이 있고, 이 속성은 일반적으로 생성자 내부에서 정의합니다. 그리고 get_accRole() 메소드를 오버라이드(재정의) 하여 이 role 속성을 반환합니다.

3. Name∘ 컴포넌트의 MSAA 에서의 Name(이름)과 컴포넌트 내부 부분들의 이름은 get_accName() 메소드를 통해 정해집니다.

Flex 의 AccImpl 클래스는 다음과 같은 방법으로 Name 을 생성합니다.∘ 단순한 자식 객체일 경우에는 자식 객체의 기본 이름을 반환합니다. ∘ Form 객체가 FormHeading 을 가지고 있고 컴포넌트가 FormItem 내부에 위치한다면, FormHeading 에 사용한 머리글이 이름으로 추가됩니다. 머리글이 Name 으로 사용되는 것을 원치 않는다면, FormHeading 의 accessibilityName 속성에 빈 스트링(공백문자)를 설정합니다.

∘ 컴포넌트가 FormItem 내부에 있다면, Name 에 FormItem 의 레이블이 추가가 됩니다. 이러한 현상을 회피하려면 FormItem 의 accessibilityName 속성에 빈 스트링(공백문자)를 할당합니다.

∘ 컴포넌트의 accessibilityName(또는 accessibilityProperties.name) 속성이 비어있다면, 컴포넌트의 접근성 정보로써의 이름이 추가되지 않은 것입니다. 컴포넌트의 이름을 명시하여 Name 을 정의합니다.

∘ AccImpl 클래스에 의해 정의되고, 각각의 서브 클래스에 의해 구현된 getName() 메소드를 기본 이름을 제공하기 위해 호출합니다. 예를 들어 ButtonAccImpl 클래스에서 구현한 getName() 메소드는 Button 인스턴스의 기본 이름으로 버튼에 표시된 레이블을 사용합니다.

∘ 컴포넌트의 toolTip 속성을 설정하였다면, toolTip 에 정의된 텍스트가 이름으로 사용됩니다.∘ 컴포넌트의 errorString 속성을 설정하였다면, 이 문자열도 이름에 추가가 됩니다.

4. Description∘ MSAA 의 Description 은 accessibilityProperties 클래스의 description 속성에 의해서만 결정되며,

AccessibilityImplementation 객체는 관여를 하지 않습니다. 그러므로 AccessibilityImplementation 이나 AccImpl 또는 이 클래스의 하위 클래스에서는 description 속성과 관련한 어떠한 로직도 존재하지 않습니다. Flex 에서 description 속성을 설정하는 일반적인 방법은 UIComponent 의 accessibilityDescriptioin 속성 또는, accessibilityProperties.description 속성을 사용합니다.

28 / 307

6. 참고 자료

5. State∘ 컴포넌트와 내부 파트의 MSAA State 는 get_accState() 메소드에 의해 결정됩니다. 플레이어의

AccessibilityImplementation 라는 기반 클래스 내부에서는 get_accState() 메소드의 내용을 서브 클래스에서 오버라이드(재정의) 할 것을 요구하기 때문에, 바로 호출하게 되면 런타임 에러가 발생합니다. Flex 의 AccImpl 클래스는 이 메소드를 오버라이드(재정의) 하지 않습니다. 그러나 서브클래스에서 오버라이드(재정의)하여 사용할 수 있도록 보호된 유틸리티 메소드인 getState() 메소드를 제공합니다. getState() 메소드는 다음의 상태 값의 조합으로써 상태를 결정합니다.

STATE_SYSTEM_UNAVAILABLE (컴포넌트에서 enabled 속성이 false 이거나 원형일 때) STATE_SYSTEM_FOCUSABLE STATE_SYSTEM_FOCUED (컴포넌트가 가지고 있는 부분적인 파트가 아닌 컴포넌트 자기 자신이 포커스를

받았을 때)모든 기본 컴포넌트는 포커스를 받을 수 있다고 가정할 수 있습니다. 그러나 Label 과 같이 포커스를 받을 수 없는 컴포넌트에 대한 접근성 구현은 이러한 상태 플래그를 제거해야만 합니다. 컴포넌트가 사용 불가능한 상태를 가지고 있을 때, 포커스를 받을 수 있는 상태는 접근성 구현 클래스에 의해 제거합니다.

6. Value컴포넌트와 컴포넌트 내부의 자식 컴포넌트의 MSAA Value 는 get_accValue() 메소드에 의해 결정됩니다. 플레이어의 AccessibilityImplementation 라는 기반 클래스 내부에서, 이 메소드를 호출하면 null 을 반환합니다. Flex 의 AccImpl 클래스는 이 메소드를 오버라이드(재정의) 하지 않습니다. 그러나 TextInput 과 같은 컴포넌트를 위한 서브클래스는 이 메소드를 오버라이드(재정의) 합니다.

7. Location∘ 컴포넌트 자신이 아닌 컴포넌트의 내부에 있는 부분들의 MSAA Location 은 get_accLocation() 메소드에 의해 결정됩니다. 이 메소드는 childID 의 0 을 사용하여 호출하지 않습니다. 대신에, 플래시 플레이어는 getBounds()에 의해 결정된 컴포넌트의 사각형 경계에 기반하여 컴포넌트의 MSAA Location 을 결정합니다. 플렉스의 AccImpl 클래스는 이 메소드를 오버라이드(재정의) 하지 않습니다, 그러나, 컴포넌트 내부의 파트들에 대한 서브 클래스들은 이 메소드를 오버라이드(재정의) 합니다.

8. Default Action∘ 컴포넌트와 컴포넌트 내부의 파트들에 대한 MSAA DefaultAction 은 get_accDefaultAction() 메소드에 의해 결정됩니다. 플레이어의 AccessibilityImplementation 라는 기반 클래스 안에서는, 이 메소드를 호출하면 null 을 반환합니다. 플렉스의 AccImpl 클래스는 이 메소드를 오버라이드(재정의) 하지 않습니다. 그러나 기본 액션을 가진 서브 클래스들은 이 메소드를 오버라이드(재정의) 합니다. 또한 이 서브 클래스들은 서브 클래스들이 수행하는 기본 액션을 수행하기 위해 AccessibilityImplementation 의 accDoDefaultAction() 메소드를 오버라이드(재정의) 합니다.

9. Other∘ MSAA 의 EVENT_OBJECT_SHOW 와 EVENT_OBJECT_HIDE 이벤트는 객체가 보여지거나 숨겨질 때 전송됩니다.

D. AccImpl 클래스를 상속받는 접근성 클래스들플렉스의 표준 컴포넌트에 대응하는 접근성 클래스들은 AccImpl 클래스를 상속받고 있습니다.

접근성 구현 클래스 대응하는 컴포넌트 설명

AccordionHeaderAccImpl

AccordionHeader AccordionHeaderAccImpl클래스는 AccordionHeader 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

AdvancedDataGridAccImpl

AdvancedDataGrid AdvancedDataGridAccImpl클래스는 AdvancedDataGrid를 위한 접근성 클래스입니다.직접적으로 상속한 상위 클래스는 ListAccImpl 클래스입니다.

AlertAccImpl Alert AlertAccImpl클래스는 Alert 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 TitleWindowImpl클래스입니다.

ButtonAccImpl Button ButtonAccImpl클래스는 Button 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

29 / 307

6. 참고 자료

하위 클래스로는 CheckBoxAccImpl, LinkButtonAccImpl 클래스가 있습니다.

CheckBoxAccImpl CheckBox CheckBoxAccImpl 클래스는 CheckBox 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 ButtonAccImpl 클래스입니다.하위 클래스로는 RadioButtonAccImpl클래스가 있습니다.

ColorPickerAccImpl ColorPicker ColorPickerAccImpl 클래스는 ColorPicker 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 ComboBaseAccImpl 클래스입니다.

ComboBaseAccImpl ComboBase ComboBaseAccImpl 클래스는 ComboBase 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.하위 클래스로는 ColorPickerAccImpl, ComboBoxAccImpl클래스가 있습니다.

ComboBoxAccImpl ComboBox ComboBoxAccImpl 클래스는 ComboBox 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 ComboBaseAccImpl 클래스입니다.

DataGridAccImpl DataGrid DataGridAccImpl 클래스는 DataGrid 클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 ListBaseAccImpl 클래스입니다.

DateChooserAccImpl DateChooser DateChooserAccImpl 클래스는 DateChooser클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

DateFieldAccImpl DateField DateFieldAccImpl클래스는 DateField클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

LabelAccImpl Label LabelAccImpl 클래스는 Label클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

LinkButtonAccImpl LinkButton LinkButtonAccImpl클래스는 LinkButton클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위클래스는 ButtonAccImpl클래스입니다.

ListAccImpl List ListAccImpl클래스는 List클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 ListBaseAccImpl클래스입니다.

ListBaseAccImpl ListBase ListBaseAccImpl클래스는 ListBase클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.하위 클래스로는 AdvancedDataGridAccImpl, DataGridAccImpl, ListAccImpl, MenuAccImpl클래스가 있습니다.

MenuAccImpl Menu MenuAccImpl클래스는 Menu클래스를 위해 접근성을 구현한

30 / 307

6. 참고 자료

AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위클래스는 ListBaseAccImpl클래스입니다.

MenuBarAccImpl MenuBar MenuBarImpl클래스는 MenuBar클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

PanelAccImpl Panel PanelAccImpl클래스는 Panel클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.하위 클래스로는 TitleWindowAccImpl클래스가 있습니다.

RadioButtonAccImpl RadioButton RadioButtonAccImpl클래스는 RadioButton클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 CheckBoxAccImpl클래스입니다.

SliderAccImpl Slider SliderAccImpl클래스는 Slider클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

TabBarAccImpl TabBar TabBarAccImp클래스는 TabBar클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.

TitleWindowAccImpl TitleWindow TitleWindowAccImpl클래스는 TitleWindow클래스를 위해 접근성을 구현한 AccessibilityImplementation의 서브 클래스입니다.직접적으로 상속한 상위 클래스는 PanelAccImpl클래스입니다.하위 클래스로는 AlertAccImpl클래스가 있습니다.

TreeAccImpl Tree TreeAccImpl클래스는 Tree클래스를 위해 접근성을 구현한 AccessiblityImplementation의 서브 클래스입니다.

E. UIComponentAccProps

UIComponentAccProps 는 여러 UIComponent 들에 의한 사용을 위한 AccessibilityProperties 의 서브 클래스입니다. 이 클래스는 Form, ToolTip, 그리고 Error ToolTip 에 접근성을 제공하기 위해 사용됩니다.

1.8.4 spark.accessibility Packagespark.accessibility 패키지는 Spark 컴포넌트에 대한 접근성 클래스들을 포함하고 있습니다. 이 클래스들은 mx.accessibility.AccImpl 클래스를 상속받아 각각의 대응하는 컴포넌트에 대해 접근성을 구현합니다.

A. ButtonBarBaseAccImpl

ButtonBarBaseAccImpl 클래스는 spark.components.supportClasses.ButtonBarBase 를 위해 접근성을 구현한 클래스입니다. 이 클래스는 ListBaseAccImpl 클래스를 직접 상속하고 있으며, 서브 클래스로는 TabBarAccImpl 클래스가 있습니다.

TabBar 컴포넌트는 자기 자신의 접근성을 구현한 접근성 구현 클래스를 가지고 있는 것에 반해, ButtonBar 컴포넌트는 ButtonBarBase 클래스에 대한 한 가지의 접근성 구현 클래스를 사용합니다. 그러므로, ButtonBarBaseAccImpl 라는 접근성 구현 클래스는 ButtonBarBase 라는 기반 클래스보다는 일반적으로 사용하는 ButtonBar 컴포넌트와 관련이 있습니다.

Spark ButtonBar 가 만들어 질 때, ButtonBar 클래스의 accessibilityImplementation 속성은 이 클래스의 인스턴스에 설정이 됩니다. 그리고 나서 Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 ButtonBar 를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

31 / 307

6. 참고 자료

∘ ButtonBar 의 MSAA children 은 ButtonBar 안의 버튼들입니다. 이 Button 의 접근성은 ButtonBar 클래스에 의해 관리가 됩니다. ButtonBar 자신의 accessibilityImplementation 과 accessibilityProperties 는 Flash Player 상에서 무시가 됩니다.

2. Role∘ ButtonBar 의 MSAA Role 은 ROLE_SYSTEM_TOOLBAR 입니다.∘ ButtonBar 안의 각각의 버튼의 MSAA Role 은 ROLE_SYSTEM_PUSHBUTTON입니다.

3. Name∘ 기본적으로, ButtonBar 의 MSAA Name 은 빈 문자열입니다. FormItem 요소 안에 있게 되면, Name 값은 FormItem

의 레이블 값이 됩니다. 이 기능을 오버라이드(재정의) 하려면 ButtonBar 의 accessibilityName 속성을 설정합니다.∘ ButtonBar 안의 각각의 버튼에 대한 Name 값은 ButtonBar 클래스의 itemToLabel() 메소드로 결정됩니다.∘ ButtonBar 의 이름 또는 ButtonBar 안의 Button 중 하나의 이름이 변경될 때, ButtonBar 는 내부의 Button 에 대한 올바른 childID 값이나 또는 ButtonBar 자신에 대한 0 이라는 값을 사용하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로, ButtonBar 의 MSAA Description 은 빈 문자열입니다. 그러나, ButtonBar 의 assessibilityDescription

속성을 사용하여 이 값을 설정할 수 있습니다.∘ ButtonBar 안의 각각의 Button 의 Description 은 빈 문자열입니다.

5. State∘ ButtonBar 의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 값이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 값이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 값이 true 이고 ButtonBar 가 포커스를 가지고 있을 때)

∘ ButtonBar 안의 Button 의 State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_FOCUSED (Button 이 포커스를 가지고 있을 때) STATE_SYSTEM_PRESSED (Button 이 선택되었을 때)

∘ ButtonBar 의 State(상태)나 ButtonBar 안의 Button 중 하나의 State 가 변경되었을 때, ButtonBar 는 내부의 Button에 대한 올바른 childID 값이나 또는 ButtonBar 자신에 대한 0 이라는 값을 사용하여 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치합니다.

6. Value∘ ButtonBar 또는 ButtonBar 안의 Button 은 MSAA Value 를 가지고 있지 않습니다.

7. Location∘ ButtonBar 또는 ButtonBar 안의 Button 의 MSAA Location 은 경계면의 사각형입니다.

8. Default Action∘ ButtonBar 는 MSAA DefaultAction 을 가지고 있지 않습니다.∘ ButtonBar 안의 Button 에 대한 DefaultAction 은 “Press”입니다.

9. Focus∘ ButtonBar 와 ButtonBar 안의 각각의 버튼 둘 다 포커스를 가질 수 있습니다. 그래서 이 ButtonBar 와 Button 이

포커스를 가질 때 EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치 합니다. 버튼은 화살표 키를 사용하여 탐색을 하는 동안 포커스를 받지만 자동으로 선택이 되는 것은 아닙니다. 포커스를 받은 버튼을 선택하려면 사용자가 스페이스 바 키를 눌러야 합니다.

10. Selection∘ MSAA Selection 은 명시된 childID 에 해당하는 버튼을 누른 것입니다. 오로지 한 번에 한 개의 버튼만이 눌려 집니다.

B. ButtonBaseAccImpl

ButtonBaseAccImpl 클래스는 spark.components.supportClasses.ButtonBase 를 위해 접근성을 구현한 클래스입니다. 이 클래스는 서브 클래스로 CheckBoxAccImpl 클래스와 ToggleButtonAccImpl 클래스를 가지고 있습니다.

32 / 307

6. 참고 자료

ToggleButton, CheckBox, 그리고 RadioButton 은 자신만의 접근성을 구현한 서브 클래스를 가지고 있습니다. Button 클래스는 ButtonBase 에 대한 한 가지의 접근성 구현 클래스를 사용합니다. 그러므로, ButtonBaseAccImpl 접근성 구현 클래스는 ButtonBase 라는 기반 클래스 보다는 일반적으로 사용하는 Button 컴포넌트와 관련이 있습니다.

Spark Button 이 만들어질 때, Button 의 accessibilityImplementation 속성은 이 클래스의 인스턴스에 설정이 됩니다. flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 Button 을 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ Button 클래스는 MSAA Children 을 가지고 있지 않습니다.2. Role

∘ Button 클래스의 MSAA Role 은 ROLE_SYSTEM_PUSHBUTTON입니다.3. Name

∘ 기본적으로 Button 클래스의 MSAA Name 은 버튼 안에 표시된 레이블입니다. FormItem 요소 안에 있게 되면, 이 레이블은 FormItem 의 레이블과 함께 조합이 됩니다. 이 기능을 오버라이드(재정의) 하려면 Button 클래스의 accessibilityName 속성을 설정합니다.

∘ Name 이 변경이 되면, Button 클래스는 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.4. Description

∘ 기본적으로 Button 클래스의 MSAA Description 은 빈 문자열입니다. 그러나, Button 클래스의 accessibilityDescription 속성을 설정하여 Description 값을 정의할 수 있습니다.

5. State∘ Button 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 값이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 값이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 값이 true 이고 Button 이 포커스를 가지고 있을 때)

∘ State 가 변경될 때, Button 클래스는 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.6. Value

∘ Button 클래스는 MSAA Value 를 가지고 있지 않습니다.7. Location

∘ Button 클래스의 MSAA Location 은 버튼의 사각 경계입니다.8. Default Action

∘ Button 클래스의 MSAA DefaultAction 은 “Press”입니다.∘ 이 액션을 실행하기 위해서 MSAA 클라이언트가 Button 에 알릴 때, 버튼이 사용 가능한 상태라면, 키보드를 통해서

Button 을 누르는 것을 시뮬레이션 하기 위해 KEY_DOWN 과 KEY_UP, SPACE 키에 대한 MouseEvent 가 생성이 됩니다.

9. Focus∘ Button 클래스는 포커스를 받을 수 있습니다. 버튼이 포커스를 받게 되면, EVENT_OBJECT_FOCUS 라는 MSAA

이벤트를 디스패치 합니다.10. Selection

∘ Button 클래스는 MSAA Selection 을 지원하지 않습니다.

C. CheckBoxAccImpl

CheckBoxAccImpl 클래스는 spark.components.CheckBox 클래스에 대한 접근성 지원 클래스입니다. CheckBoxAccImpl 클래스는 직접적으로 ButtonBaseAccImpl 클래스를 상속받고 있으며, 서브 클래스로 RadioButtonAccImpl 클래스가 있습니다.

Spark CheckBox 가 생성될 때, CheckBox 클래스의 accessibilityImplementation 속성은 이 클래스의 인스턴스에 설정이 됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 CheckBox 를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.

33 / 307

6. 참고 자료

1. Children∘ CheckBox 클래스는 MSAA Children 을 가지고 있지 않습니다.

2. Role∘ Button 클래스의 MSAA Role 은 ROLE_SYSTEM_CHECKBOX입니다.

3. Name∘ 기본적으로 CheckBox 클래스의 MSAA Name 은 CheckBox 에 표시된 레이블입니다. FormItem 요소 안에 있게 되면,

이 레이블은 FormItem 의 레이블과 함께 조합이 됩니다. 이 기능을 오버라이드(재정의) 하려면 CheckBox 클래스의 accessibilityName 속성을 설정합니다.

∘ Name 이 변경이 되면, CheckBox 클래스는 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.4. Description

∘ 기본적으로 CheckBox 클래스의 MSAA Description 은 빈 문자열입니다. 그러나, CheckBox 클래스의 accessibilityDescription 속성을 설정하여 Description 값을 정의할 수 있습니다.

5. State∘ CheckBox 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 값이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 값이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 값이 true 이고 CheckBox 가 포커스를 가지고 있을 때) STATE_SYSTEM_CHECKED (selected 값이 true 일 때)

∘ State 가 변경될 때, ChekBox 클래스는 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.6. Value

∘ CheckBox 클래스는 MSAA Value 를 가지고 있지 않습니다.7. Location

∘ CheckBox 클래스의 MSAA Location 은 버튼의 사각 경계입니다.8. Default Action

∘ CheckBox 클래스의 MSAA DefaultAction 은 현재의 상태가 체크가 되었는지 아닌지에 따라 “Check” 또는 “UnCheck” 입니다.

∘ 이 액션을 실행하기 위해서 MSAA 클라이언트가 CheckBox 에 알릴 때, 체크박스가 사용 가능한 상태라면, 키보드를 통해서 ButtonBase 를 누르는 것을 시뮬레이션 하기 위해 KEY_DOWN 과 KEY_UP, SPACE 키에 대한 MouseEvent 가 생성이 됩니다.

9. Focus∘ CheckBox 클래스는 포커스를 받을 수 있습니다. 체크박스가 포커스를 받게 되면, EVENT_OBJECT_FOCUS 라는 MSAA

이벤트를 디스패치 합니다.10. Selection

∘ CheckBox 클래스는 MSAA Selection 을 지원하지 않습니다.

D. ComboBoxAccImpl

ComboBoxAccImpl 클래스는 spark.components.ComboBox 클래스에 대한 접근성 지원 클래스입니다. ComboBoxAccImpl 클래스는 직접적으로 DropDownListBaseAccImpl 클래스를 상속받고 있습니다.

Spark ComboBox 가 생성될 때, ComboBox 클래스의 accessibilityImplementation 속성은 이 클래스의 인스턴스에 설정이 됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 ComboBox 를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ ComboBox 의 MSAA Children 은 편집이 가능한 TextInput 과 리스트의 아이템들입니다. 편집이 가능한 TextInput 이 childID 가 1 이고, 리스트의 아이템들의 childID 는 2, 3, ... n 순서로 배정이 됩니다. 자식의 수는 dataProvider 안의 아이템의 개수에 하나를 더한 값입니다.

∘ TextInput 과 리스트 아이템의 접근성은 ComboBox 가 관리합니다. TextInput 과 리스트 아이템의 accessibilityImplementation 과 accessibilityProperties 속성들은 Flash Player 에서 무시가 됩니다.

34 / 307

6. 참고 자료

2. Role∘ ComboBox 클래스의 MSAA Role 은 ROLE_SYSTEM_COMBOBOX입니다.∘ 편집할 수 있는 TextInput 클래스의 MSAA Role 은 ROLE_SYSTEM_TEXT 입니다.∘ 각각의 리스트 아이템들의 MSAA Role 은 ROLE_SYSTEM_LISTITEM입니다.

3. Name∘ 기본적으로 ComboBox 와 ComboBox 안의 편집할 수 있는 InputText 역시 MSAA Name 은 빈 스트링입니다.

FormItem 요소 안에 있게 되면, Name 은 FormItem 의 레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 ComboBox 클래스의 accessibilityName 속성을 설정합니다.

∘ ComboBox 의 각각의 리스트 아이템의 MSAA Name 은 ComboBox 클래스의 itemToLabel() 메소드를 사용하여 결정됩니다.

∘ ComboBox 의 이름 또는 ComboBox 의 아이템 중 하나의 이름이 변경되며, ComboBox 는 리스트 아이템에 대한 올바른 childID값이나 ComboBox 자신에 대한 값인 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 ComboBox 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 ComboBox 의

accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.∘ 각각의 리스트 아이템의 Description값은 빈 문자열입니다.

5. State∘ ComboBox 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 ComboBox 가 포커스를 가지고 있을 때) STATE_SYSTEM_EXPANDED (ComboBox 가 열렸을 때) STATE_SYSTEM_COLLAPSED (ComboBox 가 닫혔을 때)

∘ 편집할 수 있는 TextInput 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 ComboBox 가 포커스를 가지고 있을 때)

∘ 리스트 아이템의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_FOCUSABLE STATE_SYSTEM_FOCUSED (아이템이 포커스를 가지고 있을 때) STATE_SYSTEM_SELECTABLE STATE_SYSTEM_SELECTED (아이템이 선택되었을 때)

∘ ComboBox 와 ComboBox 안의 TextInput 또는 ComboBox 의 리스트 아이템 중 하나의 상태가 변경되었을 때, ComboBox 클래스는 TextInput 이나 리스트 아이템에 해당하는 childID 값이나 ComboBox 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ ComboBox 클래스의 MSAA Value 는 현재 선택된 리스트 아이템의 MSAA Name 이나 TextInput 에 입력한

텍스트입니다.∘ 리스트 아이템의 Value 는 항상 빈 문자열입니다.∘ ComboBox 의 MSAA Value 가 변경될 때, ComboBox 클래스는 EVENT_OBJECT_VALUECHANGE 라는 MSAA

이벤트를 디스패치 합니다.7. Location

∘ ComboBox 의 MSAA Location 은 콤보 박스의 TextInput 이나 콤보 박스의 리스트 아이템의 경계 상자입니다.8. Default Action

∘ ComboBox 나 ComboBox 의 TextInput 둘 중 어느 쪽도 MSAA DefaultAction 을 가지고 있지 않습니다.∘ 리스트 아이템의 DefaultAction 은 “Double Click”입니다. 이 액션의 실행은 아이템을 선택하게 될 것입니다.

9. Focus

35 / 307

6. 참고 자료

∘ 리스트 아이템과 마찬가지로 ComboBox 스스로가 포커스를 받을 수 있습니다. (ComboBox 가 닫히거나 열려있는 동안에도)

10. Selection∘ ComboBox 클래스는 한 개의 아이템을 선택할 수 있습니다. 이 경우 EVENT_OBJECT_SELECTION 이벤트가 발생합니다.

E. DataGridAccImpl

DataGridAccImpl 클래스는 spark.components.DataGrid 클래스에 대한 접근성 지원 클래스입니다. DataGridAccImpl 클래스는 직접적으로 ListBaseAccImpl 클래스를 상속받고 있습니다.

Spark DataGrid 가 만들어 질 때, DataGrid 의 focusOwner 라는 자식 객체의 accessibilityImplementation 속성은 DataGrid 클래스의 인스턴스에 설정됩니다. 접근성 구현은 DataGrid 클래스의 접근성 구현이 아이템 에디터의 접근성 구현과 혼동되지 않게 하기 위해 placeholder 라는 focusOwner 객체에 놓여지게 됩니다. DataGrid 컴포넌트 자신은 접근성 구현을 가지고 있지 않습니다. 이 단계는 Flash Player 현재 버전이 MSAA 객체의 다중 레벨을 지원하지 않기 때문에 필요한 단계입니다. 아이템 에디터는 특정 컴포넌트이고 전체의 MSAA 객체일 수 있습니다. 아이템 에디터 객체는 MSAA 의 트리 구조 안에서 DataGrid 에 형제 객체로써 나타납니다. 이런 식으로 각각의 아이템 에디터에 대한 접근성 구현은 CheckBox 에 대해서는 CheckBoxAccImpl가 사용되듯이 아이템 에디터로 사용된 컴포넌트와 연관된 접근성 구현 클래스에 의해 제어됩니다. 아이템 에디터의 접근성 구현은 아이템 에디터 세션이 있을 때에만 존재하고, 오로지 한 번에 한 개의 아이템 에디터에만 활성화 됩니다. 그래서, 하나 또는 0 개의 아이템 에디터 접근성 구현 클래스가 있게 됩니다.

두 개의 메소드가 DataGrid 와 DataGrid 의 자식 객체의 focusOwner 사이에 포커스를 정확하게 제어하기 위해 DataGrid 클래스 내부에 겹쳐 씌어졌습니다. 기본적으로 GridItemRenderer 클래스는 아이템 렌더러에 대한 접근성을 비활성화 합니다. 이것은 DataGrid 접근성 구현 하에 단순한 객체로 제어될 것입니다. DataGrid 안에서 사용할 수 있는 CheckBox, Panel 등과 같은 컴포넌트들을 아이템 에디터로 보여주는 것을 제한하고, 이러한 아이템 객체들이 MSAA 트리 안에서 DataGrid 에 대한 형제 객체로써 나타나는 것을 방지합니다. 모든 데이터 그리드의 아이템 렌더러들이 MSAA 트리 구조 안에서 DataGrid 의 형제 객체로써 나타나는 것을 허용한다면, 문맥상의 연관성이 없기 때문에 스크린 리더기 사용자들은 매우 혼란스러워 할 것입니다. 물론 개발자들은 접근성을 활성화 시키고 이러한 렌더러들을 표시하기 위해 필요하다면, 기본적인 기능들을 오버라이드(재정의) 할 수 있습니다.

Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 DataGrid 를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.

DataGrid 는 ListBase 클래스를 상속한 DataGridBase 클래스를 다시 상속하였고, 마찬가지로 DataGridAccImpl 클래스는 ListBaseAccImpl 클래스를 상속합니다. Spark DataGridAccImpl 클래스는 AdvancedDataGrid 클래스가 MX DataGrid 와는 다르게 단일의 셀과 행에 대한 선택을 지원하는 것과 마찬가지로 대부분이 MX AdvancedDataGridAccImpl 클래스와 유사합니다..1. Children

DataGrid 의 MSAA 자식들은 다음의 순서로 있습니다.∘ 각각의 시각적인 헤더 셀 안의 자식은 왼쪽에서부터 시작합니다. 여기서 “시각적인”은 개발자가 명시적으로 visible

속성을 false 로 설정하지 않았음을 의미합니다.(column.visible=false) ∘ 행 선택 모드에서 그리드 안에 있는 각각의 데이터 행에 대한 자식, 또는 셀 선택 모드에서 그리드 안에 있는 각각의 셀에

대한 자식들에 대해서는 시각적으로 보이지 않는 칼럼 안의 셀을 제외됩니다.

여러 개의 자식들은 스크린 상에 현재 표시되고 있는 아이템의 수가 아닌 dataProvider 안의 행과 열의 수에 의존합니다.

ListBase, DataGrid 의 자식의 수가 컨트롤 안에서 데이터 행의 수를 반영하지 않는 것과 다르므로, 보조 도구는 행의 수를 의미하는 AccChildCount 의 사용을 막을 것입니다.

이 속성은 아이템 에디터가 스스로를 관리하기 때문에 아이템 에디터에 대한 DataGrid 접근성 구현에 의해 제어되지 않습니다.2. Role

∘ DataGrid 의 MSAA 롤은 ROLE_SYSTEM_LIST입니다.∘ DataGrid 안에 있는 각각의 데이터 행 또는 셀의 롤은 ROLE_SYSTEM_LISTITEM입니다.

36 / 307

6. 참고 자료

∘ DataGrid 안에 있는 각각의 헤더 셀의 롤은 ROLE_SYSTEM_COLUMNHEADER입니다.

이 속성은 아이템 에디터가 스스로를 관리하기 때문에 아이템 에디터에 대한 DataGrid 접근성 구현에 의해 제어되지 않습니다.3. Name

∘ 기본적으로 DataGrid 의 MSAA Name 은 빈 문자열입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의 레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 DataGrid 의 accessibilityName 속성을 설정합니다. 또한 accessibilityName 속성을 설정하는 것은 DataGrid 로 대표되는 DataGrid 의 focusOwner 의 자식 객체에 접근 가능한 이름을 적용할 것입니다.

∘ 행이 선택 모드일 때, 각각의 데이터 행의 Name 은 "_column1Name_: _column1Value_, _column2Name_: _column2Value_, ..., _columnNName_: _columnNValue_, Row _m_ of _n_."의 문자열입니다. 칼럼들은 콤마로 각각 구분이 되고, 칼럼 이름과 값은 콜론으로 구분합니다. 개발자에 의해 숨겨진 칼럼은 Name 문자열에서 완전히 누락이 됩니다. “Contact Name: Doug, Contact Phone: 555-1212, Contact Zip: 12345, row 3 of 7.”이란 형태로 Name 문자열이 만들어집니다.

∘ 셀이 선택 모드일 때, 첫 번째 칼럼 안에 있는 각각의 데이터 셀에 대한 Name 은 "_columnName_: _columnValue_, Row _m_ of _n_." Example: "Contact Phone: 555-1212, Row 2 of 5."의 형태의 문자열입니다. 이후에 있는 칼럼은 “Row_m_of_n_” 부분을 누락시키는 것을 제외하면 동일한 형태의 문자열을 사용합니다.

∘ 행이 선택 모드일 때, 칼럼 헤더에 대한 Name 은 보통 헤더 안에 있는 텍스트를 사용합니다. “Contact Phone”를 예로 들 수 있습니다. 그러나 만약 그리드가 칼럼에 대해서 정렬(Sort)이 되어 있다면 정렬이 되었다는 것과 정렬 방향을 나타내기 위해 “sorted” 또는 “sorted descending”을 칼럼의 이름에 사용합니다. “Contact Name sorted”를 예로 들 수 있습니다.멀티 칼럼을 정렬하기 위해서, 정렬 단계(레벨) 문자열은 정렬한 칼럼 집합에서 각각의 칼럼 레벨의 구분자를 덧붙여서 표현합니다. 예를 들어, 만약 그리드가 세 번째 칼럼에 의해 처음 정렬이 되고 그 다음 두 번째 칼럼에 의해 정렬이 되고 두 번째 칼럼은 내림차순으로 정렬이 되어 있다면, 세 번째 칼럼의 이름은 “Sorted Leveled 1,”일 것이고 두 번째 칼럼의 이름은 “Sorted descending level2.”로 될 것입니다. 오름차순 정렬, 내림차순 정렬, 정렬의 레벨을 구분하는 문자열은 지역(국가 지역 코드)에 따라 다를 수 있습니다..

∘ DataGrid 또는 DataGrid 의 아이템의 Name 이 변경이 되면, DataGrid 는 행 또는 열에 대한 childID 또는 DataGrid자신을 표현하는 숫자 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치합니다.

∘ 만약 아이템 에디터에 대한 접근성 이름이 설정되지 않았다면, 아이템 에디터의 접근성 이름은 셀에 대한 칼럼 헤더의 이름에 기반하여 정의될 것입니다.

4. Description∘ 기본적으로 DataGrid 의 MSAA Description 은 빈 문자열입니다. 그러나, DataGrid 의 accessibilityDescription

속성을 사용하여 설정할 수 있습니다.∘ 각각의 행과 셀, 헤더에 대한 Description 은 빈 문자열이고 AccImpl 클래스에 의해 설정할 수 없습니다.∘ 이 속성은 아이템 에디터가 직접 스스로를 관리하기 때문에 아이템 에디터에 대한 DataGrid 접근성 구현에 의해

제어되지 않습니다.5. State

∘ DataGrid 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 DataGrid 가 포커스를 가지고 있을 때) STATE_SYSTEM_MULTISELECTABLE(allowMultipleSelection 속성이 true 일 때)

∘ 데이터 행 또는 열에 대한 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_FOCUSABLE STATE_SYSTEM_FOCUSED (아이템이 포커스를 가지고 있을 때) STATE_SYSTEM_OFFSCREEN(행 또는 열이 화면 밖으로 스크롤 되었을 때) STATE_SYSTEM_SELECTABLE STATE_SYSTEM_SELECTED (아이템이 선택되었을 때)

∘ 헤더의 셀은 포커스를 받거나 선택이 되지 않기 때문에 STATE_SYSTEM_NORMAL 이라는 상태를 가지게 됩니다. 실제 구현상, 헤더 셀들은 그리드 자체가 헤더가 화면 밖에 있는 것처럼 이동이 된다 하더라도, STATE_SYSTEM_OFFSCREEN 을 보고하지 않을 것입니다.

37 / 307

6. 참고 자료

∘ DataGrid 또는 DataGrid 의 아이템의 상태가 변경될 때, DataGrid 는 행 또는 셀에 대한 childID 또는 DataGrid 자체에 대한 0 이라는 숫자를 사용하여 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치합니다.

∘ 이 속성은 아이템 에디터가 직접 스스로를 관리하기 때문에 아이템 에디터에 대한 DataGrid 접근성 구현에 의해 제어되지 않습니다.

6. Value∘ DataGrid 와 DataGrid 의 자식(행, 셀, 헤더)는 MSAA Value 를 갖지 않습니다.

7. Location∘ DataGrid 나 DataGrid 안에 있는 행, 셀, 헤더 셀의 MSAA Location 은 DataGrid 의 경계 상자입니다. 스크린 안에

현재 표시되지 않는 아이템의 Location 은 undefined입니다.8. Default Action

∘ DataGrid 는 MSAA DefaultAction 을 가지고 있지 않습니다. 행 또는 셀에 대한 MSAA DefaultAction 은 “Double Click”이고, 헤더의 셀에 대한 MSAA DefaultAction 은 “Click”입니다. 그리고 해당하는 지역 문자열은 기본 액션 문자열이 요청 될 때 반환될 것입니다.

∘ 데이터 행 또는 셀에서 기본 액션의 실행은 데이터 행 또는 셀에 포커스가 있거나 선택이 되었을 때 가능합니다. 그리고 셀과 행의 종류에 의존하는 다른 기능들도 실행할 수 있습니다. 헤더에서 기본 액션의 실행은 칼럼이 그리드를 정렬하게 합니다. 헤더에서 기본 액션을 반복하면, 그리드를 오름차순과 내림차순으로 반복하여 정렬 합니다.


9. Focus∘ 그리드 안에서 포커스 안에 구체적은 아이템(선택 모드에 의존하는 행과 셀)이 없을 때, Focus 는 포커스를 가지고 있는

그리드 자체를 나타내는 childID 인 0 을 반환합니다. 이것은 그리드 안에 데이터가 없을 때 발생합니다.∘ 행 또는 셀의 선택 모드에서 행 또는 셀이 포커스를 가질 때, Focus 는 포커스를 받은 아이템의 childID 를 반환합니다.∘ DataGrid 가 포커스를 받을 때, DataGrid 는 EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치 합니다. 또한 이

이벤트는 그리드 안의 행과 셀 사이를 포커스가 이동할 때에도 디스패치 됩니다.∘ 포커스의 변경 이벤트는 아이템 에디터의 시작/표현의 단계에 아이템 에디터에서 터집니다. 포커스 변경 이벤트는

아이템 에디터가 저장이 되거나 닫힐 때 DataGrid 에서 터집니다.10. Selection

∘ DataGrid 는 allowMultipleSelection 속성에 의해 단일 행, 단일 셀 또는 여러 개의 행 또는 여러 개의 셀을 선택할 수 있습니다. Selection 은 선택한 아이템의 childID 들의 정수 값의 배열을 반환합니다.

∘ 아이템이 독점적으로 선택이 되었을 때, EVENT_OBJECT_SELECTION 이라는 MSAA 이벤트를 디스패치 합니다. 선택 모드에서의 셀 또는 행은 추가로 선택했을 때에는, 이미 선택한 것들의 집합에 포함이 되고, 이 때 EVENT_OBJECT_SELECTIONADD 라는 MSAA 이벤트를 디스패치합니다. 비슷하게, 셀 또는 행의 아이템들이 선택 되었다가 선택 해제가 되었을 때, EVENT_OBJECT_SELECTIONREMOVE 라는 MSAA 이벤트를 디스패치합니다. 만약 모든 선택한 것들이 해제가 되거나 select-all 또는 select-region 액션이 실행되었을 때, EVENT_OBJECT_SELECTIONWITHIN 이라는 MSAA 이벤트를 디스패치합니다. 만약 어떠한 선택 명령이 발생하였을 때, 위에 나열된 선택 방식 중 하나와도 일치하지 않는다면 EVENT_OBJECT_SELECTION 이라는 MSAA 이벤트를 디스패치합니다.


11. Select∘ accSelect 메소드는 DataGrid 안에서 선택과(또는) 포커스의 변화에 대하여 MSAA 를 통해 만들어진 요청을

구현합니다. DataGrid 에 대한 접근성 구현 클래스는 DataGrid 자기 자신 또는 데이터 아이템이나 데이터 그리드 안에 있는 선택 모드에 영향을 받게 되는 행이나 열 아이템의 설정에 대한 포커스 설정을 지원합니다. 지원하는 액션은 MSAA 명세에 의거하여 포커스의 설정을 포함하고, 오로지 하나의 아이템에 대한 선택하고, 선택한 것들로부터 아이템 또는 아이템 세트를 추가하거나 제거합니다.

F. DropDownListBaseAccImpl

DropDownListAccImpl 클래스는 spark.components.supportClasses.DropDownListBase 에 대한 접근성 구현 클래스입니다. ComboBox 클래스가 ComboBox 클래스의 접근성 구현 클래스를 가지고 있기 때문에, DropDownList 클래스는 DropDownListBase 클래스를 위한 접근성 구현 클래스를 사용합니다. 그러므로, 이 DropDownListBaseAccImpl 라는 접근성 구현 클래스는 DropDownListBase 라는 기반 클래스 보다는 일반적으로 사용하는 DropDownList 컴포넌트와 관련이 있습니다..

38 / 307

6. 참고 자료

Spark DropDownList 가 만들어질 때, DropDownList 클래스의 accessibilityImplementation 속성은 클래스의 인스턴스에 설정이 됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 DropDownList 를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ DropDownList 의 MSAA Children 은 리스트의 아이템들입니다. 자식의 개수는 시각적으로 렌더링 된 리스트의 렌더러 개수가 아니라 dataProvider 안의 아이템의 개수입니다.

∘ 리스트 아이템의 접근성은 DropDownList 에 의해 관리됩니다. 아이템 렌더러의 accessibilityImplementation 과 accessibilityProperties 는 Flash Player 에 의해 무시됩니다.

2. Role∘ DropDownList 클래스의 MSAA Role 은 ROLE_SYSTEM_COMBOBOX입니다.∘ 각각의 리스트 아이템들의 MSAA Role 은 ROLE_SYSTEM_LISTITEM입니다.

3. Name∘ 기본적으로 DropDownList 의 MSAA Name 은 빈 스트링입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem

의 레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 DropDownList 클래스의 accessibilityName 속성을 설정합니다.

∘ DropDownList 안의 각각의 리스트 아이템의 MSAA Name 은 DropDownList 클래스의 itemToLabel() 메소드를 사용하여 결정됩니다.

∘ DropDownList 의 이름 또는 DropDownList 의 아이템 중 하나의 이름이 변경되며, DropDownList 는 리스트 아이템에 대한 childID값이나 DropDownList 자신에 대한 값인 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다..

4. Description∘ 기본적으로 DropDownList 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 DropDownList 의

accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.∘ 각각의 리스트 아이템의 Description값은 빈 문자열입니다.

5. State∘ DropDownList 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 DropDownList 가 포커스를 가지고 있을 때) STATE_SYSTEM_EXPANDED (DropDownList 가 열렸을 때) STATE_SYSTEM_COLLAPSED (DropDownList 가 닫혔을 때)


∘ DropDownList 또는 DropDownList 의 리스트 아이템 중 하나의 상태가 변경되었을 때, DropDownList 클래스는 리스트 아이템에 해당하는 childID 값이나 DropDownList 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ DropDownList 클래스의 MSAA Value 는 현재 선택된 리스트 아이템의 MSAA Name 입니다.∘ 리스트 아이템의 Value 는 항상 빈 문자열입니다.∘ DropDownList 의 MSAA Value 가 변경될 때, DropDownList 클래스는 EVENT_OBJECT_VALUECHANGE 라는 MSAA


∘ DropDownList 이나 리스트 아이템의 MSAA Location 은 경계 상자입니다.8. Default Action

39 / 307

6. 참고 자료

∘ DropDownList 는 MSAA DefaultAction 을 가지고 있지 않습니다.∘ 리스트 아이템의 DefaultAction 은 “Double Click”입니다.

9. Focus∘ 리스트 아이템과 마찬가지로 DropDownList 스스로가 포커스를 받을 수 있습니다. (DropDownList 가 닫히거나 열려있는 동안에도) 이 경우 EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치 합니다.

10. Selection∘ DropDownList 클래스는 한 개의 아이템을 선택할 수 있습니다. 이 경우 EVENT_OBJECT_SELECTION 이벤트가 발생합니다.

G. ListAccImpl

ListAccImpl 클래스는 spark.components.List 클래스에 대한 접근성 구현 클래스입니다.

Spark ListBase 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player는 스크린 리더기와 같은 MSAA 클라이언트가 List 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ List 의 MSAA Children 은 리스트 아이템들입니다. 자식의 개수는 시각적으로 렌더링 된 리스트의 렌더러 개수가 아니라 dataProvider 안의 아이템의 개수입니다.

∘ 리스트 아이템의 접근성은 List 에 의해 관리됩니다. 아이템 렌더러의 accessibilityImplementation 과 accessibilityProperties 는 Flash Player 에 의해 무시됩니다.

2. Role∘ List 클래스의 MSAA Role 은 ROLE_SYSTEM_LIST입니다.∘ 각각의 리스트 아이템들의 MSAA Role 은 ROLE_SYSTEM_LISTITEM입니다.

3. Name∘ 기본적으로 List 의 MSAA Name 은 빈 스트링입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의

레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 List 클래스의 accessibilityName 속성을 설정합니다.∘ List 안의 각각의 리스트 아이템의 MSAA Name 은 List 클래스의 itemToLabel() 메소드를 사용하여 결정됩니다.∘ List 의 이름 또는 List 의 아이템 중 하나의 이름이 변경되며, List 는 리스트 아이템에 대한 childID값이나 List 자신에

대한 값인 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다..4. Description

∘ 기본적으로 List 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 List 의 accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.

∘ 각각의 리스트 아이템의 Description값은 빈 문자열입니다.5. State

∘ List 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 List 가 포커스를 가지고 있을 때) STATE_SYSTEM_MULTISELECTABLE(allowMultipleSelection 속성이 true 일 때)


∘ List 또는 List 의 리스트 아이템 중 하나의 상태가 변경되었을 때, List 클래스는 리스트 아이템에 해당하는 childID 값이나 List 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ List 나 리스트의 아이템은 MSAA Value 를 가지고 있지 않습니다.

40 / 307

6. 참고 자료

7. Location∘ List 이나 리스트 아이템의 MSAA Location 은 경계 상자입니다.

8. Default Action∘ List 는 MSAA DefaultAction 을 가지고 있지 않습니다.∘ 리스트 아이템의 DefaultAction 은 “Double Click”입니다. ∘ 리스트 아이템 상에서 기본 액션이 수행되면 아이템이 선택된 상태가 됩니다.

9. Focus∘ List 는 포커스를 받을 수 있습니다. 리스트가 포커스를 받게 되면, List 는 EVENT_OBJECT_FOCUS 라는 MSAA

이벤트를 디스패치합니다. 10. Selection

∘ List 는 allowMultipleSelection 이라는 속성에 의해 한 개 또는 여러 개의 아이템을 선택할 수 있습니다. 아이템이 선택이 되면, EVENT_OBJECT_SELECTION 이라는 MSAA 이벤트를 디스패치합니다.

H. ListBaseAccImpl

ListBaseAccImpl 클래스는 Spark ListAccImpl, DropDownListAccImpl, ComboBoxAccImpl, ButtonBarBaseAccImpl, 그리고 TabBarAccImpl 클래스의 슈퍼 클래스입니다.

I. NumericStepperAccImpl

NumericStepperAccImpl 클래스는 spark.components.NumericStepper 클래스에 대한 접근성 구현 클래스입니다.

Spark NumericStepper 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 NumericStepper 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ NumericStepper 는 증가 버튼과 감소 버튼 두 개의 MSAA Children 을 가지고 있습니다. 2. Role

∘ NumericStepper 클래스의 MSAA Role 은 ROLE_SYSTEM_TEXT입니다.∘ 각각의 자식 버튼들의 MSAA Role 은 ROLE_SYSTEM_PUSHBUTTON입니다.

3. Name∘ 기본적으로 NumericStepper 의 MSAA Name 은 빈 스트링입니다. FormItem 요소 안에 있게 되면, Name 은

FormItem 의 레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 NumericStepper 클래스의 accessibilityName 속성을 설정합니다.

∘ 각각의 버튼의 Name 은 설정된 지역에 따라 다르게 반영됩니다. 예를 들어 지역 설정이 en_US 일 경우, Name 은 “More”와 “Less” 가 됩니다.

∘ NumericStepper 의 이름 또는 NumericStepper 안의 버튼의 이름이 변경이 될 때, NumericStepper 는 버튼의 childID 또는 자기 자신에 대한 값인 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 NumericStepper 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 NumericStepper 의

accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.∘ 각각의 버튼의 Description값은 빈 문자열입니다.

5. State∘ NumericStepper 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 NumericStepper 가 포커스를 가지고 있을 때)

41 / 307

6. 참고 자료

∘ NumericStepper 또는 NumericStepper 의 버튼 중 하나의 상태가 변경되었을 때, NumericStepper 클래스는 버튼 해당하는 올바른 childID 값이나 List 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ NumericStepper 의 MSAA Value 는 현재 NumericStepper 안에 있는 값입니다.∘ 자식 버튼들은 MSAA Value 가 없습니다.∘ NumericStepper 의 Value 가 변경이 될 때, NumericStepper 는 EVENT_OBJECT_VALUECHANGE 라는 MSAA


∘ NumericStepper 나 NumericStepper 의 버튼의 MSAA Location 은 경계 상자입니다.8. Default Action

∘ NumericStepper 는 MSAA DefaultAction 을 가지고 있지 않습니다.∘ 각각의 버튼에 대한 MSAA DefaultAction 은 “Click”입니다. ∘ NumericStepper 의 각각의 버튼 중 하나의 기본 액션이 수행이 되면, 값이 증가하거나 감소할 것입니다.

9. Focus∘ NumericStepper 는 포커스를 받을 수 있습니다. 리스트가 포커스를 받게 되면, NumericStepper 는

EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치합니다. 10. Selection

∘ NumericStepper 는 MSAA sense 안의 Selection 을 지원하지 않습니다.

J. PanelAccImpl

PanelAccImpl 클래스는 spark.components.Panel 클래스에 대한 접근성 구현 클래스입니다.

Spark Panel 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 Panel 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ Panel 클래스는 MSAA Children 을 가지고 있지 않습니다. 실제 Panel 의 모든 자식들은 Flash Player 의 MSAA 트리 구조 상에서 Panel 의 형제 객체들입니다. 그 이유는 Flash Player 는 자식 객체가 자식 객체 자신에 대한 접근성이 구현되어 있다 하더라도, 자식 객체에 대한 접근성 구현을 가진 객체 자체를 지원하지 않기 때문입니다.

∘ PanelAccImpl 클래스는 Panel 클래스 자체가 MSAA 안에서 Panel 안의 자식 객체들이 노출되는 것을 허용하지 않기 때문에 titleDisplay 객체의 accessibilityImplementation 으로써 설정이 됩니다. MSAA Location 이 전체의 Panel 의 경계 사각형이므로 Panel 과 동일한 사이즈로 titleDisplay 안에 보이지 않는 사각형을 그립니다. MSAA Lociation 에 의존하는 JAWS 와 같은 스크린 리더기들은 MSAA 구조가 플랫하기 때문에 그룹이 된 일부 컴포넌트들이 있다 하더라도 읽을 수 있습니다.

2. Role∘ Panel 클래스의 MSAA Role 은 ROLE_SYSTEM_GROUPING입니다.∘ 각각의 자식 버튼들의 MSAA Role 은 ROLE_SYSTEM_PUSHBUTTON입니다.

3. Name∘ 기본적으로 Panel 의 MSAA Name 은 표시된 타이틀입니다. 이 기능을 오버라이드(재정의) 하려면 Panel 클래스의

accessibilityName 속성을 설정합니다.∘ Panel 의 이름이 변경이 될 때, Panel 은 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 Panel 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 Panel 의 accessibilityDescription

속성을 설정하여 Description 값을 정의 할 수 있습니다.5. State

∘ Panel 의 MSAA State 는 항상 설정된 상태 플래그가 없음을 의미하는 STATE_SYSTEM_NORMAL입니다.∘ State 가 변하지 않기 때문에 Panel 은 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 하지 않습니다.

42 / 307

6. 참고 자료

6. Value∘ Panel 의 MSAA Value 는 항상 빈 문자열입니다.

7. Location∘ Panel 의 MSAA Location 은 경계 상자입니다.

8. Default Action∘ Panel 은 MSAA DefaultAction 을 가지고 있지 않습니다.

9. Focus∘ Panel 은 포커스를 받지 않습니다.

10. Selection∘ Panel 은 MSAA sense 안의 Selection 을 지원하지 않습니다.

K. RadioButtonAccImpl

RadioButtonAccImpl 클래스는 spark.components.RadioButton 클래스에 대한 접근성 구현 클래스입니다.

Spark RadioButton 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 RadioButton 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ RadioButton 은 MSAA Children 이 없습니다. 2. Role

∘ RadioButton 클래스의 MSAA Role 은 ROLE_SYSTEM_RADIOBUTTON입니다.3. Name

∘ 기본적인 RadioButton 의 MSAA Name 은 표시되어 있는 레이블입니다.. FormItem 요소 안에 있게 되면, Name 은 FormItem 의 레이블과 조합이 됩니다. 이 기능을 오버라이드(재정의) 하려면 RadioButton 클래스의 accessibilityName 속성을 설정합니다.

∘ RadioButton 의 이름이 변경이 될 때, RadioButton 은 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 RadioButton 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 RadioButton 의

accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.5. State

∘ RadioButton 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 RadioButton 이 포커스를 가지고 있을 때) STATE_SYSTEM_CHECKED (selected 속성이 true 일 때)

∘ RadioButton 의 상태가 변경되었을 때, RadioButton 은 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ RadioButton 은 MSAA Value 가 없습니다.

7. Location∘ RadioButton 의 MSAA Location 은 경계 상자입니다.

8. Default Action∘ RadioButton 의 MSAA DefaultAction 은 “Check”입니다. ∘ MSAA 클라이언트가 RadioButton 이 이 액션을 수행하게 할 때, RadioButton 이 사용 가능한 상태라면, 키보드를 통해

RadioButton 이 눌려지는 것을 시뮬레이션 하기 위해 Space 키를 위한 KEY_DOWN 과 KEY_UP MouseEvent 가 만들어집니다.

43 / 307

6. 참고 자료

9. Focus∘ RadioButton 은 포커스를 받을 수 있습니다. RadioButton 이 포커스를 받게 되면, RadioButton 은

EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치합니다. 10. Selection

∘ RadioButton 은 MSAA sense 안의 Selection 을 지원하지 않습니다.

L. RichEditableTextAccImpl

RichEditableTextAccImpl 클래스는 spark.components.RichEditableText 클래스에 대한 접근성 구현 클래스입니다.

Spark RichEditableText 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 RichEditableText 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ RichEditableText 는 MSAA Children 이 없습니다. 2. Role

∘ RichEditableText 클래스의 MSAA Role 은 ROLE_SYSTEM_TEXT입니다.3. Name

∘ 기본적인 RichEditableText 의 MSAA Name 은 빈 문자열입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의 레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 RichEditableText 클래스의 accessibilityName 속성을 설정합니다.

∘ RichEditableText 의 이름이 변경이 될 때, RichEditableText 은 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 RichEditableText 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 RichEditableText 의


∘ RichEditableText 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 RichEditableText 가 포커스를 가지고 있을 때) STATE_SYSTEM_PROTECTED (displayAsPassword 속성이 true 일 때) STATE_SYSTEM_READONLY (editable 속성이 false 일 때)

∘ RichEditableText 의 상태가 변경되었을 때, RichEditableText 은 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ RichEditableText 은 MSAA Value 는 RichEditableText 클래스의 text 속성과 동일합니다.∘ Value 가 변경이 되었을 때, RichEditableText 은 EVENT_OBJECT_VALUECHANGE 라는 MSAA 이벤트를 디스패치

합니다.7. Location

∘ RichEditableText 의 MSAA Location 은 경계 상자입니다.8. Default Action

∘ RichEditableText 의 MSAA DefaultAction 이 없습니다.. 9. Focus

∘ RichEditableText 은 포커스를 받을 수 있습니다. RichEditableText 이 포커스를 받게 되면, RichEditableText 은 EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치합니다.

10. Selection∘ RichEditableText 는 MSAA Selection 을 지원하지 않습니다. 그리고 텍스트 선택 영역은 Microsoft 의 IAccessibility

COM 인터페이스의 부분이 아닙니다. 그러나 플래시 플레이어 10.1 과 그 이후의 버전에서는, 스크린 리더기는 이

44 / 307

6. 참고 자료

클래스 안의 selectionAnchorIndex 와 selectionActiveIndex 속성의 getter 를 호출하여 Adobe 의 ISimpleTextSelection COM 인터페이스 안의 GetSelection() 메소드를 통해서 현재 선택한 텍스트 영역을 결정할 수 있습니다.

M. SliderBaseAccImpl

SliderBaseAccImpl 클래스는 spark.components.SliderBase 클래스에 대한 접근성 구현 클래스입니다.

Spark HSlider 와 VSlider 컴포넌트는 SliderBase 를 상속하고 접근성 구현 클래스로써 SliderBaseAccImpl 클래스를 사용합니다. 편의상 이 다음부터 Slider 라는 단어는 Slider 라는 이름의 Spark 클래스가 없긴 하지만, HSlider 또는 VSlider 둘 중 하나를 칭하도록 합니다.

Slider 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 Slider 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ Slider 는 3 개의 MSAA Children 을 가지고 있습니다. Thumb 의 왼쪽(또는 아래쪽)의 클릭 가능한 영역

Thumb Thumb 의 오른쪽(또는 위쪽)의 클릭 가능한 영역

2. Role∘ Slider 클래스의 MSAA Role 은 ROLE_SYSTEM_SLIDER입니다.∘ Slider 클래스의 각각의 자식의 롤은 다음과 같습니다.

ROLE_SYSTEM_PUSHBUTTON ROLE_SYSTEM_INDICATOR ROLE_SYSTEM_PUSHBUTTON

3. Name∘ 기본적인 Slider 의 MSAA Name 은 빈 문자열 입니다.. FormItem 요소 안에 있게 되면, Name 은 FormItem 의

레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 Slider 클래스의 accessibilityName 속성을 설정합니다.∘ 각각의 자식의 Name 은 지역화 리소스 값에 의해 결정이 됩니다. en_US 지역의 경우 Name 은 다음과 같습니다.

HSlider 에서 “Page left”이고, VSlider 에서는 “Page up”입니다. Thumb 에 대한 Name 은 “Position” 입니다. HSlider 에서 “Page right”이고, VSlider 에서는 “Page down”입니다.

∘ Slider 의 이름 또는 Slider 의 자식 중 하나의 이름이 변경되었을 때, Slider 의 자식에 대한 childID 또는 Slider 자체에 대한 값인 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 Slider 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 RadioButton 의

accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.∘ Slider 의 각각의 자식에 대한 Description 은 빈 문자열입니다.

5. State∘ Slider 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 Slider 가 포커스를 가지고 있을 때)

∘ Slider 클래스의 각각의 자식들의 MSAA State 는 다음과 같습니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때)

∘ Slider 의 상태 또는 Slider 의 자식 중 하나의 상태가 변경되었을 때, Slider 의 자식에 대한 childID 또는 Slider 자체에 대한 값인 0 을 포함하여 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value

45 / 307

6. 참고 자료

∘ Slider 의 MSAA Value 는 0 과 100 사이의 숫자입니다.∘ Slider 의 자식은 MSAA Value 가 없습니다.∘ Slider 의 Value 가 변경이 될 때, Slider 는 EVENT_OBJECT_VALUECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

7. Location∘ Slider 의 MSAA Location 또는 Slider 의 Thumb 의 MSAA Location 은 경계 상자입니다. Thumb 에 인접한 트랙 바 영역을 나타내는 두 개의 자식에 대한 슬라이더의 경계 상자가 반환됩니다.

8. Default Action∘ Slider 와 Slider 자식들은 MSAA DefaultAction 이 없습니다.

9. Focus∘ Slider 는 포커스를 받을 수 있습니다. Slider 가 포커스를 받게 되면, Slider 는 EVENT_OBJECT_FOCUS 라는 MSAA


∘ Slider 는 MSAA Selection 을 지원하지 않습니다.

N. SpinnerAccImpl

SpinnerAccImpl 클래스는 spark.components.Spinner 클래스에 대한 접근성 구현 클래스입니다.

Spark Spinner 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player는 스크린 리더기와 같은 MSAA 클라이언트가 Spinner 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ Spinner 클래스는 두 개의 MSAA Children 이 있으며, 각각 증가와 감소 버튼입니다. 2. Role

∘ Spinner 의 MSAA Role 은 ROLE_SYSTEM_SPINBUTTON 입니다.∘ Spinner 의 각각의 자식 버튼의 MSAA Role 은 ROLE_SYSTEM_PUSHBUTTON입니다.

3. Name∘ 기본적으로 Spinner 의 MSAA Name 은 빈 스트링입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의

레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 Spinner 클래스의 accessibilityName 속성을 설정합니다.∘ 각각의 버튼의 Name 은 설정된 지역에 따라 다르게 반영됩니다. 예를 들어 지역 설정이 en_US 일 경우, Name 은 “More”와 “Less” 가 됩니다.

∘ Spinner 의 이름 또는 Spinner 안의 버튼의 이름이 변경이 될 때, Spinner 는 버튼의 childID 또는 자기 자신에 대한 값인 0 을 포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 Spinner 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 Spinner 의 accessibilityDescription

속성을 설정하여 Description 값을 정의 할 수 있습니다.∘ 각각의 버튼의 Description값은 빈 문자열입니다.

5. State∘ Spinner 클래스의 MSAA State 는 다음의 상태들의 조합입니다.

STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 Spinner 가가 포커스를 가지고 있을 때)

∘ Spinner 또는 Spinner 의 버튼 중 하나의 상태가 변경되었을 때, Spinner 클래스는 버튼 해당하는 올바른 childID 값이나 Spinner 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ Spinner 의 MSAA Value 는 현재 Spinner 안에 있는 값입니다.∘ 자식 버튼들은 MSAA Value 가 없습니다.

46 / 307

6. 참고 자료

∘ Spinner 의 Value 가 변경이 될 때, Spinner 는 EVENT_OBJECT_VALUECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

7. Location∘ Spinner 나 Spinner 의 버튼의 MSAA Location 은 경계 상자입니다.

8. Default Action∘ Spinner 는 MSAA DefaultAction 을 가지고 있지 않습니다.∘ 각각의 버튼에 대한 MSAA DefaultAction 은 “Click”입니다. ∘ Spinner 의 각각의 버튼 중 하나의 기본 액션이 수행이 되면, 값이 증가하거나 감소할 것입니다.

9. Focus∘ Spinner 는 포커스를 받을 수 있습니다. 리스트가 포커스를 받게 되면, Spinner 는 EVENT_OBJECT_FOCUS 라는 MSAA


∘ Spinner 는 MSAA sense 안의 Selection 을 지원하지 않습니다.

O. TabBarAccImpl

TabBarAccImpl 클래스는 spark.components.TabBar 클래스에 대한 접근성 구현 클래스입니다.

Spark TabBar 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 TabBar 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ TabBar 의 MSAA Children 은 TabBar 의 탭들입니다. 위에서 설명한 것처럼, 이 탭 들의 접근성은 TabBar 에 의해 관리가 되며, 탭 자신들의 accessibilityImplementation 과 accessibilityProperties 는 Flash Player 에서 무시됩니다.

2. Role∘ TabBar 의 MSAA Role 은 ROLE_SYSTEM_PAGETABLIST입니다.∘ TabBar 의 각각의 탭들의 MSAA Role 은 ROLE_SYSTEM_PAGETAB입니다.

3. Name∘ 기본적으로 TabBar 의 MSAA Name 은 빈 스트링입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의

레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 TabBar 클래스의 accessibilityName 속성을 설정합니다.∘ 각각의 탭의 Name 은 TabBar 클래스의 itemToLabel() 메소드에 의해 결정됩니다.∘ TabBar 의 이름 또는 TabBar 안의 탭의 이름이 변경이 될 때, TabBar 는 탭의 childID 또는 자기 자신에 대한 값인 0 을

포함하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.4. Description

∘ 기본적으로 TabBar 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 TabBar 의 accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.

∘ 각각의 탭의 Description값은 빈 문자열입니다.5. State

∘ TabBar 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 속성이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 속성이 true 이고 TabBar 가가 포커스를 가지고 있을 때)

∘ TabBar 안의 탭의 MSAA State 는 다음 상태들의 조합입니다. STATE_SYSTEM_FOCUED STATE_SYSTEM_PRESSED

∘ TabBar 또는 TabBar 의 탭 중 하나의 상태가 변경되었을 때, TabBar 클래스는 탭에 해당하는 올바른 childID 값이나 TabBar 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value

47 / 307

6. 참고 자료

∘ TabBar 나 TabBar 안의 탭은 MSAA Value 가 없습니다. 7. Location

∘ TabBar 나 TabBar 안의 탭의 MSAA Location 은 경계 상자입니다.8. Default Action

∘ TabBar 는 MSAA DefaultAction 을 가지고 있지 않습니다.∘ TabBar 안의 각각의 탭의 MSAA DefaultAction 은 “Switch”이고, 이 액션이 수행되면, 탭이 눌려질 것입니다.

9. Focus∘ TabBar 와 TabBar 안의 각각의 탭들은 포커스를 받을 수 있습니다. 리스트가 포커스를 받게 되면, TabBar 는

EVENT_OBJECT_FOCUS 라는 MSAA 이벤트를 디스패치합니다. 탭이 화살표 키 탐색을 통해 포커스를 받을 때 탭은 자동으로 눌려지지 않습니다. 포커스 된 탭을 누르려면 사용자가 스페이스 키를 눌러야 합니다.

10. Selection∘ MSAA Selection 은 명시된 childID 에 해당하는 탭을 누를 것입니다. 한 번에 한 개의 탭만을 누를 수 있습니다.

P. TextBaseAccImpl

TextBaseAccImpl 클래스는 spark.components.TextBase 클래스에 대한 접근성 구현 클래스입니다.

Spark Label 또는 Spark RichText 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 Label 이나 RichText 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ TextBase 는 MSAA Children 이 없습니다. 2. Role

∘ TextBase 클래스의 MSAA Role 은 ROLE_SYSTEM_STATICTEXT입니다.3. Name

∘ 기본적인 TextBase 의 MSAA Name 은 빈 문자열입니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의 레이블이 됩니다. 이 기능을 오버라이드(재정의) 하려면 Label 이나 RichText 클래스의 accessibilityName 속성을 설정합니다.

∘ TextBase 의 이름이 변경이 될 때, TextBase 은 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 TextBase 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 TextBase 의


∘ TextBase 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 속성이 false 일 때) STATE_SYSTEM_READONLY (editable 속성이 false 일 때)

∘ TextBase 의 상태가 변경되었을 때, TextBase 는 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ TextBase 는 MSAA Value 가 없습니다.

7. Location∘ TextBase 의 MSAA Location 은 경계 상자입니다.

8. Default Action∘ TextBase 의 MSAA DefaultAction 이 없습니다..

9. Focus∘ TextBase 는 포커스를 받을 수 없습니다.

10. Selection

48 / 307

6. 참고 자료

∘ TextBase 는 MSAA sense 안의 Selection 을 지원하지 않습니다. 11. Other

∘ MSAA 문서는 accessibilityShortcut 속성이 입력 컴포넌트와 연관된 키보드 단축키를 설정해야 한다고 제안합니다. 단축키는 접근성 속성이지만 AccessibilityImplementation 클래스에 의해 구현되지 않기 때문에 TextBaseAccImpl 클래스 안에서 설명될 수 없습니다.

Q. TitleWindowAccImpl

TitleWindowAccImpl 클래스는 spark.components.TitleWindow 클래스에 대한 접근성 구현 클래스입니다.

Spark TitleWindow 클래스가 만들어 질 때, accessibilityImplementation 속성은 클래스의 인스턴스에 설정됩니다. Flash Player 는 스크린 리더기와 같은 MSAA 클라이언트가 TitleWindow 클래스를 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ TitleWindow 클래스는 MSAA Children 을 가지고 있지 않습니다. 실제 TitleWindow 의 모든 자식들은 Flash Player 의 MSAA 트리 구조 상에서 TitleWindow 의 형제 객체들입니다. 그 이유는 Flash Player 가 자식 객체 자신의 접근성 구현이 있다 하더라도, 자식 객체에 대한 접근성 구현을 가진 객체를 지원하지 않기 때문입니다.

∘ TitleWindowAccImpl 클래스는 Panel 클래스 자체가 MSAA 안에서 TitleWindow 안의 자식 객체들이 노출되는 것을 허용하지 않기 때문에 titleDisplay 객체의 accessibilityImplementation 으로써 설정이 됩니다. MSAA Location 이 전체의 TitleWindow 의 경계 사각형이므로 TitleWindow 과 동일한 사이즈로 titleDisplay 안에 보이지 않는 사각형을 그립니다. MSAA Lociation 에 의존하는 JAWS 와 같은 스크린 리더기들은 MSAA 구조가 플랫하기 때문에 그룹이 된 일부 컴포넌트들이 있다 하더라도 읽을 수 있습니다.

2. Role∘ TitleWindow 클래스의 MSAA Role 은 ROLE_SYSTEM_PANE입니다.

3. Name∘ 기본적으로 TitleWindow 의 MSAA Name 은 표시된 타이틀입니다. 이 기능을 오버라이드(재정의) 하려면 Panel

클래스의 accessibilityName 속성을 설정합니다.∘ TitleWindow 의 이름이 변경이 될 때, TitleWindow 은 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를

디스패치 합니다.4. Description

∘ 기본적으로 TitleWindow 클래스의 MSAA Description 은 빈 문자열 입니다. 그러나 TitleWindow 의 accessibilityDescription 속성을 설정하여 Description 값을 정의 할 수 있습니다.

5. State∘ TitleWindow 의 MSAA State 는 항상 STATE_SYSTEM_MOVEABLE입니다.∘ State 가 변하지 않기 때문에 TitleWindow 은 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 하지

않습니다.6. Value

∘ TitleWindow 의 MSAA Value 는 항상 빈 문자열입니다.7. Location

∘ TitleWindow 의 MSAA Location 은 경계 상자입니다.8. Default Action

∘ TitleWindow 는 MSAA DefaultAction 을 가지고 있지 않습니다.9. Focus

∘ TitleWindow 는 포커스를 받지 않습니다. 10. Selection

∘ TitleWindow 는 MSAA sense 안의 Selection 을 지원하지 않습니다.11. Other

∘ TitleWindow 는 다음의 MSAA 이벤트를 디스패치 합니다. 생성 될 때, EVENT_OBJECT_CREATE 를 디스패치 합니다.

49 / 307

6. 참고 자료

닫힐 때, EVENT_OBJECT_DESTROY 를 디스패치 합니다. 이동될 때, EVENT_OBJECT_LOCATIONCHANGE 를 디스패치 합니다.

R. ToggleButtonAccImpl

ToggleButtonAccImpl 클래스는 spark.components.supportClasses.ToggleButton 를 위해 접근성을 구현한 클래스입니다.

Spark ToggleButton 이 만들어질 때, ToggleButton 의 accessibilityImplementation 속성은 이 클래스의 인스턴스에 설정이 됩니다. flash Player 는 스크린 리더기와 같은 MSAA 클라이언트는 ToggleButton 을 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ ToggleButton 클래스는 MSAA Children 을 가지고 있지 않습니다.2. Role

∘ ToggleButton 클래스의 MSAA Role 은 ROLE_SYSTEM_PUSHBUTTON입니다.3. Name

∘ 기본적으로 ToggleButton 클래스의 MSAA Name 은 버튼 안에 표시된 레이블입니다. FormItem 요소 안에 있게 되면, 이 레이블은 FormItem 의 레이블과 함께 조합이 됩니다. 이 기능을 오버라이드(재정의) 하려면 ToggleButton 클래스의 accessibilityName 속성을 설정합니다.

∘ 아이콘 기반의 ToggleButton(재생/일시 정지와 같은)의 다른 상태에 대한 두 개의 구분하는 Name 을 제공하려면, 이 이름들은 accessibilityName=”Mute,Unmute”와 같이 콤마를 사용하여 accessibilityName 속성에서 구분 합니다. 이처럼 상태로 구분한 이름을 사용할 때, 버튼은 눌려지게 되면 “pressed”라는 상태를 노출하지 않도록 합니다.

∘ Name 이 변경이 되면, ToggleButton 클래스는 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 ToggleButton 클래스의 MSAA Description 은 빈 문자열입니다. 그러나, ToggleButton 클래스의

accessibilityDescription 속성을 설정하여 Description 값을 정의할 수 있습니다.5. State

∘ ToggleButton 클래스의 MSAA State 는 다음의 상태들의 조합입니다. STATE_SYSTEM_UNAVAILABLE (enabled 값이 false 일 때) STATE_SYSTEM_FOCUSABLE (enabled 값이 true 일 때) STATE_SYSTEM_FOCUSED (enabled 값이 true 이고 ToggleButton 이 포커스를 가지고 있을 때) STATE_SYSTEM_PRESSED (selected 속성이 true 일 때, 상태를 명시하는 이름이 제공되었을 때 사용하지

않은 경우)∘ State 가 변경될 때, ToggleButton 클래스는 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ ToggleButton 클래스는 MSAA Value 를 가지고 있지 않습니다.

7. Location∘ ToggleButton 클래스의 MSAA Location 은 버튼의 사각 경계입니다.

8. Default Action∘ ToggleButton 클래스의 MSAA DefaultAction 은 “Toggle”입니다.∘ 이 액션을 실행하기 위해서 MSAA 클라이언트가 ToggleButton 에 알릴 때, ToggleButton 이 사용 가능한 상태라면,

키보드를 통해서 ToggleButton 을 누르는 것을 시뮬레이션을 할 수 있도록 SPACE 키에 대한 KEY_DOWN 과 KEY_UP MouseEvent 가 생성이 됩니다.

9. Focus∘ ToggleButton 클래스는 포커스를 받을 수 있습니다. ToggleButton 이 포커스를 받게 되면, EVENT_OBJECT_FOCUS

라는 MSAA 이벤트를 디스패치 합니다.10. Selection

∘ ToggleButton 클래스는 MSAA sense 안에서 MSAA Selection 을 지원하지 않습니다.

50 / 307

6. 참고 자료

S. VideoPlayerAccImpl

VideoPlayerAccImpl 클래스는 spark.components.supportClasses.VideoPlayer 를 위해 접근성을 구현한 클래스입니다.

Spark VideoPlayer 이 만들어질 때, VideoPlayer 의 accessibilityImplementation 속성은 이 클래스의 인스턴스에 설정이 됩니다. flash Player 는 스크린 리더기와 같은 MSAA 클라이언트는 VideoPlayer 을 확인하고 조작할 수 있도록 이 클래스를 사용합니다. 접근성 구현 클래스와 MSAA 에 대한 배경 정보에 대해서는 mx.accessibility.AccImpl 와 flash.accessibility.AccessibilityImplementation 클래스를 참고하시기 바랍니다.1. Children

∘ VideoPlayer 클래스는 다음 여섯 개의 MSAA Children 을 가지고 있습니다. 재생/일시 정지 버튼

스크럽(Scrub) 컨트롤

재생 시간 인디케이터

음소거 컨트롤

볼륨 컨트롤

전체 화면 컨트롤

∘ 이 컨트롤들은 스킨 안에서 컨트롤의 순서에 상관 없이 접근성에 대해서 동일하게 나타납니다.2. Role

∘ VideoPlayer 의 MSAA Role 은 ROLE_SYSTEM_PANE 입니다.∘ VideoPlayer 의 각각의 자식 컨트롤에 대한 MSAA Role 은 다음과 같습니다.

재생/일시 정지 버튼 : ROLE_SYSTEM_BUTTON 스크럽(Scrub) 컨트롤 : ROLE_SYSTEM_SLIDER 재생 시간 인디케이터 : ROLE_SYSTEM_STATICTEXT 볼륨 컨트롤 : ROLE_SYSTEM_SLIDER 전체 화면 컨트롤 : ROLE_SYSTEM_BUTTON

3. Name∘ 기본적으로 VideoPlayer 클래스의 MSAA Name 은 지역화 리소스에 의해 명시됩니다. en_US 지역의 경우, Name 은 “Video player”가 됩니다. FormItem 요소 안에 있게 되면, Name 은 FormItem 의 레이블과 함께 조합이 됩니다. 이 기능을 오버라이드(재정의) 하려면 VideoPlayer 클래스의 accessibilityName 속성을 설정합니다.

∘ VideoPlayer 의 자식들에 대한 MSAA Name 은 지역화 리소스에 의해 명시됩니다. en_US 지역의 경우 Name 은 다음과 같습니다.

재생/일시 정지 버튼 : “Play” 또는 “Pause” 스크럽(Scrub) 컨트롤 : “Scrub Bar” 재생 시간 인디케이터 : 표시된 텍스트

음소거 컨트롤 : “Muted” 또는 “ Not muted” 볼륨 컨트롤 : “Volume Bar” 전체 화면 컨트롤 : “Full Screen”

∘ 자식 컨트롤들의 Name 을 오버라이드(재정의) 하려면, VideoPlayer 의 스킨을 다시 입히고, 컨트롤들의 accessibilityName 속성을 설정합니다.

∘ 재생/일시 정지 컨트롤과 음소거 컨트롤은 이것들을 사용하여 상호작용을 할 때 변경되는 MSAA Name 이 있습니다. 이것들을 명시하려면, “Play, Pause” 또는 “Not Muted, Muted”와 같이 콤마로 구분한 MSAA 이름의 목록을 accessibilityName 속성에 설정합니다.

∘ VideoPlayer 의 MSAA Name 이나 VideoPlayer 자식 들 중 하나의 MSAA Name 이 변경되면, VideoPlayer 는 MSAA Name 이 변경된 자식에 해당하는 childID 나 VideoPlayer 자신에 해당하는 값인 0 을 사용하여 EVENT_OBJECT_NAMECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

4. Description∘ 기본적으로 VideoPlayer 클래스의 MSAA Description 은 빈 문자열입니다. 그러나, VideoPlayer 클래스의

accessibilityDescription 속성을 설정하여 Description 값을 정의할 수 있습니다.∘ VideoPlayer 클래스의 자식들의 MSAA Description 은 빈 문자열입니다.

51 / 307

6. 참고 자료

5. State∘ VideoPlayer 의 MSAA State 는 STATE_SYSTEM_NORMAL입니다.∘ VideoPlayer 의 각각의 자식 컨트롤의 MSAA State 는 다음과 같습니다.

재생/일시 정지 컨트롤

STATE_SYSTEM_UNAVAILABLE STATE_SYSTEM_FOCUSABLE STATE_SYSTEM_FOCUSED

스크럽(Scrub) 컨트롤


재생시간 인디케이터

STATE_SYSTEM_UNAVAILABLE STATE_SYSTEM_READONLY

음소거 컨트롤


볼륨 컨트롤


전체 화면 컨트롤


∘ VideoPlayer 의 상태 또는 VideoPlayer 의 자식 중 하나의 상태가 변경되었을 때, VideoPlayer 클래스는 VideoPlayer의 자식에 해당하는 올바른 childID 값이나 VideoPlayer 자신에 대한 값인 0 을 가지고 EVENT_OBJECT_STATECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

6. Value∘ VideoPlayer 클래스는 MSAA Value 를 가지고 있지 않습니다.∘ VideoPlayer 의 각각의 자식 클래스는 다음과 같은 MSAA Value 를 가지고 있습니다.

재생/일시 정지 버튼 : Value 없음 스크럽(Scrub) 컨트롤 : 시간 단위에 해당하는 Slider 의 Value 재생 시간 인디케이터 : Value 없음 음소거 컨트롤 : Value 없음 볼륨 컨트롤 : Slider 의 Value 전체 화면 컨트롤 : Value 없음

∘ 자식 컨트롤 중 하나의 MSAA Value 가 변경되면 VideoPlayer 클래스는 해당하는 컨트롤의 childID 를 사용하여 EVENT_OBJECT_VALUECHANGE 라는 MSAA 이벤트를 디스패치 합니다.

7. Location∘ VideoPlayer 클래스나 VideoPlayer 의 자식 컨트롤 중 하나의 MSAA Location 은 버튼의 사각 경계입니다.

8. Default Action∘ VideoPlayer 의 MSAA DefaultAction 은 없습니다.∘ 각각의 자식 컨트롤의 MSAA DefaultAction 은 다음과 같습니다.

재생/일시 정지 버튼 : “Press” 스크럽(Scrub) 컨트롤 : 없음 재생 시간 인디케이터 : 없음

52 / 307

6. 참고 자료

음소거 컨트롤 : “Press” 볼륨 컨트롤 : 없음 전체 화면 컨트롤 : “Press”

∘ 자식 컨트롤 중 하나의 DefaultAction 이 실행되면 다음과 같은 액션이 수행됩니다. 재생/일시 정지 버튼 : 재생과 일시 정지의 토글

스크럽(Scrub) 컨트롤 : 없음 재생 시간 인디케이터 : 없음 음소거 컨트롤 : 음소거와 음소거 해제의 토글

볼륨 컨트롤 : 없음 전체 화면 컨트롤 : 전체 화면의 활성 및 비활성에 대한 토글

9. Focus∘ VideoPlayer 클래스는 포커스를 받을 수 있습니다. VideoPlayer 이 포커스를 받게 되면, EVENT_OBJECT_FOCUS 라는

MSAA 이벤트를 디스패치 합니다.∘ 또한 VideoPlayer 클래스의 일부 자식들도 포커스를 받을 수 있습니다.

재생/일시 정지 버튼 : 포커스 받기 가능

스크럽(Scrub) 컨트롤 : 포커스 받기 가능

재생 시간 인디케이터 : 포커스 받기 불가능

음소거 컨트롤 : 볼륨 바로 포커스 이전

볼륨 컨트롤 : 포커스 받기 가능

전체 화면 컨트롤 : 포커스 받기 가능

∘ 포커스를 받게 되면, VideoPlayer 클래스는 VideoPlayer 자체가 포커스를 받았고 포커스를 받은 자식 컨트롤이 없다면 VideoPlayer 자신을 통지합니다. 그렇지 않으면, 재생/일시 정지 컨트롤, 스크럽 컨트롤, 볼륨 컨트롤, 전체 화면 컨트롤 중에 포커스가 있는 것을 통지합니다.

10. Selection∘ VideoPlayer 클래스는 MSAA sense 안에서 MSAA Selection 을 지원하지 않습니다.

53 / 307

6. 참고 자료

54 / 307

3.KWACG2.0 을 위한 Flash 제작 기법

55 / 307

6. 참고 자료

3.0 예제 및 튜토리얼 사용 방법“3. KWACG2.0 을 위한 Flash 제작 기법”과 “4. 사용자 접근성 구현 클래스 제작”에서 만들어진 샘플 및 튜토리얼은 웹 접근성 연구소(http://www.wah.or.kr)의 표준 자료실에서 내려 받을 수 있습니다. 샘플 및 튜토리얼은 Flash IDE 용과 Flash Builder 용으로 나뉘어져 배포됩니다.

1.8.5 Flash IDE 샘플 및 튜토리얼Flash IDE 샘플(FLA 파일)은 Flash CS4 포맷으로 저장하였으며, Flash CS4 이상의 버전에서 열 수 있습니다. 샘플 파일들은 Accessibility_FLA_Samples.zip(10.1MB) 파일로 압축을 하였으며, 압축 파일에 포함된 샘플 예제는 다음과 같습니다.

샘플 목록

3.1. 텍스트가 아닌 객체에 이름 (name) 속성 설정 3.2. 텍스트가 아닌 객체에 설명 (Descriptioin) 속성 설정 3.3. 보조 도구가 판독 할 수 없는 플래시 객체의 표시 3.4. 플래시 콘텐츠의 자식 객체에 보조 도구가 접근할 수 없도록 설정 3.5. 자동 레이블 (Auto Labeling) 3.6. 동적으로 표시 객체의 접근성 정보 변경 및 변경에 대한 통지 3.7. 시각적으로 구분할 수 있는 포커스의 제공 1 3.7. 시각적으로 구분할 수 있는 포커스의 제공 2 3.8. 플래시 문서 안에서 논리적으로 읽는 순서를 명시 3.9. 키보드의 SPACE 키를 사용하여 클릭 이벤트 트리거 3.10. 키보드 단축키의 제공 3.11. 폼 (Form) 콘트롤의 레이블 설정 3.12. 테이블의 사용 3.14. 스크린 리더기의 사용 감지 3.15. 스크린 리더를 감지하여 자동으로 재생하는 소리를 정지 3.17. 읽는 순서가 논리적으로 보장된 메뉴 구조의 제작 3.20. 폼 ( 양식 ) 에서 필수 요구사항 표현 3.21. 비디오 콘텐츠에 자막 사용 3.22. 파이어폭스 브라우저에서 키보드 포커스의 트랩 방지

1.8.6 Flash Builder 샘플 및 튜토리얼Flash Builder 로 제작한 샘플은 Flash Builder 4.5 에서 제작이 되었으며, Flash Builder 4 이상의 버전에서 사용할 수 있습니다. Flash Builder 4 또는 Flex SDK 4 이하의 버전(Flex Builder 3, Flex SDK 3.x)을 사용한다면, 배포된 샘플에서 사용된 spark 컴포넌트의 구조를 mx 컴포넌트의 형태로 수정한 다음 사용해야 합니다.

A. Flash Builder 프로젝트 가져오기Flash Builder 로 제작된 프로젝트는 .fxp 또는 .zip 파일로 제공이 됩니다. .fxp 파일의 확장자를 .zip 파일로 변경하여 프로젝트를 가져올 수도 있습니다. 배포된 프로젝트를 가져오는 방법은 다음과 같습니다.1. Flash Builder 4.x 의 Package Explorer 에서 빈 영역을 우클릭 하고, 메뉴에서 Import 를 선택합니다.

http://www.wah.or.kr/

56 / 307

6. 참고 자료

2. Select 메뉴에서 Flash Builder > Flash Builder Project 를 선택하고 Next 버튼을 클릭합니다.

57 / 307

6. 참고 자료

3. Import Flash Builder Project 메뉴에서 가져올 프로젝트를 선택합니다. 가져올 프로젝트가 .fxp 나 .zip 파일로 되어 있다면

Import Project 항목에서 File 을 선택해서 해당 파일을 가져오고, 프로젝트 파일들이 포함된 폴더 형태로 되어 있다면, Project folder 를 선택하여 프로젝트 폴더를 지정합니다.

4. Finish 버튼을 누르면 Flash Builder 의 Package Explorer 에 프로젝트를 가져옵니다.

58 / 307

6. 참고 자료

B. 프로젝트 샘플 및 튜토리얼 목록배포된 프로젝트(.fxp 또는 .zip) 어플리케이션 파일(.mxml 또는 .as) 샘플 목록

AccessibilityFlex.fxp AccessibilityName.mxml 3.1. 텍스트가 아닌 객체에 이름 (name) 속성 설정

AccessibilityDescription.mxml 3.2. 텍스트가 아닌 객체에 설명 (Descriptioin) 속성 설정

AccessibilityEnable.mxml 3.3. 보조 도구가 판독 할 수 없는 플래시 객체의 표시

AccessibilityUpdateProperties.mxml 3.6. 동적으로 표시 객체의 접근성 정보 변경 및 변경에 대한 통지

FocusSkinModifyStyle.mxml 3.7. 시각적으로 구분할 수 있는 포커스의 제공

FocusSkinSameComponentModifyStyle.mxml 3.7. 시각적으로 구분할 수 있는 포커스의 제공

AccessibilityShortcut.mxml 3.10. 키보드 단축키의 제공 AccessibilityFlexForm.mxml 3.11. 폼 (Form) 콘트롤의

레이블 설정

AccessibilityDataGrid.mxml 3.12. 테이블의 사용 AccessibilityRequiredForm.mxml 3.20. 폼 ( 양식 ) 에서 필수

요구사항 표현

AccessibilityScrolledContent.fxp AccessibilityScrolledContent.mxml 3.13. 자동으로 스크롤되는 콘텐츠의 제어

AccessibilityDetectSoundControll.fxp AccessibilityDetectSoundControll.mxml 3.15. 스크린 리더를 감지하여 자동으로 재생하는 소리를 정지

IncreaseTimeLimit.fxp IncreaseTimeLimit.mxml 3.16. 시간 제한이 있는 콘텐츠의 경우 사용자에게 안내

59 / 307

6. 참고 자료

AccessibilityCharts.fxp AccessibilityCharts.mxml 3.18. 복잡한 데이터를 포함하는 그래프나 차트의 설명

AccessibilityChartPattern.mxml 3.19. 색상 정보에 의존하지 않는 차트

CustomAccessibilityImplementation.zip CustomAccessibilityImplementation.as(Flash IDE 로 제작했을 때에는 CustomAccessibilityImplementation.fla 와 CustomAccessibilityImplementation.as)

4.2. 튜토리얼 - 사용자 접근성 구현클래스 제작 : Slider(flash package)

DegreeSelector AccPlayGround.mxml 4.4. 튜토리얼 - 사용자 접근성 구현 클래스 제작 : Degree Selector(mx package)

1.9 텍스트가 아닌 객체에 이름(name) 속성 설정1.9.1 설명

플래시 콘텐츠는 일반적으로 텍스트뿐만 아니라, 이미지나 동영상, 애니메이션 그리고 사운드 등을 조합한 멀티미디어 기반의 콘텐츠로 구성되어 있는 경우가 많습니다. 스크린 리더기는 텍스트가 아닌 객체를 읽을 수 없기 때문에 텍스트가 아닌 객체(이미지, 무비 클립, 버튼, 애니메이션, 동영상 등)에 대해서는 객체의 의미나 목적을 전달할 수 있는 동등한 의미의 대체 텍스트를 제공해야 합니다.

이 장의 목적은 플래시에서 텍스트가 아닌 객체를 스크린 리더기와 같은 보조 도구들이 읽을 수 있도록 표시하는 방법에 대해 알아봅니다. Flash Player 는 스크린 리더기와 같은 보조 도구들이 플래시 내의 텍스트가 아닌 객체의 name 속성을 읽음으로써, 텍스트가 아닌 객체를 보조 도구가 판독할 수 있도록 지원합니다.

주의 : name 속성은 ActionScript 를 생성해 만든 일반적인 인스턴스의 name 속성이 아닌 flash.accessibility.AccessibilityProperties 클래스의 name 속성으로 스크린 리더기와 같은 보조 도구들이 판독을 할 수 있는 속성으로 일반적인 인스턴스의 name 속성과 혼동하지 않도록 합니다.

텍스트가 아닌 객체가 콘텐츠 내에서 중요한 의미를 가지고 있을 때 name 속성에 전달하고자 하는 의미를 작성합니다. 단순히 객체의 외관을 묘사하는 방식의 사용은 지양하도록 합니다..

1.9.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용하여 텍스트가 아닌 객체에 이름(name)을 설정합니다. Accessibility 패널에서는 플래시 콘텐츠를 제작하는 개발자 또는 디자이너가 텍스트가 아닌 객체를 스크린 리더기와 같은 보조 도구가 접근할 수 있도록 정보를 제공하고 각각의 플래시 객체나 플래시로 제작한 어플리케이션 전체에 접근성 옵션을 설정할 수 있습니다.

A. 무비 클립에 대체 텍스트 이름(Name) 속성 설정하기플래시의 무비 클립과 같은 텍스트가 아닌 객체에 Accessibility(액세스 가능성) 패널의 이름(Name) 필드 값을 지정하여 스크린 리더기와 같은 보조 도구가 플래시 콘텐츠 내부의 객체를 판독할 수 있도록 접근성 정보를 제공할 수 있습니다.1. 예제 파일 : 02_adobe_home_accessible_movieclip_name.fla2. 대체 텍스트는 선택한 객체는 무비 클립의 상태로 존재해야 합니다. 만약 대체 텍스트를 설정하고자 하는 객체가 일반 그래픽

심볼 또는 비트맵 이미지라면, 무비 클립 형태로 변환을 해야 합니다.

주의 : Flash Professional 은 무비 클립이나 버튼 심볼을 변환할 때 속성 패널에 변환한 무비 클립이나 버튼 심볼에 대한 인스턴스 네임을 자동으로 생성합니다.(예 : MovieClip5) 만약 무비 클립이나 버튼 심볼에 어떠한 인스턴스 네임도 설정이 되어 있지 않다면 스크린 리더기는 무비 클립이나 버튼 심볼을 판독할 수 없습니다.

60 / 307

6. 참고 자료

3. 변환한 무비 클립을 선택하고 Accessibility(액세스 가능성) 패널을 엽니다.4. Accessibility(액세스 가능성) 패널에서 “객체를 액세스 가능하게 만들기” 체크 상자가 체크 되어 있는지 확인하고, 이름

필드에 선택한 객체의 의미를 전달할 수 있는 이름(Name) 속성을 설정합니다. 이 예제에서는 어도비 로고를 무비 클립으로

변환하였고, Accessibility(액세스 가능성) 패널의 이름(Name) 속성을 “어도비 한국 홈”으로 설정했습니다.

그림 7 Accessibility(액세스 가능성) 패널에서 무비 클립에 이름(Name) 속성 설정하기

5. 플래시 문서를 저장하고 파일 > 제작 또는 Alt+Shift+F12 을 눌러 html 상태로 퍼블리시 합니다.6. 스크린 리더기마다 다른 점이 있지만 HTML 문서에서 플래시 영역을 만나면 “플래시 무비 스타트(Flash Movie Start)”를

읽은 후 플래시 콘텐츠 내부의 내용을 읽습니다. 플래시 콘텐츠 내부의 내용을 다 읽은 후 플래시 영역을 빠져나가기 전에 “

플래시 무비 엔드(Flash Movie End)”라고 읽습니다.7. 이 예제에서 스크린 리더기(JAWS)는 다음과 같은 순서로 플래시 콘텐츠를 읽습니다.

a. 플래시 무비 스타트

b. 그래픽 : 어도비 한국 홈

c. 플래시 무비 엔드

기본적으로 무비 클립은 MSAA 에서의 role 이 그래픽이기 때문에 스크린 리더기는 무비 클립을 “그래픽”으로 읽습니다. 그러나, 무비 클립의 buttonMode 속성을 true 설정하여 비헤비어를 버튼으로 변경하면 스크린 리더기는 무비 클립을 “버튼”으로 읽게 됩니다.

B. 버튼 심볼에 대체 텍스트 이름(Name) 속성 설정하기플래시의 버튼 심볼과 같은 텍스트가 아닌 객체에 Accessibility(액세스 가능성) 패널의 이름(Name) 필드 값을 지정하여 스크린 리더기와 같은 보조 도구가 플래시 콘텐츠 내부의 객체를 판독할 수 있도록 접근성 정보를 제공할 수 있습니다.1. 예제 파일 : 02_adobe_home_accessible_button_name.fla2. 대체 텍스트는 선택한 객체는 버튼 심볼의 상태로 존재해야 합니다. 만약 대체 텍스트를 설정하고자 하는 객체가 일반 그래픽

심볼 또는 비트맵 이미지라면, 버튼 심볼 형태로 변환을 해야 합니다.3. 변환한 버튼 심볼을 선택하고 Accessibility(액세스 가능성) 패널을 엽니다.4. Accessibility(액세스 가능성) 패널에서 “객체를 액세스 가능하게 만들기” 체크 상자가 체크 되어 있는지 확인하고, 이름

필드에 선택한 객체의 의미를 전달할 수 있는 이름(Name) 속성을 설정합니다. 이 예제에서는 각각의 내비게이션 항목들을

버튼 심볼로 변환하였고, Accessibility(액세스 가능성) 패널의 이름(Name) 속성을 버튼 내부의 레이블로 설정했습니다.

61 / 307

6. 참고 자료

그림 8 Accessibility(액세스 가능성)에서 버튼에 이름(Name) 속성 설정하기

5. 플래시 문서를 저장하고 파일 > 제작 또는 Alt+Shift+F12 을 눌러 html 상태로 퍼블리시 합니다.6. 이 예제에서 스크린 리더기(JAWS)는 다음과 같은 순서로 플래시 콘텐츠를 읽습니다.



c. 제품 버튼

d. 솔루션 버튼

e. 학습 버튼

f. 도움말 버튼

g. 다운로드 버튼

h. 회사 버튼

i. 스토어 버튼

j. 플래시 무비 엔드

이 예제에서는 Name 속성의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

1.9.3 ActionScript 3.0 을 사용하여 이름(Name) 속성 설정하기ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스의 name 속성을 사용하여 스크린 리더기와 같은 보조 도구가 해당 객체를 판독할 수 있도록 접근성 정보를 제공합니다.

AccessibilityProperties 클래스는 스크린 리더기와 같은 보조 도구가 콘텐츠의 내용을 판독할 수 있도록 제공되는 접근성 정보를 내장하고 있는 클래스 입니다.

이 예제에서는 이해의 편의상 타임라인 상의 키 프레임에 ActionScript 코드를 작성하였습니다. 물론 Class 를 작성하여 적용하는 방법도 가능합니다.

62 / 307

6. 참고 자료

A. ActionScript 3.0 을 사용하여 무비 클립에 이름(Name) 속성 설정하기1. 예제 파일 : 02_adobe_home_accessible_movieclip_name_as.fla2. Adobe 로고 무비 클립을 선택하고, 속성 패널에서 무비 클립의 인스턴스 네임을 설정합니다. 이 예제에서는 “adobeLogo”

라는 인스턴스 네임을 설정합니다.3. 다음 코드는 ActionScript 3.0 에서 AccessibilityProperties 클래스의 name 속성이 어떻게 사용되는지를 보여줍니다.

// 다음 코드는 타임라인의 키 프레임에 작성합니다.import flash.accessibility.AccessibilityProperties;

// 새로운 AccessibilityProperties 객체를 생성하고, 이 객체의 // name 속성에 해당하는 값을 할당합니다.var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = "어도비 한국 홈";

// 생성한 AccessibilityProperties 인스턴스를 adobeLogo 무비 클립의// accessibilityProperties 속성에 할당합니다.adobeLogo.accessibilityProperties = accProp;

4. 이 예제에서 스크린 리더기(JAWS)는 다음과 같은 순서로 플래시 콘텐츠를 읽습니다.a. 플래시 무비 스타트


c. 플래시 무비 엔드

B. ActionScript 3.0 을 사용하여 버튼 심볼에 이름(Name) 속성 설정하기3.1.3.A 항목 에서 ActionScript 3.0 을 사용하여 무비 클립에 이름(Name) 속성 설정한 방법과 동일한 방법으로 버튼 심볼에도 이름(Name) 속성을 설정할 수 있습니다.

이 예제에서는 이해의 편의상 타임라인 상의 키 프레임에 ActionScript 코드를 작성하였습니다. 물론 Class 를 작성하여 적용하는 방법도 가능합니다.1. 예제 파일 : 02_adobe_home_accessible_button_name_as.fla2. 상단에 있는 각각의 버튼을 선택하고 속성 패널에서 적당한 인스턴스 네임을 설정합니다. 이 예제에서는 다음과 같은

이름으로 버튼의 인스턴스 네임을 설정하도록 합니다.a. 제품 : productButtonb. 솔루션 : solutionButtonc. 학습 : learnButtond. 도움말 : helpButtone. 다운로드 : downloadButtonf. 회사 : companyButtong. 스토어 : stroeButton

63 / 307

6. 참고 자료

그림 9 속성 패널에서 버튼 심볼에 대한 인스턴스 네임 설정하기

3. 다음 코드는 ActionScript 3.0 에서 AccessibilityProperties 클래스의 name 속성이 어떻게 사용되는지를 보여줍니다.

import flash.accessibility.AccessibilityProperties;import flash.display.SimpleButton;

var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = "어도비 한국 홈";

adobeLogo.accessibilityProperties = accProp;

// 버튼의 배열var navigationButtons:Array = [productButton, solutionButton, learnButton, helpButton, downloadButton, companyButton, storeButton];// 버튼에 사용할 접근성 정보 중 name 값에 해당하는 배열var accPropNames:Array = ["제품", "솔루션", "학습", "도움말", "다운로드", "회사", "스토어"];

// 버튼에 name 속성을 할당하는 함수 호출assignAccPropName();

// 버튼에 name 속성 할당하는 함수function assignAccPropName():void{var loop:int = navigationButtons.length;

for(var i:int=0; i<loop; i++){

var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accPropNames[i];

(navigationButtons[i] as SimpleButton).accessibilityProperties = accProp;}}

4. 이 예제에서 스크린 리더기(JAWS)는 다음과 같은 순서로 플래시 콘텐츠를 읽습니다.

64 / 307

6. 참고 자료



c. 제품 버튼

d. 솔루션 버튼

e. 학습 버튼

f. 도움말 버튼

g. 다운로드 버튼

h. 회사 버튼

i. 스토어 버튼


5. adobeLogo 에 대한 비헤비어를 버튼으로 변경하기 위한 코드를 추가하면, 스크린 리더기는 그래픽으로 판독을 하던

adobeLogo 무비 클립을 “어도비 한국 홈 버튼”으로 읽으며, 버튼이라는 비헤비어를 적용합니다.

adobeLogo.buttonMode = true;


1.9.4 Adobe Flex 또는 Adobe Flash Builder 에서 이름(Name) 속성 설정하기Adobe Flex 또는 Adobe Flash Builder(이하 Flex 로 통칭함)는 Adobe Flash Professional 보다 더 다양한 방법으로 이름(Name) 속성을 제공할 수 있습니다.• UIComponent 와 관련된 텍스트를 자동으로 레이블(예 : 버튼의 레이블, 폼의 레이블)로 할당하고 이 레이블을 대체

텍스트로 사용

• flash.accessibility.AccessibilityProperties 클래스의 name 속성 사용

• mx.core.UIComponent 클래스의 accessibilityName 속성 사용

• mx.core.UIComponent 클래스의 toolTip 속성 사용

1. 예제 파일 : AccessibilityFlex Project 의 AccessibilityName.mxml

그림 10 AccessibilityName.mxml 의 실행 화면

2. 이 예제에서는 위에 열거한 4 가지 방법을 적용하여 어떻게 이름(Name) 속성을 설정하는지를 알아봅니다. 검색, 취소, 승인, 삭제에 해당하는 Spark Button 인스턴스를 네 개 생성하고 그에 해당하는 접근성 정보인 이름(Name) 속성을 할당합니다.a. 검색 버튼 : UIComponent 와 관련된 텍스트를 자동 레이블 기능으로 이름(Name) 속성으로 사용합니다. 이 예제에서는

Button 클래스에서 사용한 label 속성이 접근성 정보인 이름(Name) 속성

b. 취소 버튼 : AccessibilityProperties 클래스의 name 속성을 사용하여 Button 클래스의 accessibilityProperties 속성에 그 값을 명시적으로 할당합니다.

c. 승인 버튼 : Flex 에서 제공하는 좀더 편리한 속성인 accessibilityName 속성에 이름(Name) 속성을 명시적으로 할당합니다.

65 / 307

6. 참고 자료

d. 삭제 버튼 : UIComponent 의 속성인 toolTip 에 이름(Name)을 할당합니다. 이 버튼에는 toolTip 의 속성값 사용을 확인하기 위해 의도적으로 label 속성 값을 명시하지 않았습니다.

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" fontFamily="NanumGothic" creationComplete="creationCompleteHandler(event)">

<s:layout><s:VerticalLayout horizontalAlign="center" paddingTop="20"/>

</s:layout><fx:Script>

<![CDATA[import mx.events.FlexEvent;

protected function creationCompleteHandler(event:FlexEvent):void{

var accProp:AccessibilityProperties = new AccessibilityProperties();

accProp.name = "취소 버튼";cancelButton.accessibilityProperties = accProp;

}

]]></fx:Script>

<s:Button id="searchButton" label="검색"/><s:Button id="cancelButton" label="취소"/><s:Button id="submitButton" label="승인" accessibilityName="승인버튼"/><s:Button id="removeButton" toolTip="삭제"/>

</s:Application>


b. 검색 버튼

c. 취소 버튼 버튼

d. 승인 버튼 버튼

e. 삭제 버튼

f. 플래시 무비 엔드

이 예제에서는 이름(Name) 속성을 설정하는 방법을 설명하기 위해 “취소 버튼 버튼”, “승인 버튼 버튼” 과 같이 버튼이라는 단어를 Name 속성에 할당하여 스크린 리더기가 버튼을 읽을 때, “버튼”을 중복해서 읽게 되었습니다. 하지만, 실제로 적용할 때에는 명시적으로 Role 을 가지고 있는 객체에 대해서는 Role 을 제외하고 가급적 이름(Name)을 간결하게 읽을 수 있도록 대체 텍스트를 설정하는 것이 좋습니다.


66 / 307

6. 참고 자료

1.9.5 KWCAG 2.0 관련 항목• 1.1 (대체 텍스트) 텍스트가 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.

∘ 1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다

1.10 텍스트가 아닌 객체에 설명(Description) 속성 설정1.10.1 설명

플래시 콘텐츠 내에서 표시되는 객체에 대해서 짧은 대체 텍스트(이름 속성 : name)로는 충분한 설명을 할 수 없는 경우, 긴 설명을 제공하기 위해 설명(description) 속성을 사용합니다. 이름(name) 속성과 같이 콘텐츠를 대신하는 대체 텍스트를 제공한다는 점은 같지만 텍스트가 아닌 객체에 대한 설명이 길 경우 name 속성에는 짧은 내용을, description 속성에는 긴 내용의 설명을 넣는 것이 좋습니다.

이 장의 목적은 플래시에서 텍스트가 아닌 객체의 설명을 스크린 리더기와 같은 보조 도구들이 읽을 수 있도록 표시하는 방법에 대해 알아봅니다. Flash Player 는 보조 도구들이 플래시 내의 텍스트가 아닌 객체의 description 속성을 읽음으로써, 텍스트가 아닌 객체를 보조 도구가 판독할 수 있도록 지원합니다.

텍스트가 아닌 객체가 콘텐츠 내에서 중요한 의미를 가지고 있고, 짧은 내용으로는 충분히 내용을 전달하기 어려울 경우, description 속성을 통해서 전달하고자 하는 의미를 작성합니다. 단순히 객체의 외관을 묘사하기 위해 사용하지 않습니다.

1.10.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용하여 텍스트가 아닌 객체에 설명(Description)을 설정합니다. Accessibility 패널에서는 플래시 콘텐츠를 제작하는 개발자 또는 디자이너가 텍스트가 아닌 객체를 스크린 리더기와 같은 보조 도구가 접근할 수 있도록 정보를 제공하고 각각의 플래시 객체나 플래시로 제작한 어플리케이션 전체에 접근성 옵션을 설정할 수 있습니다.

A. 무비 클립과 버튼에 대체 텍스트 설명(Description) 속성 설정하기플래시의 무비 클립과 같은 텍스트가 아닌 객체에 Accessibility(액세스 가능성) 패널의 설명(Description) 필드 값을 지정하여 스크린 리더기와 같은 보조 도구가 플래시 콘텐츠 내부의 객체를 판독할 수 있도록 접근성 정보를 제공할 수 있습니다.1. 예제 파일 : 03_adobe_home_accessible_movieclip_button_description.fla2. 어도비 로고 및 상단의 내비게이션 버튼들을 각각 선택하고 Accessibility(액세스 가능성) 패널을 엽니다.

주의 : Flash Professional 은 무비 클립이나 버튼 심볼을 변환할 때 속성 패널에 변환한 무비 클립이나 버튼 심볼에 대한 인스턴스 네임을 자동으로 생성합니다.(예 : MovieClip5) 만약 무비 클립이나 버튼 심볼에 어떠한 인스턴스 네임도 설정이 되어 있지 않다면 스크린 리더기는 무비 클립이나 버튼 심볼을 판독할 수 없습니다.

3. Accessibility(액세스 가능성) 패널에서 “객체를 액세스 가능하게 만들기” 체크 상자가 체크 되어 있는지 확인하고, 설명

(Description) 필드에 선택한 객체의 의미를 설명할 수 있도록 내용을 작성합니다. 설정합니다. 이 예제에서는 어도비 로고

및 내비게이션 버튼들에 대한 설명을 다음과 같이 작성하였습니다.

실제로 이 예제와 유사한 어플리케이션을 제작할 경우 설명문(Description)을 적용하는 것은 불필요한 작업일 수 있습니다. 대체 텍스트를 Name 속성을 사용하여 해결 할 수 있는 경우에는 Description 속성을 사용하지 않는 것이 좋습니다. 그러나, 이 장에서는 설명(Description) 속성의 적용 방법을 알아보는 것을 목적으로 하고 있다는 점을 염두 해 주세요.

a. 어도비 로고 : “어도비 한국 웹사이트 첫 화면으로 이동합니다.”b. 제품 버튼 : “어도비 시스템즈의 다양한 제품들을 확인할 수 있습니다.”c. 솔루션 버튼 : “어도비 시스템즈에서 제공하는 다양한 솔루션을 체험해 보세요.”d. 학습 버튼 : “어도비의 다양한 제품의 사용법에 대해 배우실 수 있습니다.”e. 도움말 버튼 : “어도비 제품들의 사용법을 익힐 수 있는 도움말을 제공합니다.”f. 다운로드 버튼 : “다양한 어도비 제품을 다운로드 받으실 수 있습니다.”g. 회사 버튼 : “어도비 시스템즈에 대해 알아보십시오.”

67 / 307

6. 참고 자료

h. 스토어 버튼 : “어도비 제품을 지금 구입하세요.”

그림 11 Accessibility(액세스 가능성)에서 무비 클립 및 버튼에 설명(Description) 속성 설정하기

4. 플래시 문서를 저장하고 파일 > 제작 또는 Alt+Shift+F12 을 눌러 html 상태로 퍼블리시 합니다.5. 스크린 리더기마다 다른 점이 있지만 HTML 문서에서 플래시 영역을 만나면 “플래시 무비 스타트(Flash Movie Start)”를

읽은 후 플래시 콘텐츠 내부의 내용을 읽습니다. 플래시 콘텐츠 내부의 내용을 다 읽은 후 플래시 영역을 빠져나가기 전에 “

플래시 무비 엔드(Flash Movie End)”라고 읽습니다.6. 이 예제에서 스크린 리더기(JAWS)는 이름(Name)을 읽고 그 다음 설명(Description)을 읽습니다. 다음과 같은 순서로

플래시 콘텐츠를 읽습니다.a. 플래시 무비 스타트

b. 그래픽 어도비 한국 홈 “어도비 한국 웹사이트 첫 화면으로 이동합니다.”c. 제품 “어도비 시스템즈의 다양한 제품들을 확인할 수 있습니다.” 버튼

d. 솔루션 “어도비 시스템즈에서 제공하는 다양한 솔루션을 체험해 보세요.” 버튼

e. 학습 “어도비의 다양한 제품의 사용법에 대해 배우실 수 있습니다.” 버튼

f. 도움말 “어도비 제품들의 사용법을 익힐 수 있는 도움말을 제공합니다.” 버튼

g. 다운로드 “다양한 어도비 제품을 다운로드 받으실 수 있습니다.” 버튼

h. 회사 “어도비 시스템즈에 대해 알아보십시오.” 버튼

i. 스토어 “어도비 제품을 지금 구입하세요.” 버튼


이 예제에서는 Description 속성의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

68 / 307

6. 참고 자료

1.10.3 ActionScript 3.0 을 사용하여 설명(Description) 속성 설정하기ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스의 description 속성을 사용하여 스크린 리더기와 같은 보조 도구가 해당 객체의 설명을 판독할 수 있도록 접근성 정보를 제공합니다.



A. ActionScript 3.0 을 사용하여 무비 클립과 버튼에 설명(Description) 속성 설정하기1. 예제 파일 : 03_adobe_home_accessible_movieclip_button_description_as.fla2. 속성 패널에서 어도비 로고 및 내비게이션 버튼에 대한 각각의 인스턴스 네임을 설정합니다. 이 예제에서 각각의 인스턴스

네임은 다음과 같이 설정하였습니다.

실제로 이 예제와 유사한 어플리케이션을 제작할 경우 설명문(Description)을 적용하는 것은 불필요한 작업일 수 있습니다. 대체 텍스트를 Name 속성을 사용하여 해결 할 수 있는 경우에는 Description 속성을 사용하지 않는 것이 좋습니다. 그러나, 이 장에서는 설명(Description) 속성의 적용 방법을 알아보는 것을 목적으로 하고 있다는 점을 염두 해 주세요.

a. 어도비 로고 : adobeLogob. 제품 : productButtonc. 솔루션 : solutionButtond. 학습 : learnButtone. 도움말 : helpButtonf. 다운로드 : downloadButtong. 회사 : companyButtonh. 스토어 : stroeButton

그림 12 어도비 로고 및 내비게이션 버튼에 대한 인스턴스 네임 설정

3. 이 예제에서 어도비 로고와 내비게이션 버튼에 대한 설명(Description)은 다음과 같이 작성하였습니다.a. 어도비 로고 : “어도비 한국 웹사이트 첫 화면으로 이동합니다.”b. 제품 버튼 : “어도비 시스템즈의 다양한 제품들을 확인할 수 있습니다.”

69 / 307

6. 참고 자료

c. 솔루션 버튼 : “어도비 시스템즈에서 제공하는 다양한 솔루션을 체험해 보세요.”d. 학습 버튼 : “어도비의 다양한 제품의 사용법에 대해 배우실 수 있습니다.”e. 도움말 버튼 : “어도비 제품들의 사용법을 익힐 수 있는 도움말을 제공합니다.”f. 다운로드 버튼 : “다양한 어도비 제품을 다운로드 받으실 수 있습니다.”g. 회사 버튼 : “어도비 시스템즈에 대해 알아보십시오.”h. 스토어 버튼 : “어도비 제품을 지금 구입하세요.”

4. 다음 코드는 ActionScript 3.0 에서 AccessibilityProperties 클래스의 description 속성이 어떻게 사용되는지를 보여줍니다.


// 어도비 로고에 대한 접근성 정보 설정var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = "어도비 한국 홈";accProp.description = "어도비 한국 웹사이트 첫화면으로 이동합니다.";

adobeLogo.buttonMode = true;adobeLogo.accessibilityProperties = accProp;

// 버튼의 배열var navigationButtons:Array = [productButton, solutionButton, learnButton, helpButton, downloadButton, companyButton, storeButton];// 버튼에 사용할 접근성 정보 중 name 값에 해당하는 배열var accPropNames:Array = ["제품", "솔루션", "학습", "도움말", "다운로드", "회사", "스토어"];// 버튼에 사용할 접근성 정보 중 description 값에 해당하는 배열var accPropDescriptions:Array = [

"어도비 시스템즈의 다양한 제품들을 확인할 수 있습니다.","어도비 시스템즈에서 제공하는 다양한 솔루션을 체험해 보세요.","어도비의 다양한 제품의 사용법에 대해 배우실 수 있습니다.","어도비 제품들의 사용법을 익힐 수 있는 도움말을 제공합니다.","다양한 어도비 제품을 다운로드 받으실 수 있습니다.","어도비 시스템즈에 대해 알아보십시오.","어도비 제품을 지금 구입하세요."];

assignAccProperties();

// 버튼에 name과 description 속성 할당하는 함수function assignAccProperties():void{var loop:int = navigationButtons.length;


var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accPropNames[i];accProp.description = accPropDescriptions[i];

(navigationButtons[i] as SimpleButton).accessibilityProperties = accProp;}}

5. 이 예제에서 스크린 리더기(JAWS)는 이름(Name)을 읽고 그 다음 설명(Description)을 읽습니다. 다음과 같은 순서로

플래시 콘텐츠를 읽습니다.

70 / 307

6. 참고 자료


b. 그래픽 어도비 한국 홈 “어도비 한국 웹사이트 첫 화면으로 이동합니다.”c. 제품 “어도비 시스템즈의 다양한 제품들을 확인할 수 있습니다.” 버튼

d. 솔루션 “어도비 시스템즈에서 제공하는 다양한 솔루션을 체험해 보세요.” 버튼

e. 학습 “어도비의 다양한 제품의 사용법에 대해 배우실 수 있습니다.” 버튼

f. 도움말 “어도비 제품들의 사용법을 익힐 수 있는 도움말을 제공합니다.” 버튼

g. 다운로드 “다양한 어도비 제품을 다운로드 받으실 수 있습니다.” 버튼

h. 회사 “어도비 시스템즈에 대해 알아보십시오.” 버튼

i. 스토어 “어도비 제품을 지금 구입하세요.” 버튼



1.10.4 Adobe Flex 또는 Adobe Flash Builder 에서 설명(Description) 속성 설정하기Adobe Flex 또는 Adobe Flash Builder(이하 Flex 로 통칭함)는 Adobe Flash Professional 보다 더 다양한 방법으로 설명(Description) 속성을 제공합니다.• flash.accessibility.AccessibilityProperties 클래스의 description 속성 사용

• mx.core.UIComponent 클래스의 accessibilityDescription 속성 사용

1. 예제 파일 : AccessibilityFlex Project 의 AccessibilityDescription.mxml

그림 13 AccessibilityDescription.mxml 실행 화면

2. 이 예제에서는 위에 열거한 두 가지 방법을 적용하여 어떻게 설명(Description) 속성을 설정하는지를 알아봅니다. 취소, 승인에 해당하는 Spark Button 인스턴스를 두 개 생성하고 그에 해당하는 접근성 정보인 설명(Description) 속성을

할당합니다.a. 취소 버튼 : AccessibilityProperties 클래스의 description 속성을 사용하여 Button 클래스의 accessibilityProperties

속성에 그 값을 명시적으로 할당합니다.b. 승인 버튼 : Flex 에서 제공하는 좀더 편리한 속성인 accessibilityDescription 속성에 설명(Description) 속성을

명시적으로 할당합니다.


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" fontFamily="NanumGothic" creationComplete="creationCompleteHandler(event)">




protected function creationCompleteHandler(event:FlexEvent):void

71 / 307

6. 참고 자료

{var accProp:AccessibilityProperties = new

AccessibilityProperties();accProp.name = "취소";accProp.description = "양식을 취소하려면 이 버튼을 누르십시오.";cancelButton.accessibilityProperties = accProp;

}

]]></fx:Script>

<s:Button id="cancelButton" label="취소"/><s:Button id="submitButton" label="승인"

accessibilityName="승인" accessibilityDescription="양식을 제출하려면 이 버튼을 누르십시오."/>

</s:Application>


b. 취소 양식을 취소하려면 이 버튼을 누르십시오. 버튼

c. 승인 양식을 제출하려면 이 버튼을 누르십시오. 버튼

d. 삭제 버튼

e. 플래시 무비 엔드

이 예제서는 실제로 설명(Description) 속성을 사용하지 않아도 무방할 수 있습니다. 설명(Description) 속성은 이름(Name)에서 사용하는 짧은 대체 텍스트로는 충분한 설명을 할 수 없을 경우 사용합니다. 차트나 테이블과 같이 전달해야 할 내용이 많을 경우에 사용하는 것이 좋습니다.




1.11 보조 도구가 판독 할 수 없는 플래시 객체의 표시1.11.1 설명

플래시 콘텐츠 내에서 표시되는 객체 중 배경 이미지나 콘텐츠의 내용과 무관한 표시 객체들이 있을 수 있습니다. 이러한 객체들을 스크린 리더기와 같은 보조 도구들이 판독을 하게 되면, 스크린 리더기와 같은 보조 도구의 사용자들은 콘텐츠를 이해하고 접근하는데 오히려 더 복잡한 단계를 거치게 되어 불편하거나 혼란스러워 할 수 있습니다.

콘텐츠 내에서 의미가 없는 객체들은 오히려 스크린 리더기와 같은 보조 도구가 판독을 할 수 없도록 설정하는 것이 중요합니다.

이 장의 목적은 플래시에서 의미가 없는 표시 객체를 스크린 리더기와 같은 보조 도구들이 접근할 수 없도록 하는 방법에 대해 알아봅니다. Flash Player 는 silent 속성을 사용하여 보조 도구가 콘텐츠에 대한 접근 여부를 지원합니다.

72 / 307

6. 참고 자료

1.11.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용하여 스크린 리더기와 같은 보조 도구들이 플래시 콘텐츠에 접근할 수 없도록 합니다.

이 장의 예제는 “ 3.2.2.A 무비 클립과 버튼에 대체 텍스트 설명 (Description) 속성 설정하기 ” 항목에서 사용한 예제에 이어 제작이 되었습니다.

1. 예제 파일 : 04_adobe_home_accessible_silent.fla2. 예제 파일의 중앙에 있는 배경 이미지를 선택하여 무비 클립으로 변환합니다.3. 변환한 무비 클립을 선택하고 Accessibility 패널(액세스 가능성 패널)을 엽니다. “객체를 액세스 가능하게 만들기”에 체크를

하고 이름(Name) 필드에 “CS5.5 배경 이미지” 라는 이름을 설정합니다. 이 이미지는 배경 이미지로서, 콘텐츠 내에서

아무런 의미를 가지고 있지 않습니다.

그림 14 Accessibility(액세스 가능성) 패널

4. 이 예제에서 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후 이 배경 이미지의 이름(그래픽 : CS5점 다섯 배경 이미지)을 읽을 것입니다.

5. Accessibility(액세스 가능성) 패널에서 “객체를 액세스 가능하게 만들기”의 체크를 해제하고 스크린 리더기로 확인합니다.

73 / 307

6. 참고 자료

그림 15 Accessibility(액세스 가능성) 패널에서 “객체를 액세스 가능하게 만들기” 체크 해제

6. 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후, 배경 이미지를 건너 뛰고 “플래시 무비 엔드” 라는

말과 함께 플래시 콘텐츠의 끝을 알립니다.

1.11.3 ActionScript 3.0 을 사용하여 silent 속성 설정하기ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스의 silent 속성을 사용하면 스크린 리더기와 같은 보조 도구는 콘텐츠 내에서 해당 객체에 접근할 수 없고, 판독할 수 없습니다.

silent 속성을 true 로 설정하면 보조 도구는 지정한 객체에 접근할 수 없습니다.



이 장의 예제는 “ 3.2.3.A ActionScript 3.0 을 사용하여 무비 클립과 버튼에 설명 (Description) 속성 설정하기 ” 항목에서 사용한 예제에 이어 제작이 되었습니다.

1. 예제 파일 : 04_adobe_home_accessible_silent_as.fla2. 4.3.2 의 2번 항목을 반복하여 배경 이미지를 무비 클립으로 변환합니다.3. 속성 패널에서 변환한 무비 클립에 “csBackgroundImage” 라는 인스턴스 네임을 설정합니다.4. 액션스크립트에서 csBackgroundImage 객체에 대한 접근성 정보인 이름(Name)을 할당하는 다음 코드를 추가합니다.

// CS5.5 배경 이미지에 대한 접근성 정보 객체 생성 및 적용var csBackgroundImageAccProp:AccessibilityProperties = new AccessibilityProperties();csBackgroundImageAccProp.name = "CS5.5 배경 이미지";

// 배경 이미지에 접근성 정보 객체 할당

74 / 307

6. 참고 자료

csBackgroundImage.accessibilityProperties = csBackgroundImageAccProp;

5. 이 예제에서 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후 이 배경 이미지의 이름(그래픽 : CS5점 다섯 배경 이미지)을 읽을 것입니다.

6. 스크린 리더기와 같은 보조 도구가 배경 이미지에 접근 할 수 없도록 액션스크립트 코드를 수정합니다.

// CS5.5 배경 이미지에 대한 접근성 정보 객체 생성 및 적용var csBackgroundImageAccProp:AccessibilityProperties = new AccessibilityProperties();csBackgroundImageAccProp.name = "CS5.5 배경 이미지";

// 스크린 리더기와 같은 보조 도구에 노출 제외csBackgroundImageAccProp.silent = true;

// 배경 이미지에 접근성 정보 객체 할당csBackgroundImage.accessibilityProperties = csBackgroundImageAccProp;

1.11.4 Adobe Flex 또는 Adobe Flash Builder 에서 silent 속성 설정하기Adobe Flex 또는 Adobe Flash Builder(이하 Flex 로 통칭함)는 Adobe Flash Professional 보다 더 다양한 방법으로 스크린 리더기와 같은 보조 도구가 표시 객체를 무시할 수 있습니다.• flash.accessibility.AccessibilityProperties 클래스의 silent 속성 사용

• mx.core.UIComponent 클래스의 accessibilityEnabled 속성 사용

1. 예제 파일 : AccessibilityFlex Project 의 AccessibilityEnable.mxml

그림 16 예제 실행 화면

2. 이 예제는 네이버 로고이미지와 검색 필드, 그리고 검색 버튼으로 구성되어 있습니다. 각각의 컴포넌트에 해당하는 대체

텍스트(accessibilityName 속성)를 다음과 같이 설정합니다..a. 네이버 로고 이미지 : 네이버

b. 검색어 입력 필드 : 검색 필드

c. 검색 버튼 : 검색

3. 이 예제를 실행하면, 스크린 리더기는 다음과 같이 각각 읽습니다.a. 네이버 로고 이미지 : 네이버 : 그래픽

b. 검색어 입력 필드 : 검색 필드

c. 검색 버튼 : 검색 버튼

검색이 입력 필드는 “검색 필드 편집 상자 : 텍스트를 입력하세요”, 검색 버튼은 “검색 버튼” 으로 읽습니다. 읽는 순서와 탭 순서는 다른 개념입니다.

4. 네이버 로고 이미지와 검색어 입력 필드에 대해서 스크린 리더기가 읽을 수 없도록 하려면, AccessibilityProperties.silent 속성을 true 로 지정합니다.

5. 네이버 로고 이미지와 검색어 입력 필드에 대해서 스크린 리더기가 읽을 수 없도록 하려면, accessibilityEnabled 속성을

false 로 지정합니다.


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"

75 / 307

6. 참고 자료

fontFamily="NanumGothic" minWidth="955" minHeight="600" creationComplete="creationCompleteHandler(event)">

<s:layout><s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>



protected function creationCompleteHandler(event:FlexEvent):void{

naver.accessibilityProperties.silent = true;}

]]></fx:Script>

<s:Image id="naver" source="../assets/naverLogo.gif" toolTip="네이버" accessibilityName="네이버"/><s:TextInput id="searchField" width="200" accessibilityName="검색필드" accessibilityEnabled="false" /><s:Button id="searchButton" label="검색" accessibilityName="검색" /></s:Application>

6. 위 코드에서 네이버 로고 이미지(naver)와 텍스트 입력 필드(searchField)에 대해서 silent 속성과 accessibilityEnabled 속성을 사용하여 읽는 순서 상에서 객체를 판독할 수 없도록 설정하였습니다. 그 결과 스크린 리더기와 같은 보조 도구는 이

어플리케이션에서 검색 버튼 한 개만을 읽을 것입니다.

silent 나 accessibilityEnabled 속성은 읽는 순서 상에서 객체를 숨길 뿐, 탭 순서 상에서 숨긴 것은 아닙니다. 텍스트 입력 필드와 같이 탭 포커스를 받을 수 있는 객체를 탭 순서 상에서 제거를 하려면 tabEnabled 속성을 false 로 지정해야 합니다. (Image 컴포넌트는 탭 포커스를 받을 수 없는 객체입니다.)



• 3.3 (콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다..∘ 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.

1.12 플래시 콘텐츠의 자식 객체에 보조 도구가 접근할 수 없도록 설정1.12.1 설명

플래시의 표시 객체(DisplayObject)는 트리 구조의 표시 객체 목록으로 나타낼 수 있습니다. 즉, 컨테이너 역할을 하는 표시 객체 안에 이미지나 그래픽, 텍스트와 같은 자식 객체들을 포함 시킬 수 있는 구조입니다. 아이콘과 레이블이 함께 있는 버튼과 같은 UI 처럼 상황에 따라 컨테이너 역할을 하는 표시 객체만 스크린 리더기와 같은 보조 도구에 노출을 하고 컨테이너 내부에 있는 자식 객체들은 보조 도구에게 숨겨야 하는 경우가 있습니다.

컨테이너 안의 자식 객체들에도 스크린 리더기와 같은 보조 도구가 판독을 하게 된다면, 오히려 보조 도구의 사용자는 콘텐츠를 이용하는데 불편함을 느낄 수 있습니다.

76 / 307

6. 참고 자료

이 장의 목적은 플래시에서 의미가 없는 자식 객체를 스크린 리더기와 같은 보조 도구가 판독을 할 수 없도록 하는 방법에 대해 알아봅니다. Flash Player 는 forceSimple 속성을 사용하여 보조 도구가 자식 객체에 대한 접근 여부를 설정합니다.

1.12.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용하여 스크린 리더기와 같은 보조 도구들이 플래시 콘텐츠 중 컨테이너 안에 있는 자식 객체에 접근할 수 없도록 합니다.1. 예제 파일 : 05_adobe_home_accessible_forceSimple.fla

그림 17 무비 클립 컨테이너 안에 배치된 자식 UI

2. 이 예제에는 컨테이너 역할을 하는 무비 클립 안에 버튼과 텍스트, 그리고 무비 클립들을 자식으로 두고 있는 구조입니다. 제품 아이콘과 제품명이 있는 무비 클립(Design Premium, Product Premium 등) 또한 내부에 비트맵 이미지와 텍스트를

포함하고 있는 컨테이너이자 독립적인 UI 의 역할을 가지고 있습니다. 각각의 요소에는 Accessibility(액세스 가능성) 패널의

이름(Name) 필드에 다음과 같은 대체 텍스트를 설정합니다.a. 컨테이너 무비 클립 : 없음b. Creative Suite 5.5 현재 제공 중 버튼 : “Creative Suite 5.5 현재 제공 중”

c. 텍스트 : Name 속성 설정 불가능

d. Design Premium 무비 클립 : 없음e. Product Premium 무비 클립 : 없음f. Web Premium 무비 클립 : 없음g. Design Standard 무비 클립 : 없음h. Master Collection 무비 클립 : 없음i. 구입 버튼 : “구입”

j. 시험버전 버튼 : “시험버전”

3. 컨테이너 무비 클립을 선택하고 Accessibility(액세스 가능성) 패널에 “객체를 액세스 가능하게 만들기”와 “자식 객체 액세스

가능성”이 체크 되어 있는지 확인합니다. 기본 값은 둘 다 체크 상태입니다. 체크가 되어 있지 않다면 두 항목 모두 체크를

합니다.4. 이 예제에서 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후 컨테이너 안의 UI 들을 차례로 읽을

것입니다.

77 / 307

6. 참고 자료

플래시 콘텐츠 안의 텍스트는 기본적으로 특별한 설정을 하지 않아도 스크린 리더기와 같은 보조 도구가 판독을 할 수 있습니다. “Create Suite 5.5 현재 제공 중 버튼”을 읽고 그 다음 “Android, BlackBerry 및 iOS 에..” 내용의 텍스트를 읽습니다.

또한, Design Premium 이나 Product Premium 제품명 무비 클립처럼 내부에 텍스트를 포함하고 있으면, 전역적으로 설정된 플래시의 자동 레이블(autoLabel) 기능으로 스크린 리더기와 같은 보조 도구가 내부의 텍스트를 판독하여 읽을 수 있습니다.

5. 가장 바깥쪽의 컨테이너 무비 클립을 선택하고 Accessibility(액세스 가능성) 패널에서 “자식 객체 액세스 가능성” 항목의

체크를 해제합니다.

그림 18 바깥쪽의 컨테이너 무비 클립에서 “자식 객체 액세스 가능” 항목의 체크 해제

6. 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후 컨테이너 안의 UI 들을 읽지 않고 판독을 끝냅니다.7. 다시 가장 바깥쪽의 컨테이너 무비 클립을 선택하고 Accessibility(액세스 가능성) 패널에서 “자식 객체 액세스 가능성”

항목을 체크합니다.

78 / 307

6. 참고 자료

그림 19 바깥 쪽의 컨테이너 무비 클립에서 “자식 객체 액세스 가능” 체크

8. 컨테이너 무비 클립의 편집모드로 들어가서 “Design Premium”, “Product Premium” 무비 클립을 각각 선택한 후

Accessibility(액세스 가능성) 패널에서 “자식 객체 액세스 가능성” 항목의 체크를 해제합니다.

그림 20 컨테이너 무비 클립의 자식 무비 클립 객체의 “자식 객체 액세스 가능” 체크 해제

9. 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후 컨테이너 안의 UI 들 중 8번 항목에서 체크를

해제한 “Design Premium”과 “Product Premium”을 제외한 나머지 UI 들을 차례로 읽을 것입니다.

이 예제에서는 forceSimple 속성의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서

79 / 307

6. 참고 자료

아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

1.12.3 ActionScript 3.0 을 사용하여 silent 속성 설정하기ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스의 forceSimple 속성을 사용하면 스크린 리더기와 같은 보조 도구는 표시 객체 내부에 있는 자식 객체에 접근할 수 없고, 판독할 수 없습니다.

forceSimple 속성을 true 로 설정하면 보조 도구는 지정한 컨테이너 내부의 객체에 접근할 수 없습니다.


이 예제에서는 이해의 편의상 타임라인 상의 키 프레임에 ActionScript 코드를 작성하였습니다. 물론 Class 를 작성하여 적용하는 방법도 가능합니다.1. 예제 : 05_adobe_home_accessible_forceSimple_as.fla2. 다음과 같이 인스턴스 네임을 지정합니다.

a. 컨테이너 무비 클립 : “productListContainer”b. Creative Suite 5.5 현재 제공 중 버튼 : “csTitleButton”c. 텍스트 : 인스턴스 네임 설정 불가능

d. Design Premium 무비 클립 : “dpButton”e. Product Premium 무비 클립 : “ppButton”f. Web Premium 무비 클립 : “wpButton”g. Design Standard 무비 클립 : “dsButton”h. Master Collection 무비 클립 : “mcButton”i. 구입 버튼 : “buyButton”j. 시험버전 버튼 : “tryButton”

3. productListContainer 무비 클립의 편집모드로 들어가서 내부에 있는 자식 객체들에 대한 접근성 적용 스크립트를

작성합니다. 키 프레임에 다음과 같은 스크립트를 작성합니다.

import flash.accessibility.AccessibilityProperties;import flash.display.DisplayObject;

var uiList:Array = [csTitleButton, dpButton, ppButton, wpButton, dsButton, mcButton, buyButton, tryButton];var accNames:Array = ["Creative Suite 5.5 현재 제공 중",

"디자인 프리미엄", "프로덕트 프리미엄", "웹 프리미엄", "디자인 스탠다드", "마스터 콜렉션", "구입", "시험버전"];

for (var i:int = 0; i < uiList.length; i++){// uiList 안의 객체에 대한 접근성 정보를 생성한 후 적용generateAccName(i);}

// uiList 객체에 접근성 정보 생성하는 함수

80 / 307

6. 참고 자료

function generateAccName(index:int):void{var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accNames[i];

(uiList[i] as DisplayObject).accessibilityProperties = accProp;}

4. 이 예제에서 스크린 리더기(JAWS)는 상단의 어도비 로고와 내비게이션 버튼을 읽은 후 컨테이너 안의 UI 들을 차례로 읽을

것입니다.

플래시의 자동 레이블 기능으로 Design Premium, Product Premium 과 같은 제품 명 무비 클립은 “그래픽 : 디자인 프리미엄”의 접근성 정보인 이름(Name)을 읽은 후, 무비 클립 안의 텍스트 레이블인 “Design Premium”을 한 번 더 읽습니다. 플래시의 접근성 정보 중 전역적인 설정 값이 자동 레이블 설정을 사용하지 않거나, 자식 객체에 접근할 수 없도록 forceSimple 속성을 사용할 수 있습니다.

5. 제품명 무비 클립에 대해서 무비 클립 안의 자식에 스크린 리더기와 같은 보조 도구가 접근할 수 없도록 아래와 같이 코드를

수정합니다.

import flash.accessibility.AccessibilityProperties;import flash.display.DisplayObject;

var uiList:Array = [csTitleButton, dpButton, ppButton, wpButton, dsButton, mcButton, buyButton, tryButton];var accNames:Array = ["Creative Suite 5.5 현재 제공 중",



// uiList 객체에 접근성 정보 생성하는 함수function generateAccName(index:int):void{var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accNames[i];

// 자식 객체에 보조도구가 접근할 수 없도록 설정accProp.forceSimple = true;

(uiList[i] as DisplayObject).accessibilityProperties = accProp;}

81 / 307

6. 참고 자료

이 예제에서는 forceSimple 속성의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.



• 3.3 (콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.∘ 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.

1.13 자동 레이블(Auto Labeling)1.13.1 설명

자동 레이블이란 플래시 안의 표시 객체의 주변이나 안에 있는 텍스트를 플래시가 표시 객체와 연관을 지어 자동으로 레이블로 할당하는 기능을 의미합니다.

폼과 같이 입력 양식이 제공되는 형태에서 플래시는 자동 레이블 기능을 사용하여 입력 텍스트 필드와 같은 객체에 포커스가 들어오게 되면 입력 텍스트 필드의 왼쪽이나 위쪽의 가까운 텍스트를 입력 텍스트 필드와 관련이 있는 레이블로 자동으로 할당합니다.

4.4 장에서 언급한 것과 같이, 무비 클립을 사용하여 버튼을 만들 때 무비 클립 안에 텍스트가 있다면 플래시는 자동 레이블 기능을 사용하여 무비 클립 안의 텍스트를 버튼의 레이블로 할당을 하게 됩니다.

단, 무비 클립을 사용하여 버튼을 만들 경우 무비 클립의 buttonMode 속성 값을 true 로 설정하여 무비 클립이 버튼의 Role 을 사용하고 있다는 것을 스크린 리더기로 전달해야 합니다.

자동 레이블 기능은 기본적으로 활성화 되어 있습니다. 하지만 자동 레이블은 자동으로 Flash Player 가 객체들을 연관 짓기 때문에 복잡한 어플리케이션이나 폼 형태에서 개발자나 디자이너가 의도하지 않은 결과가 있을 수 있습니다. 예측 가능한 결과를 위해서는 제작자가 직접 모든 컨트롤들에 대해 레이블을 명확하게 추가 및 설정할 것을 권장합니다.

1.13.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용자동 레이블 기능은 객체 하나 하나 마다 별도로 지정하는 것이 아닌 Flash Player 의 전역적으로 작동하는 속성 값으로 한 번만 지정합니다. Accessibility(액세스 가능성) 패널을 사용할 경우 플래시 문서(스테이지)를 선택하고 Accessibility(액세스 가능성) 패널의 자동 레이블 항목의 체크 박스의 값을 통해 설정 가능합니다.1. 예제 파일 : 06_auto_labeling.fla2. 새로운 플래시 문서를 열고 정적 텍스트와 입력 텍스트 필드 그리고 무비 클립을 사용하여 아래와 같은 간단한 폼 형태를

만듭니다.

82 / 307

6. 참고 자료

그림 21 Flash Professional 을 사용하여 제작한 폼

3. 그림 22 와 같이 입력 텍스트 필드 주변에 이름, 주소, 전화번호, 메모라는 텍스트 레이블을 만들어 배치를 합니다.4. 확인과 취소 버튼은 무비 클립으로 만들고 내부에 텍스트로 확인과 취소라는 레이블을 배치하고 인스턴스 네임을 각각

submitButton, cancelButton 으로 지정합니다.5. 무비 클립을 버튼으로서 사용하기 위해 키 프레임에 다음과 같은 액션스크립트 코드를 작성합니다.

submitButton.buttonMode = true;cancelButton.buttonMode = true;

6. 이 예제에서 탭 키를 이용하여 폼 안의 객체 사이를 이동하면, 스크린 리더기(JAWS)는 다음과 같이 읽을 것입니다.a. “이름 편집 상자 : 텍스트를 입력하세요.”b. “주소 편집 상자 : 텍스트를 입력하세요.”c. “편집 상자 : 텍스트를 입력하세요.”d. “메모 편집 상자 : 텍스트를 입력하세요.”e. “확인 버튼”

f. “취소 버튼”

7. 자동 레이블을 사용하면 입력 텍스트 필드의 왼쪽이나 위쪽, 또는 버튼 내부의 텍스트를 폼 요소의 레이블로 자동으로

할당하게 됩니다. 전화번호의 경우 입력 텍스트 필드의 오른쪽에 있기 때문에 자동으로 레이블을 할당하지 않습니다. 이러한

경우에는 텍스트 필드와 레이블을 하나의 그룹으로 만들어 적절한 대체 텍스트를 할당하여 스크린 리더기와 같은 보조

도구들이 판독을 할 수 있도록 해야 합니다.8. 스테이지를 클릭하고 Accessibility(액세스 가능성) 패널의 자동 레이블 항목의 체크를 해제합니다.

83 / 307

6. 참고 자료

그림 22 Accessibility(액세스 가능성) 패널에서 자동 레이블 선택 해제

9. 이 예제에서 탭 키를 이용하여 폼 안의 객체 사이를 이동하면, 스크린 리더기(JAWS)는 다음과 같이 읽을 것입니다.a. “편집 상자 : 텍스트를 입력하세요.”b. “편집 상자 : 텍스트를 입력하세요.”c. “편집 상자 : 텍스트를 입력하세요.”d. “편집 상자 : 텍스트를 입력하세요.”e. “레이블 없음 n 버튼” (n 은 임의의 숫자)f. “레이블 없음 n 버튼” (n 은 임의의 숫자)

이 예제에서는 자동 레이블 속성의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

1.13.3 ActionScript 3.0 을 사용하여 noAutoLabeling 속성 설정하기AccessibilityProperties.noAutoLabel 속성을 사용하여 플래시 문서의 자동 레이블 기능을 설정할 수 있습니다. noAutoLabeling 속성은 플래시 문서에 대해 전역적으로 반영이 되므로 문서 자체의 accessibilityProperties 속성 값에 대해 할당해야 합니다.1. 예제 파일 : 06_auto_labeling_as.fla2. 4.5.2 항목에서 사용한 예제 파일에서 Accessibility(액세스 가능성) 패널의 자동 레이블 항목을 다시 체크합니다.3. 자동 레이블을 해제하는 다음의 액션 스크립트 코드를 추가합니다.

import flash.accessibility.AccessibilityProperties;

// 자동 레이블을 해제하는 AccessibilityProperties 객체 생성var acc:AccessibilityProperties = new AccessibilityProperties();acc.noAutoLabeling = true;

// 스테이지에 전역적으로 자동 레이블을 해제하도록 설정this.accessibilityProperties = acc;

84 / 307

6. 참고 자료

submitButton.buttonMode = true;cancelButton.buttonMode = true;

4. 이 예제에서 탭 키를 이용하여 폼 안의 객체 사이를 이동하면, 스크린 리더기(JAWS)는 다음과 같이 읽을 것입니다.a. “편집 상자 : 텍스트를 입력하세요.”b. “편집 상자 : 텍스트를 입력하세요.”c. “편집 상자 : 텍스트를 입력하세요.”d. “편집 상자 : 텍스트를 입력하세요.”e. “레이블 없음 n 버튼” (n 은 임의의 숫자)f. “레이블 없음 n 버튼” (n 은 임의의 숫자)

5. noAutoLabeling 속성을 false 로 설정하면 플래시의 자동 레이블 기능이 활성화 되어 폼 요소(입력 텍스트 필드, 버튼)와

연관된 텍스트를 자동으로 폼 요소의 레이블로 할당하여 적용합니다.

이 예제에서는 자동 레이블 속성의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.



• 3.4 (입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다.∘ 3.4.1(레이블 제공) 입력 서식에 대응하는 레이블을 제공해야 한다.

1.14 동적으로 표시 객체의 접근성 정보 변경 및 변경에 대한 통지1.14.1 설명

플래시를 사용한 UI 의 장점 중 가장 잘 알려진 것은 페이지를 새로 고치지 않고 클라이언트 상에서 변경된 내용을 반영하고 피드백을 바로 사용자에게 알려줄 수 있다는 점입니다. 물론 최근에는 Ajax 기술의 발달로 웹 클라이언트를 실시간으로 변경할 수 있지만, 이 특징은 예나 지금이나 플래시 UI 가 가지고 있는 좋은 장점 중 하나입니다.

가장 쉽게 볼 수 있는 예로는 재생/일시 정지 버튼과 같이 하나의 객체가 두 가지 이상의 기능을 하는 토글 버튼이 있습니다. 재생/일시 정지 버튼은 일반적으로 클릭할 때 마다 재생/일시 정지의 상태를 반복을 합니다. 스크린 리더기와 같은 보조 도구를 사용하는 사용자들이 이러한 유형의 버튼을 사용할 때에도 버튼의 변경된 상태(재생/일시 정지)를 알 수 있어야 합니다. 또한 토글 버튼뿐만 아니라 사용자의 상호작용에 의해 발생한 변경 내용은 바로 사용자에게 피드백이 되어야 합니다.

액션스크립트 3.0 에서는 Accessibility.updateProperties() 메소드를 사용하면, 변경된 접근성 정보들을 모두 한번에 업데이트 해서 스크린 리더기와 같은 보조 도구로 통지합니다.

여러 객체의 접근성 정보를 변경하는 경우, Accessibility.updateProperties() 메소드를 한 번만 호출하면 됩니다. 여러 번 호출하면 성능이 떨어질 수 있으며 화면 판독기가 올바로 작동하지 않을 수도 있습니다.

이 장의 목적은 Accessibility.updateProperties() 메소드를 사용하여 변경된 접근성 정보를 스크린 리더기와 같은 보조도구에 통지하는 방법을 알아봅니다.

1.14.2 Accessibility.updateProperties() 메소드 사용하기1. 예제 파일 : 07_updateProperties.fla

85 / 307

6. 참고 자료

2. 1 프레임에는 재생 상태의 그래픽을, 2 프레임에는 일시 정지 상태의 그래픽이 있는 무비 클립을 만듭니다.

그림 23 1 프레임과 2 프레임에 각각 재생 그래픽과 일시 정지 그래픽을 포함하고 있는 playPauseButton 무비 클립

3. 라이브러리 패널에서 playPauseButton 무비 클립 심볼을 선택하고 우클릭 > 속성 메뉴를 선택하여 심볼 속성 창을 엽니다.4. 고급을 클릭하여 심볼 속성 창을 확장하고 ActionScript 에 내보내기를 체크합니다.5. 클래스 필드에 ui.buttons.PlayPauseButton 으로 입력하여 재생/일시 정지 무비 클립에 대한 패키지와 클래스를 지정합니다.6. 기본 클래스 필드에는 flash.display.MovieClip 으로 지정하고(기본값으로 지정되어 있음) 확인 버튼을 클릭합니다.

86 / 307

6. 참고 자료

그림 24 playPauseButton 무비 클립에 패키지 및 클래스 할당

7. 새로운 액션 스크립트 파일을 만들고 PlayPauseButtonDocument.as 라는 이름으로 07_updateProperties.fla 파일과

동일한 경로에 저장합니다. 이 액션스크립트 파일은 07_updateProperties.fla 문서의 도큐먼트 클래스로 사용할 것입니다.8. 스테이지를 클릭하고 속성 패널의 클래스 필드에 “PlayPauseButtonDocument”라고 입력합니다.

87 / 307

6. 참고 자료

그림 25 도큐먼트 클래스 설정

9. 스테이지에 playPauseButton 무비 클립이 있다면 삭제합니다.10. PlayPauseButtonDocument.as 파일에 다음 코드를 작성합니다.

package {

import ui.buttons.PlayPauseButton;import flash.display.MovieClip;import flash.events.MouseEvent;import flash.accessibility.AccessibilityProperties;import flash.accessibility.Accessibility;

public class PlayPauseButtonDocument extends MovieClip{

private var playPauseButton:PlayPauseButton;

/** * 생성자 */public function PlayPauseButtonDocument() {

createPlayPauseButton();}

/** * @private * 재생/일시 정지 버튼 객체를 생성하는 메소드 */private function createPlayPauseButton():void{

playPauseButton = new PlayPauseButton();playPauseButton.stop();playPauseButton.buttonMode = true;playPauseButton.x = 100;playPauseButton.y = 100;// 버튼에 재생 상태에 대한 접근성 정보를 할당playPauseButton.accessibilityProperties = getPlayStateAccProp();// 버튼에 클릭 이벤트 등록playPauseButton.addEventListener(MouseEvent.CLICK,

playPauseButtonClickHandler);

88 / 307

6. 참고 자료

addChild(playPauseButton);}

/** * @private * 재생 버튼 상태에 대한 접근성 정보 객체를 반환하는 메소드 */private function getPlayStateAccProp():AccessibilityProperties{

var accProp:AccessibilityProperties;

if (playPauseButton.accessibilityProperties == null){

accProp = new AccessibilityProperties();}else{

accProp = playPauseButton.accessibilityProperties;}

accProp.name = "재생";

return accProp;

}

/** * @private * 일시 정지 버튼 상태에 대한 접근성 정보 객체를 반환하는 메소드 */private function getPauseStateAccProp():AccessibilityProperties{

var accProp:AccessibilityProperties;

if (playPauseButton.accessibilityProperties == null){

accProp = new AccessibilityProperties();}else{

accProp = playPauseButton.accessibilityProperties;}

accProp.name = "일시 정지";

return accProp;}

/** * @private * 재생/일시 정지 버튼을 클릭하면 실행되는 이벤트 핸들러 */private function playPauseButtonClickHandler(event:MouseEvent):void{

var frame:int = playPauseButton.currentFrame;var button:MovieClip = event.currentTarget as MovieClip;

89 / 307

6. 참고 자료

// 현재 버튼 상태가 재생 상태일 때if (button.currentFrame == 1){

button.gotoAndStop(2);button.accessibilityProperties = getPauseStateAccProp();

}else{

button.gotoAndStop(1);button.accessibilityProperties = getPlayStateAccProp();

}

// 사용자가 보조 도구를 사용 중이라면 변경된 접근성 정보를 업데이트if (Accessibility.active){

Accessibility.updateProperties();}

}

}

}

11. 이 예제에서 스크린 리더기(JAWS)는 playPauseButton 버튼에 포커스가 있고, 버튼을 누를 때 마다(Space 키 사용으로

누름) “재생 버튼” 과 “일시 정지 버튼”을 번갈아 가며 읽을 것입니다. Accessibility.updateProperties() 메소드가 호출될 때

변경된 접근성 정보를 Flash Player 를 통해 스크린 리더기와 같은 보조 도구로 통지를 하고 통지를 받은 보조 도구는 변경된

정보를 읽게 됩니다.

Accessibility.updateProperties() 메소드는 사용자가 스크린 리더기를 사용 하고 있을 때에만 사용해야 합니다. 보조 도구가 없는 환경에서 호출을 하게 된다면 런타임 에러를 발생하므로 반드시 검증 작업을 거친 후 사용하도록 합니다.

이 메소드를 호출 하기 전에 사용자의 시스템이 시스템이 스크린 리더기를 사용할 수 있는 환경인지를 확인(flash.system.Capabilities.hasAccessibility 속성으로 검증)하고, 그 다음 스크린 리더기가 활성화 된 상태에서 플래시 응용프로그램과 통신 중인지를 확인(flash.accessibility.Accessibility.active 속성으로 검증)해야 합니다.

1.14.3 Adobe Flex 또는 Adobe Flash Builder 에서 동적으로 접근성 정보 변경하기Flex SDK 에서는 Flash 에서 accessibilityProperties 객체의 값을 변경 한 후 Accessibility.updateProperties() 메소드를 호출하는 것 보다 더 간편하게 접근성 정보를 변경할 수 있습니다.

Flex 의 UIComponent 클래스 및 UIComponent 를 상속하는 클래스의 접근성 관련 속성인 accessibilityName, accessibilityDescription 과 같은 속성은 값을 변경하면 내부적으로 Accessibility.updateProperties() 메소드를 호출합니다. 그렇기 때문에 별도로 Accessiblity.updateProperties() 메소드를 사용하지 않아도 됩니다.1. 예제 파일 : AccessibilityUpdateProperties.mxml

그림 26 이미지 변경 버튼을 클릭할 때 마다 로고 이미지를 변경하는 예제

90 / 307

6. 참고 자료

2. 이 예제에서는 accessibilityName 속성을 변경하여 Accessibility.updateProperties() 메소드를 호출하지 않고도 로고

이미지에 할당한 접근성 정보를 변경하여 스크린 리더기로 통지하는 것을 보여줍니다(Accessibility.updateProperties() 메소드가 아예 호출이 되지 않는 것이 아닙니다. mx.core.UIComponent 클래스는 accessibilityName 속성 값이 변경이 될

때 setter 함수 안에서 Accessibility.updateProperties() 메소드를 호출합니다).3. 이미지 버튼을 클릭할 때 마다 logoImage 인스턴스의 accessibilityName 속성을 “미투데이 로고”, “요즘 로고”를 번갈아

가며 변경을 합니다.


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<s:layout><s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<fx:Script><![CDATA[

[Bindable][Embed(source="../assets/me2dayLogo.gif")]private var me2dayLogo:Class;

[Bindable][Embed(source="../assets/yozmLogo.gif")]private var yozmLogo:Class;

/** * @private * logoImage의 source를 미투데이 로고와 요즘 로고로 번갈아가며 변경하는 메소드 */private function changeLogoImage():void{

if (logoImage.source == me2dayLogo){

logoImage.source = yozmLogo;logoImage.accessibilityName = "요즘 로고";

}else{

logoImage.source = me2dayLogo;logoImage.accessibilityName = "미투데이 로고";

}}

/** * @private * 이미지 변경 버튼을 클릭하면 실행하는 이벤트 핸들러 */protected function changeButtonClickHandler(event:MouseEvent):void{

changeLogoImage();}

]]></fx:Script>

91 / 307

6. 참고 자료

<s:Button id="changeButton" label="이미지 변경" accessibilityName="이미지 변경" click="changeButtonClickHandler(event)"/>

<s:Image id="logoImage" source="{me2dayLogo}" accessibilityName="미투데이 로고"/></s:Application>



1.15 시각적으로 구분할 수 있는 포커스의 제공1.15.1 설명

키보드를 사용하여 화면상의 표시된 객체들을 이동 할 때, 현재 위치하고 있는 곳(포커스를 받은 곳)을 시각적으로 구분할 수 있도록 표현을 해야 할 필요가 있습니다. 사용자는 현재의 포커스가 어느 객체에 있는지를 판단을 하고 이전, 이후의 객체 사이를 이동을 할 수 있습니다.

일반적으로 Tab 키와 Shift+Tab 키를 사용하여 상호작용을 하는 플래시 표시 객체 사이를 이동합니다. Flash Player 는 기본적으로 노란색 테두리가 있는 사각형으로 포커스의 위치를 나타냅니다.

그림 27 솔루션 버튼에 포커스가 있음을 나타내는 노란색 사각형

이 장의 목표는 포커스를 받은 객체를 시각적으로 표시하는 방법과 사용자 정의 포커스를 만드는 법에 대해 알아봅니다.

Flash Professional 의 fl 패키지의 컴포넌트들과 Flex 의 컴포넌트들은 기본적으로 Flash Player 의 기본 노란색 사각형이 아닌 자체적인 스타일의 포커스 스킨을 제공하고 있으며, 이 포커스 스킨을 사용자가 쉽게 변경할 수 있도록 제공하고 있습니다.

1.15.2 Flash Professional 에서 fl 패키지의 UI Component 의 포커스 스킨 변경하기플래시의 UI Component 에는 포커스 스킨이라는 것이 있습니다. 이 포커스 스킨은 fl.core.UICompoent 클래스를 상속하는 일부 컴포넌트에서 공통으로 사용하고 있습니다. FocusManager 라는 클래스에서는 지정한 컴포넌트가 tab 을 받을 수 있는 객체일 경우 Flash Player 에서 사용하는 노란색 사각형의 포커스를 제거(focusRect 속성)하고 공통으로 사용하고자 하는 포커스 스킨을 시각적인 포커스 표시자로 사용합니다.

UIComponent 의 포커스를 변경하는 플래시의 라이브러리 패널 안에 있는 포커스 상자 무비 클립을 편집하여 그래픽으로 정의한 포커스 그래픽을 수정함으로써 간단하게 변경할 수 있습니다.1. 예제 파일 : 08_componentFocusSkin.fla2. 예제에는 플래시의 컴포넌트(구성 요소) 패널 안의 User Interface 폴더의 컴포넌트들(Label, TextInput, NumericStepper,

RadioButton, ComboBox, Button)을 사용하여 폼 형태를 구성하였습니다.

92 / 307

6. 참고 자료

그림 28 이름 입력 필드에 시각적으로 포커스 상자를 표시한 모습

3. 플래시의 fl 컴포넌트의 포커스 상자는 그림 29 에서 보는 것과 같이 파란색의 테두리가 둥근 사각형입니다. 플래시 문서에 fl 컴포넌트를 배치하게 되면 라이브러리 패널 안으로 컴포넌트와 관련된 여러 자원들이 함께 포함이 됩니다. 이 중 포커스

상자에 대한 자원은 라이브러리의 Component Assets > Shared > focusRectSkin 무비 클립입니다.

그림 29 라이브러리 안에 위치한 포커스 상자 무비 클립

4. fl 컴포넌트에 대한 포커스 상자는 focusRectSkin 무비 클립의 편집모드에서 그래픽을 수정함으로써 간단하게 변경할 수

있습니다.5. focusRectSkin 무비 클립의 편집 모드로 들어가서 포커스 상자가 되는 그래픽의 색상이나 모양을 변경합니다.

93 / 307

6. 참고 자료

그림 30 focusRectSkin 의 그래픽을 변경한 모습

6. fla 파일을 컴파일 하고 Tab 키를 사용하여 포커스를 이동하면 위에서 변경한 포커스 사각형이 적용된 것을 확인할 수

있습니다.

그림 31 변경한 포커스 사각형이 적용된 모습

.

1.15.3 Flex 에서 mx 패키지의 포커스 스킨 변경하기Flex 에서는 다양한 방법으로 포커스 스킨을 변경하고 제작을 할 수 있습니다. 테마를 변경하거나 포커스와 관련한 스타일 속성을 변경할 수 있습니다. 또한 ActionScript 를 사용하여 포커스 스킨으로 사용할 클래스를 제작하여 적용할 수 있습니다.

이 장의 목표는 Flex 어플리케이션에서 포커스를 변경하여 적용하는 방법에 대해 알아봅니다.

94 / 307

6. 참고 자료

A. Style 속성을 사용하여 특정 컴포넌트의 인스턴스의 포커스 스타일 변경

그림 32 Flex 의 기본 포커스 스킨

포커스 상자의 색상이나 투명도, 두께 등을 변경할 때 가장 쉽게 사용할 수 있는 방법은 포커스와 관련한 스타일 속성을 사용하는 것입니다.• focusColor : 포커스 상자의 색상입니다.• focusAlpha : 포커스 상자의 투명도입니다.• focusThickness : 포커스 상자의 두께입니다.

포커스의 스타일은 특정 객체에만 적용을 할 수 있을 뿐만 아니라, 전역적으로 모든 객체에 한번에 적용을 할 수 있습니다. 다음 예제는 위 그림 33 의 이름 레이블을 가지고 있는 TextInput 컴포넌트의 스타일을 변경 합니다.1. 예제 파일 : FocusSkinModifyStyle.mxml


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" fontFamily="NanumGothic">


import mx.core.FlexGlobals;import mx.collections.ArrayCollection;import mx.events.FlexEvent;

[Bindable]private var dropDownData:ArrayCollection

= new ArrayCollection([

{label:"빨간색", data:"Red"},

95 / 307

6. 참고 자료

{label:"파란색", data:"Blue"},{label:"노란색", data:"Yellow"}

] );

]]></fx:Script>

<s:Panel title="플렉스 포커스 스킨 변경하기" width="400" height="350" horizontalCenter="0" verticalCenter="0">

<s:Scroller width="100%" height="100%"><s:Group left="10" right="10" top="10" bottom="10">

<s:Form id="form" defaultButton="{submitButton}"><s:FormHeading label="포커스 스킨 변경하기"

backgroundColor="#FFFFFF" /><s:FormItem label="이름: ">

<s:TextInput id="nameText" focusColor="#BB32EE" focusAlpha="0.5" focusThickness="5"/>

</s:FormItem><s:FormItem label="주문 수량: ">

<s:NumericStepper id="counter"/></s:FormItem><s:FormItem label="배송 방법: ">

<s:HGroup><s:RadioButton id="quickServiceRadio"

label="퀵서비스"

groupName="delivery"/><s:RadioButton id="parcelServiceRadio"

label="택배"

groupName="delivery"/></s:HGroup>

</s:FormItem><s:FormItem label="옵션 :">

<s:DropDownList id="optionDropDown"

dataProvider="{dropDownData}" selectedIndex="0"/>

</s:FormItem><s:FormItem>

<s:HGroup><s:Button id="submitButton" label="확인" /><s:Button id="cancelButton" label="취소" />

</s:HGroup></s:FormItem>

</s:Form></s:Group>

</s:Scroller></s:Panel>

</s:Application>

96 / 307

6. 참고 자료

2. 실행 결과

nameText 라는 TextInput 컴포넌트에 focusColor, focusAlpha, focusThickness 스타일 속성 값을 지정함으로써 nameText라는 TextInput 컴포넌트의 스타일이 변경할 수 있습니다.

그림 33 nameText 라는 인스턴스에 새로운 포커스 스타일 적용

ActionScript 의 setStyle 메소드를 사용하여 포커스 스타일을 변경할 수 있습니다.nameText.setStyle(“focusColor”, 0xBB32EE);nameText.setStyle(“focusAlpha”, 0.5);nameText.setStyle(“focusThickness”, 5);

B. Style 속성을 사용하여 동일한 컴포넌트의 포커스 스타일 변경컴포넌트의 특정 인스턴스 뿐만 아니라 동일한 유형의 컴포넌트에도 일관된 포커스 스타일을 변경할 수 있습니다. 예를 들어 버튼 컴포넌트에만 별도의 다른 형태의 포커스 스킨을 적용하고자 할 때, 인스턴스에 일일이 스타일을 지정하는 것이 아닌, 컴포넌트의 클래스 자체에 스타일을 지정함으로써, 컴포넌트의 모든 인스턴스가 변경한 포커스 스타일을 적용할 수 있습니다.

이 예제에서는 확인과 취소 버튼에 해당하는 spark.components.Button 클래스에 대한 포커스 스타일을 CSS 를 사용하여 지정합니다.1. 예제 파일 : FocusSkinSameComponentModifyStyle.mxml


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" fontFamily="NanumGothic">

<fx:Style>@namespace s "library://ns.adobe.com/flex/spark";

s|Button {

97 / 307

6. 참고 자료

focusColor: #FF0066;focusThickness: 4;

}</fx:Style>


import mx.core.FlexGlobals;import mx.collections.ArrayCollection;import mx.events.FlexEvent;

[Bindable]private var dropDownData:ArrayCollection = new ArrayCollection(

[{label:"빨간색", data:"Red"},{label:"파란색", data:"Blue"},{label:"노란색", data:"Yellow"}

]);

]]></fx:Script>

<s:Panel title="플렉스 포커스 스킨 변경하기" width="400" height="350" horizontalCenter="0" verticalCenter="0">

<s:Scroller width="100%" height="100%"><s:Group left="10" right="10" top="10" bottom="10">

<s:Form id="form" defaultButton="{submitButton}"><s:FormHeading label="포커스 스킨 변경하기"

backgroundColor="#FFFFFF" /><s:FormItem label="이름: ">

<s:TextInput id="nameText" /></s:FormItem><s:FormItem label="주문 수량: ">

<s:NumericStepper id="counter"/></s:FormItem><s:FormItem label="배송 방법: ">

<s:HGroup><s:RadioButton id="quickServiceRadio"

label="퀵서비스"

groupName="delivery"/><s:RadioButton id="parcelServiceRadio"

label="택배"

groupName="delivery"/></s:HGroup>

</s:FormItem><s:FormItem label="옵션 :">

<s:DropDownList id="optionDropDown"

dataProvider="{dropDownData}" selectedIndex="0"/>

</s:FormItem>

98 / 307

6. 참고 자료

<s:FormItem><s:HGroup>

<s:Button id="submitButton" label="확인" /><s:Button id="cancelButton" label="취소" />

</s:HGroup></s:FormItem>

</s:Form></s:Group>

</s:Scroller></s:Panel></s:Application>

2. 코드를 컴파일 하고 Tab 키를 사용하여 “확인”과 “취소” 버튼으로 포커스를 이동시키면 <fx:Style /> 안에서

spark.components.Button 클래스에 대해 선언한 focusColor 와 focusTickness 가 적용이 됩니다. (다른 컴포넌트는 Flex의 기본 포커스 스타일을 사용합니다.)

그림 34 Button 컴포넌트의 모든 인스턴스에 적용한 동일한 형태의 포커스 스타일

ActionScript 의 StyleManager 클래스를 사용하면 CSS 를 사용하지 않고 같은 유형의 컴포넌트의 모든 인스턴스에 동일한 포커스 스타일을 적용할 수 있습니다.styleManager.getStyleDeclaration("spark.components.Button").setStyle("focusColor", 0x00FFFF);styleManager.getStyleDeclaration("spark.components.Button").setStyle("focusThickness", 5);

1.15.4 사용자 포커스 제작하기Flash Player 는 포커스를 받은 객체에 기본적으로 노란색의 사각형 테두리의 포커스 상자를 그려서 포커스의 위치를 표현합니다. 하지만 일부 플래시 디자이너나 개발자들은 이 노란색의 포커스 상자를 좋아하지 않을 수도 있고, 새로운 형태의 포커스 상자를 원할 수도 있습니다.

이러한 경우에는 노란색의 포커스 상자를 표시하는 속성인 focusRect 속성을 false 로 설정하고, 포커스를 받을 수 있는 모든 객체에 새로운 포커스 표시자를 제작해야 합니다.

실제로 범용적인 포커스 상자를 제작을 하는 일은 많은 시간과 노력이 필요한 일입니다. 플래시의 fl 패키지의 UI 컴포넌트들과 Flex 의 모든 컴포넌트들처럼 포커스를 받을 수 있는 표시 객체에 대한 설계부터 상속 구조들에 대한 고려를 해야 할 것입니다.

99 / 307

6. 참고 자료

이번 장의 목적은 Flash Player 에서 제공하는 노란색의 포커스 상자가 아닌 직접 사용자가 제작한 포커스 상자로 포커스 표시를 변경하는 것이며, 포커스가 들어왔을 때(FOCUS_IN), 포커스가 나갔을 때(FOCUS_OUT)의 이벤트를 활용하여, 버튼을 통해 포커스 상자를 구현하는 사례를 알아봅니다.

물론 다른 방법을 통해서도 사용자 포커스를 제작할 수 있습니다. 이 예제는 사용자 포커스를 제작하는 많은 방법 중 한 가지입니다.

그림 35. 사용자 정의 포커스 사각형을 적용한 모습

1. 예제 : CustomFocusSkin.fla 와 관련 패키지(액션스크립트 파일들)2. 클래스 설명

a. CustomFocusSkin.as애플리케이션에서의 메인 클래스입니다. 이 클래스는 버튼을 생성하고 화면에 표시하는 역할을 합니다.

b. core.CustomFocusRect.as시각적으로 표시되는 포커스 그래픽입니다.(그림 36 에서의 파란색 박스)

c. core.FocusableSprite.asCustomFocusRect 인스턴스를 객체의 포커스 박스로 사용하는 기반 클래스입니다. 그림 36 에서의 파란색의 포커스를 사용하려면 이 클래스를 상속받아서 제작해야 합니다.

d. buttons.ButtonBase.as그림 36 에서의 각각의 레이블이 있는 버튼으로 FocusableSprite 클래스를 상속받아 제작된 클래스입니다.

3. 애셋 설명(CustomFocusSkin.fla 파일 안의 라이브러리)a. ButtonUpState

buttons.skins.ButtonUpState 클래스로 정의가 되어있는 그래픽으로 버튼이 보통 상태일 때를 나타냅니다.b. ButtonOverState

buttons.skins.ButtonOverState 클래스로 정의가 되어있는 그래픽으로 버튼이 오버 상태일 때를 나타냅니다.c. ButtonDownState

buttons.skins.ButtonDownState 클래스로 정의가 되어 있는 그래픽으로 버튼이 눌려진 상태일 때를 나타냅니다.4. 소스 코드

a. CustomFocusSkin.as

package{import buttons.ButtonBase;

import flash.display.Sprite;

public class CustomFocusSkin extends Sprite{

// 각각의 버튼 레이블 정보를 담은 배열private var buttonLabels:Array = [

"제품","솔루션","학습",

100 / 307

6. 참고 자료

"도움말","다운로드","회사","스토어"];

/** * 생성자 */public function CustomFocusSkin(){

createButtons();}

/** * @private * 버튼들을 만들고 배치하는 메소드 */private function createButtons():void{

var startX:Number = 10;var startY:Number = 10;for (var i:int = 0; i < buttonLabels.length; i++){

var button:ButtonBase = new ButtonBase(buttonLabels[i]);button.x = startX;button.y = startY;

startX += button.width + 2;

addChild(button);}

}}}

b. core.CustomFocusRect.as

package core{import flash.display.DisplayObject;import flash.display.Graphics;import flash.display.Sprite;import flash.events.Event;

/** * 포커스를 받은 객체를 시각적으로 구분할 수 있는 * 포커스 표시를 나타내는 클래스입니다. */public class CustomFocusRect extends Sprite{

// 포커스 사각형의 너비와 높이를 저장하기 위한 변수private var focusWidth:Number;private var focusHeight:Number;

101 / 307

6. 참고 자료

/** * 생성자 */public function CustomFocusRect(width:Number=100, height:Number=100){

super();focusWidth = width;focusHeight = height;

// CustomFocusRect 인스턴스가 스테이지에 추가될 때의 이벤트 리스너 등록this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

}

/** * @private * 업데이트 된 크기에 맞는 포커스 상자를 그립니다. */private function updateFocusSize():void{

var g:Graphics = this.graphics;g.clear();g.beginFill(0x0066CC, 0.5);g.drawRect(2, 2, focusWidth - 4, focusHeight - 4);g.drawRect(0, 0, focusWidth, focusHeight);g.endFill();

}

/** * 포커스 박스의 크기를 조정하는 메소드 * @param width * @param height */public function setSize(width:Number, height:Number):void{

focusWidth = width;focusHeight = height;updateFocusSize();

}

/** * @private * 포커스 박스가 스테이지에 추가가 될 때 실행되는 이벤트 핸들러입니다. * 이 이벤트 핸들러에서는 포커스가 참조할 객체가 어떤것인지를 판단하게 됩니다. */protected function addedToStageHandler(event:Event):void{

var owner:DisplayObject = (event.currentTarget as DisplayObject).parent;setSize(owner.width, owner.height);

}

}}

c. core.FocusableSprite.as

package core

102 / 307

6. 참고 자료

{import flash.display.Sprite;import flash.events.FocusEvent;

/** * CustomFocusRect 인스턴스를 포커스 박스로 하는 기본 클래스입니다. * 이 클래스를 사용하여 CustomFocusRect를 포커스 박스로 사용하게 됩니다. */public class FocusableSprite extends Sprite{

private var _focusGraphic:Sprite;

public function get focusGraphic():Sprite{

if (_focusGraphic == null)_focusGraphic = new CustomFocusRect();

return _focusGraphic;}

public function set focusGraphic(value:Sprite):void{

_focusGraphic = value;}

/** * 생성자 * Flash Player에서 제공하는 노란색의 기본 포커스 박스를 제거하고 * 이 객체가 포커스를 받았을 때와 포커스를 잃었을 때에 대한 이벤트를 수신합니다. */public function FocusableSprite(){

super();this.focusRect = false;this.addEventListener(FocusEvent.FOCUS_IN, focusInHandler);this.addEventListener(FocusEvent.FOCUS_OUT, focusOutHandler);

}

/** * @private * 포커스 사각형을 컨테이너의 표시 리스트의 최 상위에 배치합니다. */protected function forwardToFocusGraphic():void{

if (!focusGraphic)return;

addChildAt(focusGraphic, numChildren - 1);}

/** * @private * 객체가 포커스를 받았을 때 실행되는 이벤트 핸들러 */

103 / 307

6. 참고 자료

protected function focusInHandler(event:FocusEvent):void{

forwardToFocusGraphic();}

/** * @private * 객체가 포커스를 잃었을 때 실행되는 이벤트 핸들러 */protected function focusOutHandler(event:FocusEvent):void{

if (focusGraphic)removeChild(focusGraphic);

}

}}

d. buttons.ButtonBase.as

package buttons{import buttons.skins.*;

import core.FocusableSprite;

import flash.display.Sprite;import flash.events.FocusEvent;import flash.events.MouseEvent;import flash.geom.Rectangle;import flash.text.TextField;import flash.text.TextFieldAutoSize;import flash.text.TextFormat;

/** * FocusableSprite 클래스를 상속한 레이블이 있는 간단한 버튼 * 클래스입니다. */public class ButtonBase extends FocusableSprite{

// 버튼의 up, over, down 의 상태를 정의하는 그래픽 객체들private var upState:Sprite;private var overState:Sprite;private var downState:Sprite;

private var labelField:TextField;

private var _label:String = "label";

public function get label():String{

return _label;}

public function set label(value:String):void{

_label = value;

104 / 307

6. 참고 자료

labelField.text = value;}

/** * 생성자로 버튼의 상태별 그래픽들과 레이블로 사용할 텍스트 필드를 생성합니다. * @param label */public function ButtonBase(label:String = "label"){

super();this._label = label;

this.buttonMode = true;this.mouseChildren = false;

createButtonStateGraphic();createLabelField();

// 버튼의 기본 비헤이비어에 대한 이벤트 수신을 등록합니다.addEventListener(MouseEvent.ROLL_OVER, overHandler);addEventListener(MouseEvent.MOUSE_UP, overHandler);addEventListener(MouseEvent.ROLL_OUT, outHandler);addEventListener(MouseEvent.MOUSE_OUT, outHandler);addEventListener(MouseEvent.MOUSE_DOWN, downHandler);

}

override public function set width(value:Number):void{

var width:Number = Math.max(30, value)upState.width = width;overState.width = width;downState.width = width;

// 레이블의 위치를 버튼의 가운데로labelField.x = Math.floor((width - labelField.width)/ 2);labelField.y = Math.floor((height - labelField.height) / 2);

}

/** * @private * 버튼의 각각의 상태에 대한 그래픽 객체를 생성합니다. */protected function createButtonStateGraphic():void{

upState = new ButtonUpState();overState = new ButtonOverState();downState = new ButtonDownState();

var skinWidth:int = upState.width;var skinHeight:int = upState.height;var scale9Grid:Rectangle = new Rectangle(5, 5, skinWidth - 10, skinHeight

- 10);

upState.scale9Grid = scale9Grid;overState.scale9Grid = scale9Grid;downState.scale9Grid = scale9Grid;

105 / 307

6. 참고 자료

addChildAt(upState, 0);}

/** * @private * 버튼 레이블이 되는 텍스트 필드를 생성합니다. */protected function createLabelField():void{

var textFormat:TextFormat = new TextFormat();textFormat.font = "NanumGothic";textFormat.size = 11;textFormat.bold = true;

labelField = new TextField();labelField.defaultTextFormat = textFormat;labelField.autoSize = TextFieldAutoSize.CENTER;labelField.selectable = false;labelField.textColor = 0xFFFFFF;labelField.text = label;

addChild(labelField);this.width = labelField.width + 10;

}

/** * @private * 포커스를 받았을 때 실행되는 이벤트 핸들러로 * 포커스를 받은 버튼에 포커스 상자를 그리고 버튼의 상태를 오버 상태로 바꿉니다. */override protected function focusInHandler(event:FocusEvent):void{

super.focusInHandler(event);overHandler();

}

/** * @private * 포커스를 잃었을 때 실행되는 이벤트 핸들러로 * 포커스 상자를 제거하고 버튼을 up상태로 되돌려 놓습니다. */override protected function focusOutHandler(event:FocusEvent):void{

super.focusOutHandler(event);outHandler();

}

protected function downHandler(event:MouseEvent=null):void{

if (this.contains(upState))removeChild(upState);

if (this.contains(overState))removeChild(overState);

106 / 307

6. 참고 자료

addChildAt(downState, 0);}

protected function outHandler(event:MouseEvent=null):void{

addChildAt(upState, 0);


if (this.contains(downState))removeChild(downState);

}

protected function overHandler(event:MouseEvent=null):void{


addChildAt(overState, 0);


}}}

1.15.5 KWCAG 2.0 관련 항목• 2.1(키보드 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다.

∘ 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

1.16 플래시 문서 안에서 논리적으로 읽는 순서를 명시1.16.1 설명

일반적으로 잘 구조화 된 웹 페이지는 CSS 를 제거했을 때, 콘텐츠의 배치가 선형적으로 형태로 이루어져 있는 것을 볼 수 있습니다.

107 / 307

6. 참고 자료

그림 36 CSS 를 제거한 후의 문서의 모습(http://www.adobe.com/products/premiere.html?promoid=ITKJK)

웹 페이지 문서의 방향이 위에서 아래쪽으로의 선형적인 방향을 가지고 있기 때문에 스크린리더기와 같은 보조 도구들은 순차적으로 문서 내의 콘텐츠를 읽어 내려갈 수 있습니다.

그러나, 플래시 문서는 좌표 기반으로 객체와 텍스트를 배치하기 때문에 선형적인 문서 구조를 갖기 어렵습니다. 물론 가로나 세로 방향의 한쪽 방향으로 단순하게 나열 된 경우 Flash Player 에서는 왼쪽에서 오른쪽 방향, 위에서 아래 방향으로 향하도록 자동으로 올바르게 읽는 순서를 설정합니다. 하지만 복잡하게 배치되어 있는 객체들의 경우 예상했던 순서대로 객체의 탐색이 되지 않을 것입니다.

다음 그림은 매트릭스 형태로 배치된 표시 객체를 읽었을 때의 순서를 표시한 예입니다. (출처 : http://www.adobe.com/accessibility/products/flash/reading.html)

http://www.adobe.com/accessibility/products/flash/reading.html

108 / 307

6. 참고 자료

그림 37 Flash Player 에서 자동으로 설정한 읽는 순서

그림 38 에서 읽는 순서는 아마도 A, B, C, ... , Z까지 순차적으로 읽는 것을 기대하겠지만, 유감스럽게도 두 번째 그림과 같이 읽는 순서가 예상한 것과 다르게 될 것입니다. 이러한 경우는 일반적으로 플래시 제작 시 흔하게 발생할 수 있는 상황이며, 특히나 플래시의 표시 객체가 트리 구조로 복잡하게 중첩 되어 있는 경우에는 읽는 순서의 오류는 더욱 심하게 발생할 것입니다.

이러한 현상을 방지하려면 스테이지 위의 모든 인스턴스에 tabIndex 속성을 사용하여 알맞은 읽는 순서를 설정합니다. 포커스를 받을 수 없는 객체라 할지라도 접근할 수 있는 모든 객체에는 tabIndex 속성을 사용하여 순서를 정합니다. 예를 들면, 포커스를 받을 수 없는 동적 텍스트 필드에도 tabIndex 를 사용하여 스크린 리더기와 같은 보조 도구가 접근 할 수 있도록 해야 합니다.

실제로 탭 순서와 읽는 순서는 다릅니다. 스크린 리더기를 사용할 때, 탭 순서는 Tab 키를 눌렀을 때 포커스가 이동하는 순서이고, 읽는 순서는 화살표 키를 눌렀을 때 이동하는 순서입니다. 하지만, Flash 에서는 읽는 순서를 정의하는 속성이 없기 때문에 tabIndex 라는 속성을 사용하여 탭 순서와 읽는 순서를 함께 설정해야 합니다.

1.16.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용Flash 저작도구 안에 있는 액세스 가능성 패널의 탭 인덱스 항목을 사용하여 스테이지에 배치된 객체에 읽는 순서를 지정할 수 있습니다.1. 예제 파일 : 10_adobe_home_tabIndex.fla2. 읽는 순서 상에 둘 객체를 선택하고 액세스 가능성 패널의 탭 인덱스 필드에 적당한 순서를 지정합니다.

읽는 순서를 반영하는 숫자는 양의 정수이며 65535까지 사용할 수 있습니다. tabIndex 의 숫자가 작은 값부터 큰 값의 순서대로 순차적으로 읽습니다. 만약, 둘 또는 그 이상의 객체가 동일한 tabIndex 값을 사용하고 있다면, Flash Player 는 동일한 tabIndex 를 가지고 있는 객체 내에서 스테이지에 먼저 놓여진 순서에 따라 읽습니다.

tabIndex 는 8, 9, 10 과 같이 반드시 1씩 증가 하는 형태의 순차적인 순서일 필요가 없습니다. 1, 2, 3, 100, 120 의 형태로 읽는 순서를 정해도 Flash Player 는 작은 수에서 큰 수의 순서대로 읽습니다.

109 / 307

6. 참고 자료

그림 38 제품 버튼에 2 라는 tabIndex 값 설정

3. 2번의 과정을 마치고 난 후, 탭 인덱스의 배정을 시각화 하려면 플래시 저작도구의 메뉴 중에서 “보기 > 탭 순서 표시”를

선택합니다. 이 메뉴를 선택하면 탭 인덱스를 배정한 객체의 우측 상단에 배정된 탭 인덱스 숫자를 볼 수 있습니다.

그림 39 탭 순서 표시를 통해 배정한 탭 인덱스를 시각적으로 확인

4. 무비클립 안의 객체에 tabIndex 설정하기

중첩된 표시 객체 트리 구조, 즉 무비 클립이나 Sprite 와 같은 DisplayContainer 내부에서는 독립적인 tabIndex 구조를 갖지 않습니다. 그렇기 때문에, 무비 클립과 같은 컨테이너의 안에 위치하는 객체에 대해서 tabIndex 를 지정할 때에도 어플리케이션 상에서 전역적으로 순차적인 구조로 tabIndex 를 배정해야 합니다.

110 / 307

6. 참고 자료

그림 40 무비 클립 안에 있는 객체에 대한 tabIndex 는 어플리케이션의 전역적인 tabIndex 의 순서를 따름

5. 텍스트에 tabIndex 설정하기

정적 텍스트(Static Text)는 tabIndex 속성을 설정할 수 없습니다. 그렇기 때문에, 읽는 순서 내에서 정적 텍스트에 tabIndex 속성을 배정하려면, 정적 텍스트를 동적 텍스트(Dynamic Text)로 비헤비어를 변경한 하거나 무비 클립과 같은 심볼 형태로 변환을 한 후, 탭 인덱스를 설정해야 합니다.

그림 41 정적 텍스트를 동적 텍스트로 속성을 변경하여 탭 인덱스 설정

1.16.3 ActionScript 3.0 을 사용하여 tabIndex 속성 설정하기ActionScript 의 InteractiveObject 클래스를 상속하는 모든 클래스(DisplayObjectContainer, TextField, SimpleButton)에는 tabIndex 속성이 있습니다. ActionScript 를 사용하여 객체의 tabIndex 를 설정하여 읽는 순서를 제어할 수 있습니다.


메인 프레임의 1번 프레임과 productListContainer 라는 인스턴스 이름을 가지고 있는 무비 클립의 내부 1번 프레임 두 곳에 스크립트를 작성합니다.

111 / 307

6. 참고 자료

tabIndex 속성은 name, description, silent 와 같이 AccessibilityProperties 클래스의 속성이 아닌, InteractiveObject 클래스의 속성임을 주의하시기 바랍니다.

1. 예제 파일 : 10_adobe_home_tabIndex_as.fla2. 메인 프레임의 1번 프레임의 ActionScript 코드


// 어도비 로고에 대한 접근성 정보 설정var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = "어도비 한국 홈";accProp.description = "어도비 한국 웹사이트 첫화면으로 이동합니다.";

adobeLogo.buttonMode = true;adobeLogo.tabIndex = 0; // 어도비 로고에 대한 탭 인덱스 설정adobeLogo.accessibilityProperties = accProp;

// 버튼의 배열var navigationButtons:Array = [productButton, solutionButton, learnButton, helpButton, downloadButton, companyButton, storeButton];// 버튼에 사용할 접근성 정보 중 name 값에 해당하는 배열var accPropNames:Array = ["제품", "솔루션", "학습", "도움말", "다운로드", "회사", "스토어"];// 버튼에 사용할 접근성 정보 중 description 값에 해당하는 배열var accPropDescriptions:Array = [

"어도비 시스템즈의 다양한 제품들을 확인할 수 있습니다.","어도비 시스템즈에서 제공하는 다양한 솔루션을 체험해 보세요.","어도비의 다양한 제품의 사용법에 대해 배우실 수 있습니다.","어도비 제품들의 사용법을 익힐 수 있는 도움말을 제공합니다.","다양한 어도비 제품을 다운로드 받으실 수 있습니다.","어도비 시스템즈에 대해 알아보십시오.","어도비 제품을 지금 구입하세요."];

assignAccProperties();

// 버튼에 name과 description 속성 할당하는 함수function assignAccProperties():void{var loop:int = navigationButtons.length;


var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accPropNames[i];accProp.description = accPropDescriptions[i];

(navigationButtons[i] as SimpleButton).accessibilityProperties = accProp;(navigationButtons[i] as SimpleButton).tabIndex = i + 1;

}}

// CS5.5 배경 이미지에 대한 접근성 정보 객체 생성 및 적용var csBackgroundImageAccProp:AccessibilityProperties = new AccessibilityProperties();

112 / 307

6. 참고 자료

csBackgroundImageAccProp.name = "CS5.5 배경 이미지";

// 스크린 리더기와 같은 보조 도구에 노출 제외csBackgroundImageAccProp.silent = true;

csBackgroundImage.accessibilityProperties = csBackgroundImageAccProp;

assignAccProperties 함수에서 for 문 안의 (navigationButtons[i] as SimpleButton).tabIndex = i + 1; 코드는 for 문을 순환하면서 인자로 들어오는 i 의 숫자 값을 이용하여 상단의 메뉴 버튼들에 대한 tabIndex 값을 설정하는

코드입니다. 0번에 해당하는 tabIndex 값을 Adobe 로고 버튼에 배정하였기 때문에 tabIndex 가 중복되지 않도록 1 을

추가로 더합니다.3. productListContainer 무비 클립 안의 ActionScript 코드 작성하기

a. “Android, BlackBerry 및 iOS 에 배포할 시선을 사로잡는 애플리케이션을 개발할 수 있으며 매력적인 HTML5 콘텐츠를 디자인할 수 있습니다. 디자인의 전달 범위를 모든 사용자로 확대할 수 있습니다.” 이라는 텍스트도 읽는 순서에 포함시키려면 텍스트 필드를 정적 텍스트가 아닌 동적 텍스트로 변경하고 인스턴스 네임(이 예제에서는 descriptionTextField)를 할당합니다.

b. 메인 프레임의 tabIndex 에 이어 순차적인 tabIndex 구조를 갖기 위해서 baseTabIndex 라는 값을 정의하여 tabIndex를 정할 때 이 값을 사용합니다.

import flash.accessibility.AccessibilityProperties;import flash.display.DisplayObject;import flash.display.InteractiveObject;

var uiList:Array = [csTitleButton, descriptionTextField, dpButton, ppButton, wpButton, dsButton, mcButton, buyButton, tryButton];var accNames:Array = ["Creative Suite 5.5 현재 제공 중",

"Android, BlackBerry 및 iOS에 배포할 시선을 사로잡는 애플리케이션을 개발할 수 있으며 매력적인 HTML5 콘텐츠를 디자인할 수 있습니다. 디자인의 전달 범위를 모든 사용자로 확대할 수 있습니다.",


var baseTabIndex:int = 10;


// uiList 객체에 접근성 정보 생성하는 함수function generateAccName(index:int):void{var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accNames[index];accProp.forceSimple = true;

113 / 307

6. 참고 자료

(uiList[i] as DisplayObject).accessibilityProperties = accProp;(uiList[i] as InteractiveObject).tabIndex = index + baseTabIndex;}

(uiList[i] as InteractiveObject).tabIndex = index + baseTabIndex; 부분에서 baseTabIndex 를

활용하여 전역적으로 tabIndex 가 충돌이 되지 않도록 적당한 tabIndex 값을 지정합니다.


∘ 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.• 3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.

∘ 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.

1.17 키보드의 SPACE 키를 사용하여 클릭 이벤트 트리거1.17.1 설명

플래시 저작도구에서는 그래픽, 버튼, 무비 클립의 세 가지의 심볼 타입을 제공합니다. 이 중에서 버튼 심볼을 flash.display.SimpleButton 클래스에 해당하며, 무비 클립은 flash.display.MovieClip 클래스에 해당합니다. SimpleButton 클래스는 기본적으로 포커스를 받았을 때, SPACE 키를 누르면 클릭에 해당하는 이벤트가 자동으로 트리거 됩니다. 그러나 MovieClip 또는 Sprite 클래스는 buttonMode 속성을 true 설정 했을 경우에만 포커스를 받았을 때, SPACE 키를 누르면 클릭 이벤트를 트리거 합니다.

실제 플래시 저작도구를 사용하여 사용자 인터페이스(User Interface)를 만들 때, SimpleButton 보다는 무비 클립 심볼, MovieClip 클래스 또는 Sprite 클래스를 더 많이 사용하는 경우가 많습니다(물론 SimpleButton 클래스를 상속받아서 제작할 수도 있습니다). 하지만 항상 buttonMode 를 true 로 설정할 수 있는 것은 아닙니다. 그러므로 객체가 포커스를 받았을 경우, SPACE 키를 눌렀을 때, 마우스를 클릭한 것과 동일한 기능을 할 수 있도록 해야 합니다.

이 장의 목표는, 포커스를 받은 객체(버튼)에서 SPACE 키를 눌렀을 때 마우스로 누른 것과 동일한 기능을 할 수 있도록 하는 방법을 알아봅니다.

1.17.2 ActionScript 를 사용하여 SPACE 키로 클릭 이벤트를 트리거 하는 버튼 제작하기이 예제는 “4.7.4 사용자 포커스 제작하기 ”에서 사용한 예제에 키보드 이벤트를 처리하는 기능을 추가합니다. ButtonBase 클래스에서 이 클래스로 생성한 인스턴스가 키보드 이벤트를 받았을 때, SPACE 키가 눌렸을 때, 마우스로 버튼을 누른 것과 동일한 행위를 하도록 합니다.

114 / 307

6. 참고 자료

그림 42 키보드의 SPACE 키를 통해 버튼이 눌렸을 때의 기능을 구현

1. 예제 : SpaceKeyEnableButton.fla 와 관련 패키지(액션스크립트 파일들)2. 클래스 설명

새로 추가되거나 기능의 변경이 생긴 클래스 파일만 설명합니다. 나머지 클래스 파일에 대해서는 “4.7.4 사용자 포커스 제작하기”의 설명을 참고하세요.a. SpaceKeyEnableButton.as

애플리케이션에서의 메인 클래스입니다. 이 클래스는 버튼과 로그용 텍스트 필드를 생성하고 화면에 표시하는 역할을 합니다.

b. buttons.ButtonBase.as기존의 클래스에서 일부 기능이 변경되었습니다. 키보드 이벤트를 수신하고 버튼의 각 상태(Up, Down, Over)에 대한 코드를 별도의 메소드로 분리가 되었으며, 버튼이 눌려지거나 SPACE 키가 눌렸을 때 LogEvent 를 Dispatch 합니다.

c. events.LogEvent.as.로그용 메시지를 전달하는 이벤트 클래스입니다.

3. 소스 코드

새로 추가되거나 기능의 변경이 생긴 클래스 파일에 해당하는 소스 코드입니다. 나머지 클래스 파일에 대해서는 “4.7.4 사용자 포커스 제작하기”의 소스 코드를 참고하세요.a. SpaceKeyEnableButton.as

package{import buttons.ButtonBase;import events.LogEvent;

import flash.display.Sprite;import flash.events.Event;import flash.text.TextField;

public class SpaceKeyEnableButton extends Sprite{

115 / 307

6. 참고 자료

// 각각의 버튼 레이블 정보를 담은 배열private var buttonLabels:Array = [

"제품","솔루션","학습","도움말","다운로드","회사","스토어"];

// 로그를 출력하는 텍스트 필드private var logField:TextField;

/** * 생성자 */public function SpaceKeyEnableButton(){

createButtons();createLogField();

}

/** * @private * 버튼들을 만들고 배치하는 메소드 */private function createButtons():void{

var startX:Number = 10;var startY:Number = 10;for (var i:int = 0; i < buttonLabels.length; i++){

var button:ButtonBase = new ButtonBase(buttonLabels[i]);button.x = startX;button.y = startY;startX += button.width + 2;

// 버튼으로부터 로그를 받을 수 있도록 이벤트 수신을 등록button.addEventListener(LogEvent.LOG, buttonLogHandler);

addChild(button);}

}

/** * @private * 로그용 텍스트 필드를 생성하는 메소드 */private function createLogField():void{

logField = new TextField();logField.x = 10;logField.y = 50;

116 / 307

6. 참고 자료

logField.width = 400;logField.height = 300;logField.background = true;logField.backgroundColor = 0xFFFFFF;logField.border = true;

addChild(logField);}

/** * @private * 로그가 출력될 때 실행되는 이벤트 핸들러 */protected function buttonLogHandler(event:LogEvent):void{

logField.appendText(event.message + "\n");}

}}

b. buttons.ButtonBase.askeyDownHandler 와 keyUpHandler 두 개의 이벤트 핸들러는 키보드의 키가 눌려지거나 또는 눌려졌다가 키를 뗐을 때에 대한 이벤트를 처리합니다. 이 이벤트 핸들러 내부에서 눌려진 키가 SPACE 키인지를 확인하고, SPACE 키일 경우 마우스로 버튼을 눌렀을 때 처리하는 메소드인 buttonPressed() 메소드를 호출하여 동일한 기능을 실행하도록 합니다.

package buttons{import buttons.skins.*;

import core.FocusableSprite;

import events.LogEvent;

import flash.display.Sprite;import flash.events.FocusEvent;import flash.events.KeyboardEvent;import flash.events.MouseEvent;import flash.geom.Rectangle;import flash.text.TextField;import flash.text.TextFieldAutoSize;import flash.text.TextFormat;import flash.ui.Keyboard;

/** * FocusableSprite 클래스를 상속한 레이블이 있는 간단한 버튼 * 클래스입니다. */public class ButtonBase extends FocusableSprite{

// 버튼의 up, over, down 의 상태를 정의하는 그래픽 객체들private var upState:Sprite;private var overState:Sprite;private var downState:Sprite;

private var labelField:TextField;

117 / 307

6. 참고 자료

private var _label:String = "label";

public function get label():String{

return _label;}

public function set label(value:String):void{

_label = value;labelField.text = value;

}

/** * 생성자로 버튼의 상태별 그래픽들과 레이블로 사용할 텍스트 필드를 생성합니다. * @param label */public function ButtonBase(label:String = "label"){

super();this._label = label;

this.buttonMode = true;this.mouseChildren = false;

createButtonStateGraphic();createLabelField();

// 버튼의 기본 비헤이비어에 대한 이벤트 수신을 등록합니다.addEventListener(MouseEvent.ROLL_OVER, overHandler);addEventListener(MouseEvent.MOUSE_UP, overHandler);addEventListener(MouseEvent.ROLL_OUT, outHandler);addEventListener(MouseEvent.MOUSE_OUT, outHandler);addEventListener(MouseEvent.MOUSE_DOWN, downHandler);addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

}


var width:Number = Math.max(30, value)upState.width = width;overState.width = width;downState.width = width;

// 레이블의 위치를 버튼의 가운데로labelField.x = Math.floor((width - labelField.width)/ 2);labelField.y = Math.floor((height - labelField.height) / 2);

}

/** * @private * 버튼의 각각의 상태에 대한 그래픽 객체를 생성합니다. */protected function createButtonStateGraphic():void

118 / 307

6. 참고 자료

{upState = new ButtonUpState();overState = new ButtonOverState();downState = new ButtonDownState();

var skinWidth:int = upState.width;var skinHeight:int = upState.height;var scale9Grid:Rectangle = new Rectangle(5, 5, skinWidth - 10, skinHeight

- 10);

upState.scale9Grid = scale9Grid;overState.scale9Grid = scale9Grid;downState.scale9Grid = scale9Grid;

addChildAt(upState, 0);}

/** * @private * 버튼 레이블이 되는 텍스트 필드를 생성합니다. */protected function createLabelField():void{

var textFormat:TextFormat = new TextFormat();textFormat.font = "NanumGothic";textFormat.size = 11;textFormat.bold = true;

labelField = new TextField();labelField.defaultTextFormat = textFormat;labelField.autoSize = TextFieldAutoSize.CENTER;labelField.selectable = false;labelField.textColor = 0xFFFFFF;labelField.text = label;

addChild(labelField);this.width = labelField.width + 10;

}

/** * @private * 포커스를 받았을 때 실행되는 이벤트 핸들러로 * 포커스를 받은 버튼에 포커스 상자를 그리고 버튼의 상태를 오버 상태로 바꿉니다. */override protected function focusInHandler(event:FocusEvent):void{

super.focusInHandler(event);overHandler();

}

/** * @private * 포커스를 잃었을 때 실행되는 이벤트 핸들러로 * 포커스 상자를 제거하고 버튼을 up상태로 되돌려 놓습니다. */override protected function focusOutHandler(event:FocusEvent):void

119 / 307

6. 참고 자료

{super.focusOutHandler(event);buttonReleased();

}

protected function downHandler(event:MouseEvent=null):void{

buttonPressed();}

protected function outHandler(event:MouseEvent=null):void{

buttonReleased();}

protected function overHandler(event:MouseEvent=null):void{

buttonOvered();}

/** * @private * 버튼에 포커스가 위치한 상태에서 키가 눌렸을 때 실행되는 이벤트 핸들러 */protected function keyDownHandler(event:KeyboardEvent):void{

if (event.keyCode == Keyboard.SPACE)buttonPressed();

}

/** * @private * 버튼에 포커스가 위치한 상태에서 키를 눌렀다가 놓았을 때 실행되는 * 이벤트 핸들러 */protected function keyUpHandler(event:KeyboardEvent):void{

if (event.keyCode == Keyboard.SPACE)buttonOvered();

}

/** * @private * 버튼의 기본 상태를 표시하는 메소드 */private function buttonReleased():void{

addChildAt(upState, 0);



}

120 / 307

6. 참고 자료

/** * @private * 버튼이 눌렸을 때의 상태를 표시하는 메소드 */private function buttonPressed():void{



addChildAt(downState, 0);

var logMessage:String = labelField.text + " 버튼이 눌려졌습니다";dispatchEvent(new LogEvent(LogEvent.LOG, logMessage));

}

/** * @private * 버튼의 오버 상태를 표시하는 메소드 */private function buttonOvered():void{


addChildAt(overState, 0);


}}}

c. events.LogEvent.as

package events{import flash.events.Event;

public class LogEvent extends Event{

// 이벤트 타입public static const LOG:String = "log";

// 로그 메세지public var message:String = "";

/** * Constructor */public function LogEvent(type:String,

message:String, bubbles:Boolean=false, cancelable:Boolean=false)

121 / 307

6. 참고 자료

{super(type, bubbles, cancelable);this.message = message;

}}}

1.17.3 플래시 저작도구의 fl 패키지와 플렉스의 mx, spark 패키지의 컴포넌트플래시 저작도구의 컴포넌트 패널 안에 있는 UI 컴포넌트들과 Flex 에서 제공하는 UI 컴포넌트들은 내부적으로 사용자의 키보드 입력에 의한 컴포넌트의 조작이나 제어 기능을 제공하고 있습니다. 그러나 플래시 개발자들이 fl.core.UIComponent 나 mx.core.UIComponent 클래스를 상속하여 새로운 UI 컴포넌트를 제작을 할 경우에는 키보드로도 조작이 가능할 수 있도록 기능을 구현해야 합니다.


∘ 2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.∘ 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

1.18 키보드 단축키의 제공1.18.1 설명

스크린 리더기를 사용하는 사람들은 일반적으로 화살표키나 Tab 키를 사용하여 콘텐츠의 내용을 읽습니다. 그렇게 때문에 복잡하고 많은 UI 들이 있는 어플리케이션이나 콘텐츠의 경우, 스크린 리더기를 사용하는 사람들은 콘텐츠를 탐색하기 위해 여러 번 화살표키나 Tab 키를 눌러서 이동해야 하는 불편함이 있을 수 있습니다.

그렇기 때문에 자주 사용하는 기능이나 객체에는 그에 해당하는 단축키를 제공하고 사용할 수 있는 단축키를 사용자에게 알려주는 것이 좋습니다.

뿐만 아니라, 단축키는 장애인 뿐만 아니라 비장애인에게도 유용한 기능으로 사용될 수 있습니다.

이 장의 목표는 특정 기능을 실행하는 단축키를 제공을 함으로써 실행하고자 하는 기능에 접근할 수 있도록 하는 데 있습니다.

일반적으로 플래시 어플리케이션은 브라우저 안에서 실행하는 경우가 많습니다. 뿐만 아니라 시각 장애인들이 사용하는 스크린 리더기에는 수많은 단축키들이 미리 할당이 되어 있습니다. 그렇기 때문에 단축키를 할당할 경우에 브라우저와 스크린 리더기에 이미 할당되어 있는 단축키와 충돌이 일어나지 않도록 신중하게 선택을 해야 합니다.

주로 CTRL 키와 ALT 키를 함께 조합을 하여 사용하도록 합니다.

1.18.2 Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용Adobe Flash Professional 의 Accessibility 패널(액세스 가능성 패널)을 사용하여 객체에 단축키를 지정할 수 있습니다. Accessibility 패널(액세스 가능성 패널)의 Shortcut(단축키) 필드에 단축키로 사용할 키를 설정하면, 스크린 리더기는 포커스가 위치한 객체의 이름을 읽은 후, 단축키를 읽습니다. 이 예제에서는 단축키에 CTRL 키와 ALT 키를 함께 조합을 하여 단축키를 설정합니다.

Accessibility 패널(액세스 가능성 패널)에서 단축키를 할당한다고 해서 실제로 단축키가 실행되는 것은 아닙니다. 키보드 이벤트를 사용하여 액션스크립트로 실제 단축키가 눌려졌을 때 실행되어야 할 기능을 구현해주어야 합니다.

1. 예제 파일 : 12_adobe_home_shortcut.fla2. 로고 이미지 및 버튼, 로그 텍스트 필드에 대하여 각각 인스턴스 네임을 설정합니다.

a. Adobe 로고 이미지 : adobeHome

122 / 307

6. 참고 자료

b. 제품 버튼 : productButtonc. 솔루션 버튼 : solutionButtond. 학습 버튼 : learnButtone. 도움말 버튼 : helpButtonf. 다운로드 버튼 : downloadButtong. 회사 버튼 : companyButtonh. 스토어 버튼 : marketButtoni. 로그 텍스트 필드 : logText

3. 로그 텍스트 필드를 제외한 각각의 요소에 대해 Accessibility 패널(액세스 가능성 패널)에서 “객체를 액세스 가능하게

만들기” 체크 박스를 체크하고 이름(Name) 필드와 단축키(Shortcut) 필드에 다음의 내용을 입력합니다.a. 이름과 단축키 필드

인스턴스 네임 이름 필드 단축키 필드 키 코드

adobeHome 어도비 한국 홈 CTRL + ALT + A 65(A)

productButton 제품 CTRL + ALT + P 80(P)

solutionButton 솔루션 CTRL + ALT + S 83(S)

learnButton 학습 CTRL + ALT + L 76(L)

helpButton 도움말 CTRL + ALT + H 72(H)

downloadButton 다운로드 CTRL + ALT + D 68(D)

companyButton 회사 CTRL + ALT + C 67(C)

marketButton 스토어 CTRL + ALT + M 77(M)

그림 43 Accessibility 패널(액세스 가능성 패널)을 통해 단축키 설정

4. 타임라인에 키 프레임을 생성하고 키 프레임에 다음의 액션스크립트를 작성합니다. 이 예제에서는 이해의 편의상 타임라인

상의 키 프레임에 ActionScript 코드를 작성하였습니다. 물론 Class 를 작성하여 적용하는 방법도 가능합니다.

123 / 307

6. 참고 자료

import flash.events.MouseEvent;import flash.events.KeyboardEvent;

// 각각의 버튼에 마우스 이벤트 리스너 추가adobeHome.addEventListener(MouseEvent.CLICK, adobeHomeClickHandler);productButton.addEventListener(MouseEvent.CLICK, productButtonClickHandler);solutionButton.addEventListener(MouseEvent.CLICK, solutionButtonClickHandler);learnButton.addEventListener(MouseEvent.CLICK, learnButtonClickHandler);helpButton.addEventListener(MouseEvent.CLICK, helpButtonClickHandler);downloadButton.addEventListener(MouseEvent.CLICK, downloadButtonClickHandler);companyButton.addEventListener(MouseEvent.CLICK, companyButtonClickHandler);marketButton.addEventListener(MouseEvent.CLICK, marketButtonClickHandler);

// 전역적인 키 이벤트 리스너 추가this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

/** * @private * 키가 눌렸을 때 실행되는 이벤트 핸들러 */function keyDownHandler(event:KeyboardEvent=null):void{if (event.altKey && event.ctrlKey && event.keyCode == 65) // CTRL + ALT + A

adobeHomeClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 80) // CTRL + ALT + P

productButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 83) // CTRL + ALT + S

solutionButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 76) // CTRL + ALT + L

learnButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 72) // CTRL + ALT + H

helpButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 68) // CTRL + ALT + D

downloadButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 67) // CTRL + ALT + C

companyButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 77) // CTRL + ALT + M

marketButtonClickHandler();}

/** * @private * 로고 클릭 시 실행되는 이벤트 핸들러 */function adobeHomeClickHandler(event:MouseEvent=null):void{logText.text += "어도비 로고 클릭\n";}

/** * @private * 제품 버튼 클릭 시 실행되는 이벤트 핸들러 */function productButtonClickHandler(event:MouseEvent=null):void{

124 / 307

6. 참고 자료

logText.text += "제품 버튼 클릭\n";}

/** * @private * 솔루션 버튼 클릭 시 실행되는 이벤트 핸들러 */function solutionButtonClickHandler(event:MouseEvent=null):void{logText.text += "솔루션 버튼 클릭\n";}

/** * @private * 학습 버튼 클릭 시 실행되는 이벤트 핸들러 */function learnButtonClickHandler(event:MouseEvent=null):void{logText.text += "학습 버튼 클릭\n";}

/** * @private * 도움말 버튼 클릭 시 실행되는 이벤트 핸들러 */function helpButtonClickHandler(event:MouseEvent=null):void{logText.text += "도움말 버튼 클릭\n";}

/** * @private * 다운로드 버튼 클릭 시 실행되는 이벤트 핸들러 */function downloadButtonClickHandler(event:MouseEvent=null):void{logText.text += "다운로드 버튼 클릭\n";}

/** * @private * 회사 버튼 클릭 시 실행되는 이벤트 핸들러 */function companyButtonClickHandler(event:MouseEvent=null):void{logText.text += "회사 버튼 클릭\n";}

/** * @private * 스토어 버튼 클릭 시 실행되는 이벤트 핸들러 */function marketButtonClickHandler(event:MouseEvent=null):void{

125 / 307

6. 참고 자료

logText.text += "스토어 버튼 클릭\n";}

5. 스크린 리더기는 각각의 항목에 대하여 다음과 같이 읽습니다.a. Adobe 로고 이미지 : 그래픽 어도비 한국 홈 CTRL + ALT + Ab. 제품 버튼 : 제품 CTRL + ALT + P 버튼

c. 솔루션 버튼 : 솔루션 CTRL + ALT + S 버튼

d. 학습 버튼 : 학습 CTRL + ALT + L 버튼

e. 도움말 버튼 : 도움말 CTRL + ALT + H 버튼

f. 다운로드 버튼 : 다운로드 CTRL + ALT + D 버튼

g. 회사 버튼 : 회사 CTRL + ALT + C 버튼

h. 스토어 버튼 : 스토어 CTRL + ALT + M 버튼

이 예제에서는 키보드 단축키의 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

1.18.3 ActionScript 3.0 을 사용하여 shortcut 속성 설정하기ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스의 shortcut 속성을 사용하여 스크린 리더기와 같은 보조 도구가 해당 객체의 단축키를 판독할 수 있도록 접근성 정보를 제공합니다.

이 예제에서는 이해의 편의상 타임라인 상의 키 프레임에 ActionScript 코드를 작성하였습니다. 물론 Class 를 작성하여 적용하는 방법도 가능합니다.1. 예제 파일 : 12_adobe_home_shortcut_as.fla2. 로고 이미지 및 버튼, 로그 텍스트 필드에 대하여 각각 인스턴스 네임을 설정합니다.

a. Adobe 로고 이미지 : adobeHomeb. 제품 버튼 : productButtonc. 솔루션 버튼 : solutionButtond. 학습 버튼 : learnButtone. 도움말 버튼 : helpButtonf. 다운로드 버튼 : downloadButtong. 회사 버튼 : companyButtonh. 스토어 버튼 : marketButtoni. 로그 텍스트 필드 : logText

3. 로그 텍스트 필드를 제외한 각각의 요소에 대해 접근성 정보인 이름과 단축키를 할당할 것입니다..a. 이름과 단축키 필드

인스턴스 네임 이름 단축키 키 코드

adobeHome 어도비 한국 홈 CTRL + ALT + A 65(A)

productButton 제품 CTRL + ALT + P 80(P)

solutionButton 솔루션 CTRL + ALT + S 83(S)

learnButton 학습 CTRL + ALT + L 76(L)

helpButton 도움말 CTRL + ALT + H 72(H)

downloadButton 다운로드 CTRL + ALT + D 68(D)

companyButton 회사 CTRL + ALT + C 67(C)

126 / 307

6. 참고 자료

marketButton 스토어 CTRL + ALT + M 77(M)

4. 타임라인에 키 프레임을 생성하고 키 프레임에 다음의 액션스크립트를 작성합니다.

import flash.events.MouseEvent;import flash.events.KeyboardEvent;import flash.accessibility.AccessibilityProperties;import flash.display.InteractiveObject;

var uiList:Array = [adobeHome, productButton, solutionButton, learnButton, helpButton, downloadButton, companyButton, marketButton];

var accNames:Array = ["어도비 한국 홈", "제품", "솔루션", "학습", "도움말", "다운로드", "회사", "스토어"];

var accShortcut:Array = ["CTRL+ALT+A","CTRL+ALT+P","CTRL+ALT+S","CTRL+ALT+L","CTRL+ALT+H","CTRL+ALT+D","CTRL+ALT+C","CTRL+ALT+M"];

setAccessibilitProperties();

// UI 객체에 접근성 정보를 제공하는 메소드function setAccessibilitProperties():void{for (var i:int = 0; i < uiList.length; i++){

var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = accNames[i];accProp.shortcut = accShortcut[i];

(uiList[i] as InteractiveObject).accessibilityProperties = accProp;}}

// 각각의 버튼에 마우스 이벤트 리스너 추가adobeHome.addEventListener(MouseEvent.CLICK, adobeHomeClickHandler);productButton.addEventListener(MouseEvent.CLICK, productButtonClickHandler);solutionButton.addEventListener(MouseEvent.CLICK, solutionButtonClickHandler);learnButton.addEventListener(MouseEvent.CLICK, learnButtonClickHandler);

127 / 307

6. 참고 자료

helpButton.addEventListener(MouseEvent.CLICK, helpButtonClickHandler);downloadButton.addEventListener(MouseEvent.CLICK, downloadButtonClickHandler);companyButton.addEventListener(MouseEvent.CLICK, companyButtonClickHandler);marketButton.addEventListener(MouseEvent.CLICK, marketButtonClickHandler);

// 전역적인 키 이벤트 리스너 추가this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

/** * @private * 키가 눌렸을 때 실행되는 이벤트 핸들러 */function keyDownHandler(event:KeyboardEvent=null):void{if (event.altKey && event.ctrlKey && event.keyCode == 65) // CTRL + ALT + A

adobeHomeClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 80) // CTRL + ALT + P

productButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 83) // CTRL + ALT + S

solutionButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 76) // CTRL + ALT + L

learnButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 72) // CTRL + ALT + H

helpButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 68) // CTRL + ALT + D

downloadButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 67) // CTRL + ALT + C

companyButtonClickHandler();else if (event.altKey && event.ctrlKey && event.keyCode == 77) // CTRL + ALT + M

marketButtonClickHandler();}

/** * @private * 로고 클릭 시 실행되는 이벤트 핸들러 */function adobeHomeClickHandler(event:MouseEvent=null):void{logText.text += "어도비 로고 클릭\n";}

/** * @private * 제품 버튼 클릭 시 실행되는 이벤트 핸들러 */function productButtonClickHandler(event:MouseEvent=null):void{logText.text += "제품 버튼 클릭\n";}

/** * @private * 솔루션 버튼 클릭 시 실행되는 이벤트 핸들러 */function solutionButtonClickHandler(event:MouseEvent=null):void

128 / 307

6. 참고 자료

{logText.text += "솔루션 버튼 클릭\n";}

/** * @private * 학습 버튼 클릭 시 실행되는 이벤트 핸들러 */function learnButtonClickHandler(event:MouseEvent=null):void{logText.text += "학습 버튼 클릭\n";}

/** * @private * 도움말 버튼 클릭 시 실행되는 이벤트 핸들러 */function helpButtonClickHandler(event:MouseEvent=null):void{logText.text += "도움말 버튼 클릭\n";}

/** * @private * 다운로드 버튼 클릭 시 실행되는 이벤트 핸들러 */function downloadButtonClickHandler(event:MouseEvent=null):void{logText.text += "다운로드 버튼 클릭\n";}

/** * @private * 회사 버튼 클릭 시 실행되는 이벤트 핸들러 */function companyButtonClickHandler(event:MouseEvent=null):void{logText.text += "회사 버튼 클릭\n";}

/** * @private * 스토어 버튼 클릭 시 실행되는 이벤트 핸들러 */function marketButtonClickHandler(event:MouseEvent=null):void{logText.text += "스토어 버튼 클릭\n";}

5. setAccessibilityProperties() 함수 안에서 AccessibilityProperties 인스턴스의 shortcut 속성에 단축키에 해당하는

문자열을 설정하여 화면의 객체에 단축키 정보를 설정합니다.6. 스크린 리더기는 각각의 항목에 대하여 다음과 같이 읽습니다.

a. Adobe 로고 이미지 : 그래픽 어도비 한국 홈 CTRL + ALT + Ab. 제품 버튼 : 제품 CTRL + ALT + P 버튼

129 / 307

6. 참고 자료

c. 솔루션 버튼 : 솔루션 CTRL + ALT + S 버튼

d. 학습 버튼 : 학습 CTRL + ALT + L 버튼

e. 도움말 버튼 : 도움말 CTRL + ALT + H 버튼

f. 다운로드 버튼 : 다운로드 CTRL + ALT + D 버튼

g. 회사 버튼 : 회사 CTRL + ALT + C 버튼

h. 스토어 버튼 : 스토어 CTRL + ALT + M 버튼


1.18.4 Flex 에서 단축키(shortcut) 속성 설정하기Flex 에서는 “4.10.3 ActionScript 3.0 을 사용하여 shortcut 속성 설정하기”에서 사용한 것과 동일하게 AccessibilityProperties.shortcut 속성을 사용하여 단축키 정보를 제공할 수 있을 뿐만 아니라 UIComponent 클래스의 accessibilityShortcut 속성을 사용하여 더 간단하게 단축키 정보를 제공할 수 있습니다.1. 예제 파일 : AccessibilityFlex Project 의 AccessibilityShortcut.mxml

그림 44 네이버, 다음 레이블이 있는 버튼에 각각 CTRL+ALT+N, CTRL+ALT+D 단축키를 설정하고 실행하면 각 웹사이트로 이동

2. 이 예제에서는 네이버와 다음 두 개의 레이블이 있는 버튼을 생성하고 accessibilityShortcut 속성을 사용하여 단축키를

설정합니다. 각 버튼을 클릭하거나 설정한 단축키를 누르면 네이버와 다음의 웹 사이트를 새로운 웹 브라우저로 띄웁니다.3. 소스 코드


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="creationCompleteHandler(event)" minWidth="955" minHeight="600">

<s:layout><s:HorizontalLayout horizontalAlign="center"

paddingTop="20"/></s:layout>


import flash.net.navigateToURL;

import mx.events.FlexEvent;

/** * @private * 네이버 페이지를 여는 메소드 */private function browseNaver():void{

var request:URLRequest = new URLRequest("http://www.naver.com");

130 / 307

6. 참고 자료

navigateToURL(request);}

/** * @private * 다음 페이지를 여는 메소드 */private function browseDaum():void{

var request:URLRequest = new URLRequest("http://www.daum.net");navigateToURL(request);

}

/** * @private * 네이버 버튼을 클릭했을 때 실행되는 이벤트 핸들러 */protected function naverButtonClickHandler(event:MouseEvent):void{

browseNaver();}

/** * @private * 다음 버튼을 클릭했을 때 실행되는 이벤트 핸들러 */protected function daumButtonClickHandler(event:MouseEvent):void{

browseDaum();}

/** * @private * 어플리케이션이 완료되면 전역적인 키 이벤트 등록 */protected function creationCompleteHandler(event:FlexEvent):void{

this.stage.addEventListener(KeyboardEvent.KEY_DOWN, applicationKeyDownHandler);

}

/** * @private * 어플리케이션 단에서 키가 눌려지면 실행되는 이벤트 핸들러 */protected function applicationKeyDownHandler(event:KeyboardEvent):void{

// CTRL + ALT + Nif (event.keyCode == 78 && event.ctrlKey && event.altKey)

browseNaver();

// CTRL + ALT + Delse if (event.keyCode == 68 && event.ctrlKey && event.altKey)

browseDaum();}

131 / 307

6. 참고 자료

]]></fx:Script>

<s:Button id="naverButton" label="네이버" accessibilityShortcut="CTRL+ALT+N" click="naverButtonClickHandler(event)"/>

<s:Button id="daumButton" label="다음" accessibilityShortcut="CTRL+ALT+D" click="daumButtonClickHandler(event)"/>

</s:Application>

4. 스크린 리더기는 각각의 항목에 대하여 다음과 같이 읽습니다.a. 네이버 버튼 : 네이버 CTRL + ALT + N 버튼

b. 다음 버튼 : 다음 CTRL + ALT + D 버튼



∘ 2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

1.19 폼(Form) 컨트롤의 레이블 설정1.19.1 설명

폼(Form)은 어플리케이션에서 시스템과 사용자간의 요구사항이나 상호작용을 위한 필수적인 요소입니다. 그렇기 때문에 사용자들이 폼을 완전하게 채우도록 보장하는 것은 어플리케이션을 효과적으로 사용하도록 하는 데 있어 매우 중요합니다. 만약 폼 레이블의 구조화가 정확하게 되어 있지 않다면, 시각 장애인과 같은 사용자들은 어플리케이션을 사용하는 데 있어 어려움을 겪을 것입니다. 그러므로 개발자들은 접근성 있는 폼을 위해서 정확한 레이블 정보를 제공해야 합니다.

이 장의 목적은 폼 구성 요소를 사용하여 폼 레이블과 폼 요소를 구현하고 폼 컨트롤의 레이블 정보를 전달하는 방법에 대하여 알아봅니다.

플래시에서는 “자동 레이블(Auto Labeling)” 이라는 기능이 있습니다. 이 기능은 입력 텍스트 필드와 같은 요소에 위나 왼쪽 방향에 근접한 텍스트가 있다면 자동으로 그 텍스트를 입력 텍스트 필드와 같은 요소의 레이블로 사용하는 기능입니다. 자동 레이블에 대한 자세한 내용은 4.5 자동 레이블 (Auto Labeling) 을 참고하시기 바랍니다.

1.19.2 플래시 저작도구에서 Accessibility(액세스 가능성) 패널을 사용한 폼 레이블 설정플래시 저작도구에는 Button, RadioButton, TextInput, CheckBox, ComboBox 와 같은 폼을 구성하기 위한 폼 요소들이 UI 컴포넌트의 형태로 제공이 되고 있습니다. 이 폼 요소에 해당하는 컴포넌트에 폼 레이블을 설정합니다.

뿐만 아니라, 주민등록 번호 필드나 이메일 필드와 같이 하나의 레이블이 여러 개의 폼 요소를 포함할 수 있습니다. 이러한 경우 각각의 폼 요소들을 일관된 하나의 레이블과 연결을 하여 사용자가 폼 요소를 사용함에 있어 혼동이 없도록 해야 합니다.

132 / 307

6. 참고 자료

1. 예제 파일 : FlashIDE_FormLabel.fla

그림 45 폼의 구성 – Form Header, Form Label, Form Elements

2. 플래시 저작도구의 UI 컴포넌트의 Label, TextInput, RadioButton, CheckBox, TextArea 컴포넌트를 사용하여 그림 46 과

같이 배치합니다.3. 속성(Properties) 패널의 “구성요소 매개변수” 에서 각각의 컴포넌트의 label 값에 그림 46 의 레이블과 같은 텍스트를

입력합니다.

그림 46 CheckBox 컴포넌트의 label 값 입력 장면

4. 성별 라디오 버튼은 각각 남자와 여자 레이블을 입력하고 동일한 라디오 그룹을 가지도록 설정합니다.

133 / 307

6. 참고 자료

그림 47 라디오 버튼의 구성 요소 매개 변수 – groupName 값은 동일해야 합니다.

5. Accessibility 패널(액세스 가능성 패널)에서 각각의 폼 요소에 폼 레이블로 사용할 값을 이름(Name) 필드에 작성합니다.(설명-Description- 필드에 넣어도 무방하지만, 속성의 의미를 생각한다면 이름 필드가 어울립니다) 필드에 작성을 할 때에는

폼 요소에 포커스가 들어올 때, Form Header, Form Label 들도 함께 읽혀질 수 있도록 하는 것이 좋습니다.a. 폼 요소에 해당하는 모든 컴포넌트에서 “객체를 액세스 가능하게 만들기” 체크 상자와, “자식 객체 액세스 가능” 체크

상자에 체크를 합니다.b. 이름 TextInput 컴포넌트 : “개인 정보 입력 이름:”

그림 48 이름 입력 폼 요소에 접근성 이름 정보 설정

c. 성별 RadioButton 컴포넌트

- 남자 RadioButton : “개인 정보 입력 성별:”- 여자 RadioButton : “개인 정보 입력 성별:”

134 / 307

6. 참고 자료

그림 49 성별 라디오 버튼 폼 요소에 접근성 이름 정보 설정

d. 미성년자 CheckBox 컴포넌트 : “개인 정보 입력 미성년자:”

그림 50 미성년자 체크 상자 폼 요소에 접근성 이름 정보 설정

e. 비고 TextArea 컴포넌트 : “개인 정보 입력 비고:”

135 / 307

6. 참고 자료

그림 51 비고 텍스트 영역 폼 요소에 접근성 이름 설정

6. 새로운 레이어를 추가하고 키 프레임에 다음의 스크립트를 작성합니다.

import fl.accessibility.CheckBoxAccImpl;import fl.accessibility.RadioButtonAccImpl;

CheckBoxAccImpl.enableAccessibility();RadioButtonAccImpl.enableAccessibility();

각각의 컴포넌트의 접근성 구현 클래스에서 클래스 메소드인 enableAccessibility() 메소드를 호출해야 합니다. 이

메소드를 호출하지 않을 경우에는 각 컴포넌트들에 대한 접근성 정보가 스크린 리더기와 같은 보조 도구로 전달이 되지

않습니다(라디오 버튼과 같은 폼 요소도 단순히 버튼으로만 인식하게 됩니다).Label, TextInput, TextArea 와 같은 텍스트 기반 컴포넌트는 접근성 구현 클래스가 존재하지 않습니다.

7. 컴파일 한 응용프로그램에서 Tab 키를 사용하여 폼 컨트롤(폼 요소)를 탐색합니다. 스크린 리더기는 각 요소를 다음과 같이

읽습니다.a. 이름 필드 : “개인정보입력 이름 콜론 그래픽”

b. 성별 라디오 버튼: “개인정보입력 성별 콜론 남자 라디오 버튼 체크되지 않음(또는 체크됨)”, “개인정보입력 성별 여자 라디오 버튼 체크되지 않음(또는 체크됨)”

c. 미성년자 체크박스 : “개인정보 입력 미성년자 콜론 미성년자입니다 체크 상자 체크되지 않음(체크됨)”d. 비고 필드 : “개인정보입력 비고 콜론 그래픽”

이 예제에서는 폼 요소에 대한 대체 텍스트 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

텍스트 입력 필드나 라디오 버튼과 같은 폼 입력 요소에 대해 레이블을 포함한 접근성 있는 대체 텍스트를 설정하고 tabIndex 를 지정했을 때 좌측의 폼 레이블에 대해서는 tabIndex 를 주지 않거나 또는 스크린 리더기가 접근할 수 없도록 해서 중복된 레이블 내용을 읽지 않도록 할 수 있습니다.

136 / 307

6. 참고 자료

1.19.3 플래시 저작도구에서 ActionScript 3.0 을 사용한 폼 레이블 설정ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스의 name 속성을 사용하여 “4.11.2 플래시 저작도구에서 Accessibility( 액세스 가능성 ) 패널을 사용한 폼 레이블 설정 ” 의 예제와 동일한 결과물을 만들 수 있습니다.

그림 52 ActionScript 를 사용하여 제작한 폼

1. 예제 파일 : FlashForm.fla 과 관련 패키지(ActionScript 클래스 파일)2. 라이브러리 패널 안으로 CheckBox, Label, RadioButton, TextInput, TextArea 컴포넌트를 넣습니다.3. FlashForm.as (메인 클래스)

package{import acc.FormField;

import flash.display.Sprite;

public class FlashForm extends Sprite{

private var formField:FormField;

public function FlashForm(){

formField = new FormField();addChild(formField);

}}}

4. acc.FlashForm.as (폼 컨트롤 클래스)

package acc{import fl.accessibility.*;import fl.controls.*;

137 / 307

6. 참고 자료

import flash.accessibility.AccessibilityProperties;import flash.display.Sprite;import flash.text.TextField;import flash.text.TextFieldAutoSize;import flash.text.TextFormat;

public class FormField extends Sprite{

private const FORM_HEAD_TEXT:String = "개인 정보 입력";

private var formHead:TextField;private var formLabels:Array = [];

// 폼 요소로 사용할 UI 컴포넌트들private var nameField:TextInput;private var genderRadioGroup:RadioButtonGroup;private var maleRadioButton:RadioButton;private var femaleRadioButton:RadioButton;private var childCheckBox:CheckBox;private var commentArea:TextArea;

/** * Constructor */public function FormField(){

super();setAccessibilityEnable();createFormHeaderField();createFormLabel();createFormElements();setAccessibiltiyNameAtComponent();

}

/** * @private * 컴포넌트 접근성 구현 클래스 활성화 */private function setAccessibilityEnable():void{

CheckBoxAccImpl.enableAccessibility();RadioButtonAccImpl.enableAccessibility();

}

/** * @private * Form Header 생성하는 메소드 */private function createFormHeaderField():void{

var format:TextFormat = new TextFormat();format.font = "NanumGothic";format.size = 20;format.bold = true;

formHead = new TextField();

138 / 307

6. 참고 자료

formHead.defaultTextFormat = format;formHead.autoSize = TextFieldAutoSize.LEFT;formHead.text = FORM_HEAD_TEXT;formHead.x = 33;formHead.y = 30;

addChild(formHead);}

/** * @private * Form Label 생성하는 메소드 */private function createFormLabel():void{

var xPosition:int = 33;var yPositions:Array = [75, 114, 189, 226];var labelText:Array = ["이름:",

"성별:", "미성년자:", "비고:"];

for (var i:int = 0; i < labelText.length; i++){

var label:Label = new Label();label.text = labelText[i];label.x = xPosition;label.y = yPositions[i];

formLabels[i] = label;

addChild(label);}

}

/** * @private * 폼 요소 생성하는 메소드 */private function createFormElements():void{

// 이름 입력 필드 생성nameField = new TextInput();nameField.x = 157;nameField.y = 75;nameField.width = 150;addChild(nameField);

// 라디오 버튼 그룹 생성genderRadioGroup = new RadioButtonGroup("성별:");

// 라디오 버튼(남자, 여자) 생성maleRadioButton = new RadioButton();maleRadioButton.group = genderRadioGroup;maleRadioButton.label = "남자";

139 / 307

6. 참고 자료

maleRadioButton.x = 157;maleRadioButton.y = 113;addChild(maleRadioButton);

femaleRadioButton = new RadioButton();femaleRadioButton.group = genderRadioGroup;femaleRadioButton.label = "여자";femaleRadioButton.x = 157;femaleRadioButton.y = 145;addChild(femaleRadioButton);

// 체크 박스 생성childCheckBox = new CheckBox();childCheckBox.label = "미성년자 입니다.";childCheckBox.width = 150;childCheckBox.x = 156;childCheckBox.y = 187;addChild(childCheckBox);

// 비고 텍스트 에어리어 생성commentArea = new TextArea();commentArea.width = 150;commentArea.height = 100;commentArea.x = 156;commentArea.y = 225;addChild(commentArea);

}

/** * @private * 생성된 컴포넌트에 접근성 정보(name)을 설정하는 메소드 */private function setAccessibiltiyNameAtComponent():void{

var accProps:Array = [];

for (var i:int = 0; i < formLabels.length; i++){

var accProp:AccessibilityProperties = new AccessibilityProperties();

accProp.name = FORM_HEAD_TEXT + (formLabels[i] as Label).text;

accProps[i] = accProp;}

// 각각의 컴포넌트에 접근성 정보를 설정합니다.nameField.accessibilityProperties = accProps[0];maleRadioButton.accessibilityProperties = accProps[1];femaleRadioButton.accessibilityProperties = accProps[1];childCheckBox.accessibilityProperties = accProps[2];commentArea.accessibilityProperties = accProps[3];

}}}

140 / 307

6. 참고 자료


읽습니다.a. 이름 필드 : “개인정보입력 이름 콜론 그래픽”

b. 성별 라디오 버튼: “개인정보입력 성별 콜론 남자 라디오 버튼 체크되지 않음(또는 체크됨)”, “개인정보입력 성별 여자 라디오 버튼 체크되지 않음(또는 체크됨)”

c. 미성년자 체크박스 : “개인정보 입력 미성년자 콜론 미성년자입니다 체크 상자 체크되지 않음(체크됨)”d. 비고 필드 : “개인정보입력 비고 콜론 그래픽”

이 예제에서는 폼 요소에 대한 대체 텍스트 사용을 설명하기 위해서 tabIndex 에 대한 언급은 하지 않았습니다. 기본적으로 플래시 플레이어는 플래시의 객체들이 가로 방향 또는 세로 방향 한쪽으로 선형적으로 배치가 되어 있으면 왼쪽에서 오른쪽, 또는 위에서 아래 방향으로 순서대로 객체를 읽게 됩니다. 하지만 명시적으로 tabIndex 를 설정하여 올바르게 읽는 순서를 정의해 줄 것을 권장합니다.

텍스트 입력 필드나 라디오 버튼과 같은 폼 입력 요소에 대해 레이블을 포함한 접근성 있는 대체 텍스트를 설정하고 tabIndex 를 지정했을 때 좌측의 폼 레이블에 대해서는 tabIndex 를 주지 않거나 또는 스크린 리더기가 접근할 수 없도록 해서 중복된 레이블 내용을 읽지 않도록 할 수 있습니다.

1.19.4 Flex 에서의 폼 레이블 설정Flex 는 폼을 구성하기 위한 Form, FormHeader, FormItem 이라는 세부적인 컴포넌트들을 지원합니다. 이 컴포넌트는 Form 형태의 컨테이너를 생성하고 그 안에 폼의 제목이 되는 FormHeader 와 폼 레이블과 폼 요소가 되는 FormItem 컴포넌트를 배치할 수 있습니다.

Flex 에서 제공하는 이러한 폼 관련 컴포넌트를 사용하였을 때, Tab 키를 사용하여 폼 요소를 이동할 경우 스크린 리더기는 자동으로 포커스를 받은 폼 요소와 관련한 폼의 제목과 폼 요소의 레이블을 연결하여 읽습니다.1. 예제 파일 : AccessibilityFlexForm.mxml

141 / 307

6. 참고 자료

그림 53 Flex 의 Form, FormHeader, FormItem 컴포넌트를 사용하여 구성한 폼

2. 소스 코드


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" fontFamily="NanumGothic">


s|Form{

skinClass: ClassReference("spark.skins.spark.StackedFormSkin");}s|FormHeading{

skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");} s|FormItem{

skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");}

</fx:Style>

142 / 307

6. 참고 자료


import mx.collections.ArrayCollection;

import spark.components.RadioButtonGroup;

[Bindable]// ComboBox에 바인딩할 데이터private var genderDP:ArrayCollection = new ArrayCollection(

["남자", "여자"]);

[Bindable]// 라디오 버튼들의 그룹을 위한 라디오버튼 크룹 인스턴스private var memberRadioGroup:RadioButtonGroup = new RadioButtonGroup();

]]></fx:Script>

<s:Form width="500" height="600" backgroundColor="#EEEEEE" ><s:FormHeading label="회원 가입 양식"/><s:FormItem label="이름" sequenceLabel="1." >

<s:TextInput width="100%"/></s:FormItem><s:FormItem label="주소" sequenceLabel="2.">

<s:TextInput width="100%"/></s:FormItem><s:FormItem label="성별" sequenceLabel="3.">

<s:ComboBox dataProvider="{genderDP}" selectedIndex="0" width="100%"/> </s:FormItem><s:FormItem label="회원 구분" sequenceLabel="4.">

<s:RadioButton label="내국인(14세 이상)" group="{memberRadioGroup}" selected="true"/>

<s:RadioButton label="내국인(14세 미만)" group="{memberRadioGroup}"/><s:RadioButton label="외국인" group="{memberRadioGroup}"/>

</s:FormItem> <s:FormItem label="정보 수신 동의 여부" sequenceLabel="5.">

<s:CheckBox label="정보 수신에 동의합니다." /></s:FormItem>

</s:Form></s:Application>


읽습니다.a. 이름 : 회원 가입 양식 이름 편집 상자 “텍스트를 입력하세요”

b. 주소 : 회원 가입 양식 주소 편집 상자 “텍스트를 입력하세요”

c. 성별

- 남자 : 남자. 회원 가입 양식 성별 편집 콤보 남자 “값을 설정하시려면 방향키를 사용하시거나 값을 입력하세요”

- 여자 : 여자. 회원 가입 양식 성별 편집 콤보 여자 “값을 설정하시려면 방향키를 사용하시거나 값을 입력하세요”

- Ctrl + 아래 : 목록상자 열기

- Ctrl + 위 : 목록상자 닫기

- 목록에서 선택 시 : 남자 또는 여자 목록상자 항목 선택

143 / 307

6. 참고 자료

d. 회원 구분

- 내국인(14 세 미만) : 회원 가입 양식 회원 구분 내국인 괄호 열고 14 세 미만 괄호 닫고 1 of 3 라디오 버튼 체크됨(체크 해제) 선택한 것을 바꾸려면 위 아래 화살표 키를 사용하세요

- 내국인(14 세 이상) : 회원 가입 양식 회원 구분 내국인 괄호 열고 14 세 이상 괄호 닫고 2 of 3 라디오 버튼 체크됨(체크 해제) 선택한 것을 바꾸려면 위 아래 화살표 키를 사용하세요.

- 외국인 : 회원 가입 양식 회원 구분 외국인 3 of 3 라디오 버튼 체크됨(체크 해제) 선택한 것을 바꾸려면 위 아래 화살표 키를 사용하세요

e. 정보 수신 동의 여부 : 회원 가입 양식 정보 수신 동의 여부 정보 수신에 동의합니다. 체크 상자 체크되지 않음(체크됨)

JAWS 와 같은 스크린 리더기는 폼 요소를 만나게 되면 소리를 통해 폼 모드의 설정 및 해제를 사용자에게 알려줍니다. 폼 모드로 진입을 하게 되면 텍스트 입력 필드에 키 스트로크 입력을 하거나 화살표 키를 사용하여 목록을 선택하는 기능을 할 수 있게 됩니다. (물론 스크린 리더기에 따라 다를 수 있습니다.)


∘ 1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.• 3.4 (입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다.

∘ 3.4.1(레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다.

1.20 테이블의 사용1.20.1 설명

테이블은 데이터들을 표를 통해 시각적으로 함축된 정보와 관계를 나타내기 위해 사용합니다. HTML 과 달리 플래시에는 기본적으로 테이블(표)에 해당하는 객체가 존재하지 않습니다. 플래시 저작도구에서 선과 텍스트 도구를 사용하여 정적인 표를 그리거나, DataGrid 컴포넌트를 사용하여 데이터를 테이블의 형태로 표시합니다.

플래시 저작 도구에 UI 컴포넌트로 제공이 되는 DataGrid 컴포넌트나 Flex 의 DataGrid 컴포넌트는 자체적으로 접근성을 지원할 수 있도록 구현이 되어 있습니다. 하지만 플래시로 제작하는 저작물에서 표를 표현하기 위해 항상 DataGrid 컴포넌트를 사용할 수 있는 것은 아닌 도형과 선, 텍스트만을 사용하여 표를 그려야 하는 경우도 있습니다. 하지만 이러한 경우에도 기본적으로 접근성 있는 콘텐츠를 제공하기 위해 대체 텍스트와 논리적으로 읽는 순서 등을 적용하여 접근성 있는 테이블을 제작할 수 있습니다.

이 장의 목적은 도형과 선, 텍스트를 사용하여 그린 테이블을 접근성이 있도록 제작을 하는 방법과 플래시 저작 도구와 플렉스에서 제공하는 DataGrid 컴포넌트를 접근성 있게 제작하는 방법을 알아봅니다.

1.20.2 플래시 저작도구에서 드로잉 도구를 사용하여 접근성 있는 테이블 제작플래시 저작도구에서는 드로잉 도구(도형, 선)를 사용하여 그래픽 형태의 테이블을 그려 제작할 수 있습니다. 이 테이블은 겉 보기만으로는 테이블이지만 접근성 적인 관점에서 보면 단순한 그래픽에 불과합니다. 그렇기 때문에 그래픽 형태에 불과한 이 테이블에 대체 텍스트, 읽는 순서 등을 적용하여 보다 접근성이 있는 테이블로 만들 수 있습니다.

플래시에서는 테이블에 대하여 caption 이나 summary 정보를 제공하지 않기 때문에 접근성 정보의 name 이나 description 을 활용하는 것이 좋습니다.1. 예제 파일 : DrawingTable_01.fla

144 / 307

6. 참고 자료

그림 54 도형, 선, 정적 텍스트를 사용하여 그린 테이블

2. 플래시 저작도구에서 정적 텍스트와 선, 도형 툴을 사용하여 위 그림 55 와 같이 그립니다.3. “어도비사 제품군” 텍스트를 선택하고 무비 클립 심볼로 변환하여 속성 패널에서 “TableCaption” 이라는 인스턴스 네임을

설정합니다.4. 테이블 헤더 부분에 해당하는 “제품, 버전, 용도”를 모두 선택하고 무비 클립 심볼로 변환하여 속성 패널에서 “TableHeader”

라는 인스턴스 네임을 설정합니다.5. 첫 번째 행에 해당하는 “Flash, CS5.5, 플래시 저작 툴” 텍스트를 모두 선택하고 무비 클립 심볼로 변환하여 속성 패널에서

“TableRow01”이라는 인스턴스 네임을 설정합니다.6. 나머지 두 번째부터 네 번째까지 행에 대해서도 5번 항목과 동일한 방법으로 무비 클립 심볼을 만들고 속성 패널에서 각각

“TableRow02~TableRow04” 인스턴스 네임을 설정합니다.7. Accessibility(액세스 가능성)패널을 열고 각각의 무비 클립에 대해서 접근성 정보를 설정합니다.

인스턴스 네임 객체를 액세스 가능하게

만들기 체크상자

자식 객체 액세스

가능성 체크상자

이름 탭 인덱스

TableCaption 체크 체크 해제 어도비사 제품군 테이블 - 4행 3열 제품, 버전, 용도 세 개의 칼럼으로 구성되어 있습니다.

1

TableHeader 체크 해제 - - -TableRow01 체크 체크 해제 4행 중 1행 제품 플래시 버전 CS5.5 용도

플래시 저작 툴2

TableRow02 체크 체크 해제 4행 중 2행 제품 포토샵 버전 CS5.1 용도 레스터 기반 이미지 저작 툴

3

TableRow03 체크 체크 해제 4행 중 3행 제품 일러스트레이터 버전 CS5.1 용도 벡터 기반 그래픽 저작 툴

4

TableRow04 체크 체크 해제 4행 중 4행 제품 드림위버 버전 CS5.5 용도 웹사이트 저작 툴

5

8. TableHeader 의 객체를 액세스 가능하지 못하게 한 이유는 스크린 리더기로 읽을 때, TableCaption 에서 칼럼에 대해 설명을

하고 있고, 각 행을 읽을 때 헤더의 이름과 연결을 지어 읽기 때문입니다.9. 나머지 인스턴스에 대해 자식 객체의 액세스를 하지 않도록 한 이유는 자식 객체가 텍스트이기 때문에 스크린 리더기가

TableCaption 이나 TableRow 를 읽을 때 접근성 정보인 이름을 읽고 자식 객체인 텍스트를 또 반복해서 읽을 수 있기

때문입니다.10. 스크린 리더기는 다음과 같은 순서로 읽을 것입니다.

145 / 307

6. 참고 자료

a. TableCaption : 어도비사 제품군 테이블 마이너스 4행 3열 제품 버전 용도 세 개의 칼럼으로 구성되어 있습니다. 그래픽

b. TableHeader : 읽지 않음

c. TableRow01 : 4행 중 1행 제품 플래시 버전 CS5.5 용도 플래시 저작 툴 그래픽

d. TableRow02 : 4행 중 2행 제품 포토샵 버전 CS5.1 용도 레스터 기반 이미지 저작 툴 그래픽

e. TableRow03 : 4행 중 3행 제품 일러스트레이터 버전 CS5.1 용도 벡터 기반 그래픽 저작 툴 그래픽

f. TableRow04 : 4행 중 4행 제품 드림위버 버전 CS5.5 용도 웹 사이트 저작 툴 그래픽

1.20.3 플래시 저작 도구에서 DataGrid 컴포넌트를 사용하여 접근성 있는 테이블 제작플래시 저작 도구에서 제공하는 UI 컴포넌트 중 DataGrid 컴포넌트를 사용하여 테이블을 제작할 수 있습니다. DataGrid 컴포넌트를 접근성 있도록 하기 위해서는 DataGridAccImpl.enableAccessibility() 메소드를 처음 호출해야 합니다.1. 예제 파일 : DataGridTable.fla

그림 55 DataGrid 컴포넌트를 사용하여 제작한 테이블

2. 스테이지에 Label 컴포넌트와 DataGrid 컴포넌트를 배치하고 적당한 크기로 설정합니다.3. Label 컴포넌트에 tableCaption 이라는 인스턴스 네임을 설정하고 구성요소 매개 변수의 text 항목에 “어도비사 제품군”을

입력합니다.4. tableCaption 인스턴스 Label 을 선택하고 Accessibility(액세스 가능성) 패널을 열어서 자식 객체 액세스 가능성 체크를

해제하고 이름 필드에 “어도비사 제품군 테이블 4행 3열”을 입력합니다.5. DataGrid 컴포넌트에는 adobeDG 라는 인스턴스 네임을 설정합니다.6. 타임라인 키 프레임에 다음의 액션스크립트를 작성합니다.

import fl.data.DataProvider;import fl.accessibility.DataGridAccImpl;

DataGridAccImpl.enableAccessibility();

var data0:Object = {"제품":"Flash", "버전":"CS5.5", "용도":"플래시 저작 툴"};var data1:Object = {"제품":"Photoshop", "버전":"CS5.1", "용도":"레스터 기반 이미지 저작 툴"};var data2:Object = {"제품":"Illustrator", "버전":"CS5.1", "용도":"벡터 기반 이미지 저작 툴"};var data3:Object = {"제품":"Dreamwaeaver", "버전":"CS5.5", "용도":"웹사이트 저작 툴"};

var dp:DataProvider = new DataProvider();dp.addItem(data0);dp.addItem(data1);dp.addItem(data2);dp.addItem(data3);

146 / 307

6. 참고 자료

adobeDG.columns = ["제품", "버전", "용도"];adobeDG.dataProvider = dp;

7. 스크린 리더기는 다음과 같이 읽을 것입니다.a. tableCaption : 그래픽 어도비사 제품군 테이블 4행 3열b. DataGrid

- “목록 상자 선택되지 않음 Row 1 of 4 제품 플래시 버전 CS 5.5 용도 플래시 저작 툴 목록 상자 항목 선택되지 않음”

- 폼 모드에서 행을 선택할 때(화살표 키로 선택) : “Row 2 of 4 제품 포토샵 버전 CS 5.1 용도 레스터 기반 이미지 저작 툴 목록 상자 항목 선택”

그림 56 DataGrid 의 행을 선택할 때

- 위 그림 57 과 같이 행을 선택했을 경우에 스크린 리더기는 “Row 2 of 4 제품 포토샵 버전 CS5.1 용도 레스터 기반 이미지 저작 툴 목록 상자 항목 선택”으로 읽습니다.

1.20.4 Flex 에서 DataGrid 컴포넌트를 사용하여 접근성 있는 테이블 제작플렉스에서 제공하는 DataGrid 컴포넌트는 플래시 저작도구에서 제공하는 DataGrid 컴포넌트와 상당히 유사하지만, DataGrid에 포커스가 입력이 되었을 때 최초 선택 한 행을 시각적으로 표기해주는 점이 약간 다릅니다.1. 예제 파일 : AccessibilityDataGrid.mxml2. 소스 코드


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" fontFamily="NanumGothic" minWidth="955" minHeight="600">


</s:layout>

<s:DataGrid id="dataGrid" width="500"><s:columns>

<s:ArrayList><s:GridColumn dataField="product" headerText="제품"/><s:GridColumn dataField="version" headerText="버전"/><s:GridColumn dataField="forUse" headerText="용도"/>

</s:ArrayList></s:columns>

<s:ArrayCollection>

147 / 307

6. 참고 자료

<s:DataItem product="Flash" version="CS5.5" forUse="플래시 저작 툴"/><s:DataItem product="Photoshop" version="CS5.1" forUse="레스터 기반 이미지

저작 툴"/><s:DataItem product="Illustrator" version="CS5.1" forUse="벡터 기반 이미지

저작 툴"/><s:DataItem product="Dreamweaver" version="CS5.5" forUse="웹사이트 저작

툴"/></s:ArrayCollection>

</s:DataGrid>

</s:Application>

3. 스크린 리더기는 다음과 같이 읽습니다.- DataGrid 에 포커스가 위치했을 때 : “선택되지 않음. 제품 : 플래시 버전 : CS5.5 용도 : 플래시 저작 툴 Row 1 of 4 목록

상자 항목”

그림 57 처음 DataGrid 를 선택했을 때

- 화살표 키로 행을 선택할 때 : “제품 : 일러스트레이터 버전 : CS5.1 용도 : 벡터 기반 이미지 저작 툴 Row 3 of 4 목록 상자

항목 선택”

그림 58 DataGrid 에서 행을 선택할 때

- 선택한 행이 있는 DataGrid 로 포커스가 다시 진입할 때 : “목록 상자 제품 : 일러스트레이터 버전 : CS5.1 용도 : 벡터 기반

이미지 저작 툴 Row 3 of 4 목록 상자 항목 선택” – 바로 선택된 행을 읽습니다.

그림 59 선택한 행이 있는 DataGrid 가 포커스를 받았을 때

148 / 307

6. 참고 자료

1.20.5 KWCAG 2.0 관련 항목• 3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.

∘ 3.3.2 (표의 구성) 표는 이해하기 쉽게 구성해야 한다.

1.21 자동으로 스크롤 되는 콘텐츠의 제어1.21.1 설명

자동으로 스크롤이 되는 콘텐츠는 저 시력의 사용자나 인지 능력이 낮은 사용자들이 읽거나 이해하기 어렵게 만들 수 있습니다. 또한 자동으로 스크롤 되는 콘텐츠는 일부 사람들에게 웹 페이지의 다른 부분에 대해 집중하기 어렵게 만들기도 합니다.

그렇기 때문에 자동으로 스크롤이 되는 콘텐츠를 제작할 때에는 사용자가 재생, 일시 정지를 하거나 정지를 할 수 있는 컨트롤을 제공해야 합니다. 또한, 스크롤 속도를 제어할 수 있는 기능을 제공해주는 것도 좋은 방법입니다.

이 장의 목적은 자동으로 스크롤이 되는 콘텐츠를 제어할 수 있는 컨트롤을 제공하는 방법을 알아봅니다.

1.21.2 Flex 를 사용하여 스크롤을 일시 정지 하고 재개하는 컨트롤 제작이 예제에서는 자동으로 스크롤 하는 텍스트가 있습니다. 토글 버튼으로 스크롤 하는 버튼을 일시 정지하고 스크롤을 재개할 수 있도록 합니다. 또한 슬라이더 컨트롤을 사용하여 스크롤이 되는 속도를 조절하도록 합니다.

그림 60 스크롤이 되는 텍스트를 재생/일시 정지 토글 버튼과 스크롤 속도를 제어하는 슬라이더로 텍스트의 속도를 제어

1. 예제 파일

a. assets/AccessibilityScrolledContent.fla – 어플리케이션에서 그래픽 요소를 제공하기 위한 애셋 소스 파일

b. AccessibilityScrolledContent.mxml 및 AccessibilityScrolledContent 프로젝트

2. Flex 에서 AccessibilityScrolledContent 라는 이름의 새로운 프로젝트를 생성합니다.3. AccessibilityScrolledContent.fla 에서 스크롤 배경이 될 무비 클립 심볼을 “ScrollBackGround” 라는 이름으로 만듭니다.

그림 61 ScrollBackGround 무비 클립

4. AccessibilityScrolledContent.fla 에서 스크롤 텍스트가 될 무비 클립 심볼을 “ScrollClip” 라는 이름으로 만듭니다.

149 / 307

6. 참고 자료

그림 62 ScrollClip 무비 클립

5. 라이브러리 패널에서 ScrollBackGround 심볼과 ScrollClip 심볼을 선택하고 플래시 상단의 메뉴에서 “명령 > Flex 구성

요소로 심볼 변환”을 선택합니다. 이 작업은 플래시에서 제작한 애셋을 플렉스 어플리케이션에서 사용하기 위함입니다.

그림 63 플래시 저작도구에서 제작한 애셋을 플렉스용 컴포넌트로 변환

6. Flex 용 컴포넌트로 변환이 되면 출력 패널에 변환 내용에 대한 메시지가 출력이 되고 라이브러리 패널에는 새로운 심볼들이

추가됩니다.

그림 64 Flex 용 컴포넌트의 변환 내용

150 / 307

6. 참고 자료

그림 65 Flex 용 컴포넌트로 변환 후 변경된 라이브러리 패널 안의 심볼들

7. 라이브러리에서 ScrollBackGround 심볼을 선택하고 우클릭 > 속성을 선택하여 클래스를 “scroll.view.ScrollBackGround”로 변경합니다.

151 / 307

6. 참고 자료

그림 66 ScrollBackGround 심볼의 속성

8. . 라이브러리에서 ScrollClip 심볼을 선택하고 우클릭 > 속성을 선택하여 클래스를 “scroll.view.ScrollBackGround”로

변경합니다.

152 / 307

6. 참고 자료

그림 67 ScrollClip 심볼의 속성

9. Flex 에서 사용할 SWC 라이브러리를 제작하기 위해 제작 설정(Control + Shift + F12) 패널에서 HTML 래퍼를 해제하고

“제작” 버튼을 클릭합니다. AccessibilityScrolledContent.fla 파일과 동일한 위치에 AccessibilityScrolledContent.swc 가

생성이 됩니다.

153 / 307

6. 참고 자료

그림 68 SWC 제작

10. Flex 의 Package Explorer 의 AccessibilityScrolledContent 프로젝트에서 libs 폴더에 제작한

AccessibilityScrolledContent.swc 파일을 넣습니다.

154 / 307

6. 참고 자료

11. AccessibilityScrolledContent.mxml 에 코드를 작성합니다.


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:view="scroll.view.*" fontFamily="NanumGothic" applicationComplete="applicationCompleteHandler(event)" minWidth="955" minHeight="600">



// 상수 선언protected const PAUSE:String = "일시 정지";protected const PLAY:String = "재생";

// 재생/일시 정지 상태protected var isPlay:Boolean = true;// 타이머 설정protected var timer:Timer;

// 스크린 리더기가 무시해야 할 접근성속성 인스턴스private var silentAccProp:AccessibilityProperties;// 텍스트 클립에 적용할 접근성 속성 인스턴스private var textAccProp:AccessibilityProperties;

/** * @private * 어플리케이션 생성이 완료되면 실행되는 이벤트 핸들러 */protected function applicationCompleteHandler(event:FlexEvent):void{

155 / 307

6. 참고 자료

silentAccProp = new AccessibilityProperties();silentAccProp.silent = true;

scrolledBackground.accessibilityProperties = silentAccProp;scrolledContentMask.accessibilityProperties = silentAccProp;

textAccProp = new AccessibilityProperties();textAccProp.name = "가계부채 800조…재테크 앞서 '빚테크'부터 은행원도 '

비추'하는 高금리 적금 위례신도시 보금자리 등 8월 알짜 청약";

scrolledContent.accessibilityProperties = textAccProp;

// 텍스트를 스크롤하기 위한 타이머 생성timer = new Timer(100);timer.addEventListener(TimerEvent.TIMER, timerHandler);timer.start();

}

/** * @private * 스크롤 되는 텍스트를 이동시키는 메소드 */private function moveScrolledContent():void{

if (scrolledContent.x + scrolledContent.width < scrolledBackground.x)

scrolledContent.x = scrolledBackground.x + scrolledBackground.width;

scrolledContent.x -= scrollSpeedSlider.value;}

/** * @private * 타이머가 작동할 때 마다 실행되는 이벤트 핸들러 */protected function timerHandler(event:TimerEvent):void{

moveScrolledContent();}

/** * @private * 재생/일시 정지 토글 버튼을 클릭하면 실행되는 이벤트 핸들러 */protected function toggleButtonClickHandler(event:MouseEvent):void{

isPlay = !isPlay;toggleButton.label = isPlay ? PAUSE : PLAY;

// 버튼 레이블이 변경될 때 버튼의 접근성 정보를 갱신if (Capabilities.hasAccessibility){

if (Accessibility.active){

156 / 307

6. 참고 자료


}

if (isPlay)timer.start();

elsetimer.stop();

}

]]></fx:Script>

<view:ScrollBackGround id="scrolledBackground" y="50" horizontalCenter="0" tabEnabled="false"/>

<view:ScrollBackGround id="scrolledContentMask" y="50" horizontalCenter="0" tabEnabled="false"/>

<view:ScrollClip id="scrolledContent" x="688" y="62" mask="{scrolledContentMask}" tabIndex="1" tabEnabled="true"/>

<s:Button id="toggleButton" x="275" y="129" label="일시 정지" click="toggleButtonClickHandler(event)" tabIndex="2"/>

<s:Label x="279" y="162" text="스크롤 속도 : " textAlign="right"/>

<s:HSlider id="scrollSpeedSlider" x="364" y="163" maximum="10" minimum="0" stepSize="1" value="5" tabIndex="3"/>

</s:Application>

1.21.3 KWCAG 2.0 관련 항목• 2.2(충분한 시간 제공) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.

∘ 2.2.2(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

1.22 스크린 리더기의 사용 감지1.22.1 설명

플래시 플레이어는 스크린 리더기의 활성 상태를 감지할 수 있는 기능을 제공합니다. 스크린 리더기의 활성 상태에 따라 특정 방식으로 작동하는 콘텐츠를 만들 수 있습니다. 예를 들어, 스크린 리더기의 활성 상태에 따라 동영상이나 소리를 플래시 어플리케이션이 시작할 때 자동으로 재생하게 하거나 정지 상태로 둘 수 있도록 콘텐츠의 내용을 분기할 수 있습니다.

flash.system.Capabilities.hasAccessibility 속성을 사용하여 시스템이 스크린 리더기와 같은 접근성 보조 도구와의 통신을 지원하는지 여부를 판단할 수 있습니다.

157 / 307

6. 참고 자료

flash.accessibility.Accessibility.active 속성을 사용하면, 스크린 리더기가 활성 상태로 플래시 어플리케이션과 통신 중인지 여부를 판단할 수 있습니다.

플래시 어플리케이션이 시작하자마자 바로 Accessibility.active 속성을 호출하면, 실제 사용자가 스크린 리더기를 사용 중이라 할 지라도 false(스크린 리더기를 사용하지 않은 상태)를 반환할 수 있습니다. 플래시 플레이어와 플래시 어플리케이션 사이에서 비동기적으로 통신이 이루어지기 때문에 약간의 시간차가 발생할 수 있기 때문입니다.

이러한 오류 없이 올바르게 호출하려면 다음과 같은 방법을 사용합니다.• 플래시 콘텐츠가 처음 시작 할 때, Accessibility.active 속성을 호출하여 스크린 리더기의 사용 여부를 판단하는 것이 아닌,

접근성 정보의 분기가 필요한 지점에 대한 결정을 내려야 할 때마다 Accessibility.active 속성을 호출하여 콘텐츠 내용을

분기합니다.• 플래시가 처음 시작 할 때 1~2초 정도의 지연 시간을 두어 플래시 어플리케이션과 플래시 플레이어간에 통신할 수 있는

시간을 충분히 둡니다.

1.22.2 플래시 어플리케이션과 플래시 플레이어간의 비 동기 통신 확인이 예제는 플래시의 Event.ENTER_FRAME 이벤트를 사용하여, Accessibility.active 속성의 비 동기 통신 결과를 확인합니다. 클라이언트 시스템의 사양에 따라 약간의 차이는 있으나, 플래시 플레이어가 브라우저에 로드가 되고 플래시 콘텐츠가 플래시 플래이어 내에서 시작을 할 때 Accessibility.active 속성을 호출하면, 처음부터 스크린 리더기 사용의 감지가 바로 되지 않음을 확인할 수 있습니다.

그림 69 플래시 플레이어의 스크린 리더기 사용 감지

1. 예제 파일 : AccessibilityDetect.fla2. TextArea UI 컴포넌트를 라이브러리 패널로 드래그 하여 둡니다.3. 키 프레임에 다음 코드를 작성합니다.

import fl.controls.TextArea;

import flash.events.Event;import flash.accessibility.Accessibility;

158 / 307

6. 참고 자료

var index:int = 0;

// 로그 출력용 텍스트 영역var logArea:TextArea;

logArea = new TextArea();logArea.setSize(500, 350);logArea.move(15, 15);addChild(logArea);

this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

/** * 매 프레임마다 실행되는 이벤트 핸들러 */function enterFrameHandler(evnet:Event):void{// 매 프레임마다 스크린 리더기가 활성화 되어 있는지를 확인하는// Accessibility.active 속성 호출index++;logArea.text += index + ". 스크린 리더기 사용 : " + Accessibility.active + "\n";

logArea.verticalScrollPosition = logArea.maxVerticalScrollPosition;

if (Accessibility.active == true)this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

}

4. 스크린 리더기를 실행시키고, 제작한 swf 를 포함하고 있는 html(AccessibilityDetect.html)을 실행합니다.5. 실행하는 시스템의 사양과 환경에 따라 약간씩의 차이는 있지만 처음에는 Accessibility.active 값을 false 로 반환을 하다가

어느 순간부터 true 를 반환하는 것을 확인할 수 있습니다.

1.22.3 약간의 시간 차를 두어 정확한 스크린 리더기의 감지이 예제에서는 플래시 어플리케이션이 처음 실행될 때, 약간의 지연을 두어 스크린 리더기의 활성화를 감지하는 방법을 알아봅니다.1. 예제 파일 : AccessibilitCorrectDetect.fla2. TextArea UI 컴포넌트를 라이브러리 패널로 드래그 하여 둡니다.3. 키 프레임에 다음 코드를 작성합니다

import fl.controls.TextArea;import flash.accessibility.Accessibility;import flash.utils.setTimeout;

var index:int = 0;

// 로그 출력용 텍스트 영역var logArea:TextArea;

logArea = new TextArea();logArea.setSize(500, 200);logArea.move(15, 15);logArea.text = "메세지 출력 필드";

159 / 307

6. 참고 자료

addChild(logArea);

// 1초 후 실행이 될 함수를 지정setTimeout(init, 1000);

/** * setTimeout 함수에 의해 1초 뒤 실행되는 함수 내용으로 * 스크린 리더기 활성화 유무에 따라 다른 내용의 텍스트를 표기합니다. */function init():void{if (Accessibility.active){

logArea.text = "스크린 리더기가 활성화 되었습니다.";}else{

logArea.text = "스크린 리더기가 활성화 되어 있지 않습니다";}}

4. 이 콘텐츠를 실행을 하면 플래시 콘텐츠가 시작이 되고 나서 setTimeout 함수에 의해 1초 뒤에 init() 함수가 호출이 됩니다. init 함수의 내용에 의해 스크린 리더기의 활성화 여부에 따라 텍스트 영역에는 각각의 다른 텍스트 내용이 표기가 됩니다. 1초라는 시간 차를 두어 플래시 플레이어와 플래시 콘텐츠간의 비 동기 통신이 완료될 수 있도록 보장합니다.

5. 스크린 리더기 활성 여부에 따라 아래 그림들과 같이 각각의 다른 결과를 보여줍니다.

그림 70 스크린 리더기가 실행되지 않은 상태의 결과

160 / 307

6. 참고 자료

그림 71 스크린 리더기가 실행된 상태의 결과

1.22.4 KWCAG 2.0 관련 항목• 1.3(명료성) 콘텐츠는 명확하게 전달되어야 한다.

∘ 1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.

1.23 스크린 리더를 감지하여 자동으로 재생하는 소리를 정지1.23.1 설명

이 장은 “4.14 스크린 리더기의 사용 감지 ” 장의 내용을 응용합니다. 이 장의 목적은 스크린 리더기를 사용하는 사람들이 페이지에 접근하였을 때 플래시 안의 소리가 자동으로 재생되지 않도록 하는 것입니다.

배경음악과 같이 페이지가 로드 되었을 때 자동으로 재생되는 소리를 포함하고 있는 서비스들이 있을 수 있습니다. 스크린 리더기와 같은 보조도구를 사용하는 사용자들은 소리에 의존하여 웹 페이지를 탐색하게 되는데, 예상치 않은 소리(음악, 효과음 등)가 들린다면 웹 페이지를 탐색하는 데 방해를 받을 것이고, 스크린 리더기의 사용을 어렵게 하며, 소리를 끌 수 있는 컨트롤을 찾기 위한 노력을 해야 합니다.

반면에 배경음악과 같은 소리를 수동으로 재생하도록 되어 있다면, 스크린 리더기를 사용하지 않는 사용자는 매번 재생 버튼을 선택해야 할 것입니다.

스크린 리더기의 사용 여부에 따른 두 가지 상황을 모두 만족을 시키기 위해서 플래시의 Accessibility.active 속성을 사용하여 스크린 리더기의 사용 여부에 따라 기능과 UI 의 상태를 각각 상황에 맞게 적용시킬 수 있습니다.

단, 모든 스크린 리더기가 이러한 메커니즘을 통해 감지되는 것은 아닙니다. 플래시 플레이어는 MSAA 클라이언트로 플래시의 접근성을 적용할 수 있는 환경에 한해서 적용됩니다.

1.23.2 플래시 저작도구를 사용하여 스크린 리더기를 감지하여 자동으로 재생하는 소리를 정지하기플래시 저작도구를 사용하여 스크린 리더기를 감지한 후 스크린 리더기의 활성화 유무를 판단하여 자동으로 소리를 재생하거나 정지하도록 분기를 하는 기능이 있는 어플리케이션을 제작할 수 있습니다. flash.system.Capabilities.hasAccessibility 속성으로 시스템이 보조 도구를 사용할 수 있는지를 확인하고, Accessibility.active 속성을 사용하여 스크린 리더기가 현재 활성화 되어 있는지를 확인합니다.1. 예제 파일 : FLAccessibilityDetectSoundControll.fla, FLAccessibilityDetectSoundControll.as2. 컴포넌트 패널에서 Button 컴포넌트와 Label 컴포넌트를 라이브러리 패널에 넣습니다.

161 / 307

6. 참고 자료

그림 72 Button, Label 컴포넌트 사용

3. FLAccessibilityDetectSoundContoll.as 를 FLAccessibilityDetectSoundControl.fla 의 도큐먼트 클래스로 설정합니다.

그림 73 도큐먼트 클래스 설정

4. FLAccessibilityDetectSoundControll.as 에 다음 코드를 작성합니다.

package{import fl.accessibility.ButtonAccImpl;import fl.controls.Button;import fl.controls.Label;

import flash.accessibility.Accessibility;import flash.display.Sprite;import flash.events.MouseEvent;import flash.globalization.LastOperationStatus;import flash.media.Sound;import flash.media.SoundChannel;import flash.net.URLRequest;

162 / 307

6. 참고 자료

import flash.system.Capabilities;

public class FLAccessibilityDetectSoundControll extends Sprite{

private static const PLAY_SOUND:String = "Play Sound.";private static const STOP_SOUND:String = "Stop Sound.";private static const ACTIVE_SCREEN_READER:String = "스크린 리더기가 감지 되었습니다.

소리는 재생되지 않을 것입니다.";private static const DEACTIVE_SCREEN_READER:String = "스크린 리더기가 감지되지

않았습니다. 소리는 재생됩니다.";

private var button:Button;private var statusLabel:Label;private var sound:Sound;private var chennel:SoundChannel;private var request:URLRequest;private var soundURL:String =

"http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3";

/** * Constructor */public function FLAccessibilityDetectSoundControll(){

// Button 컴포넌트에 대한 접근성 활성화ButtonAccImpl.enableAccessibility();

sound = new Sound();chennel = new SoundChannel();request = new URLRequest(soundURL);

// 사운드 로드sound.load(request);

createButton();createStatusLabel();

controllSoundStatus();}

/** * @private * 버튼 생성하는 메소드 */protected function createButton():void{

button = new Button();button.move(10, 10);button.tabIndex = 1;button.addEventListener(MouseEvent.CLICK, buttonClickHandler);addChild(button);

}

/**

163 / 307

6. 참고 자료

* @private * 상태를 표기하는 라벨 생성하는 메소드 */protected function createStatusLabel():void{

statusLabel = new Label();statusLabel.autoSize = "left";statusLabel.x = 10;statusLabel.y = 40;statusLabel.tabIndex = 2;addChild(statusLabel);

}

/** * @private * 스크린 리더기의 사용유무에 따라 소리의 자동 재생을 컨트롤 하는 메소드 */protected function controllSoundStatus():void{

// 시스템에서 보조 도구를 사용할 수 있는 환경일 경우if (Capabilities.hasAccessibility){

// 스크린 리더기가 활성화 되어 있는 경우if (Accessibility.active){

button.label = PLAY_SOUND;statusLabel.text = ACTIVE_SCREEN_READER;

}else{

chennel = sound.play();button.label = STOP_SOUND;statusLabel.text = DEACTIVE_SCREEN_READER;

}}else{

chennel = sound.play();button.label = STOP_SOUND;statusLabel.text = DEACTIVE_SCREEN_READER;

}}

/** * @private * 버튼을 클릭하면 실행되는 이벤트 핸들러 */protected function buttonClickHandler(event:MouseEvent):void{

if (button.label == STOP_SOUND){

button.label = PLAY_SOUND;chennel.stop();

}else if (button.label == PLAY_SOUND){

164 / 307

6. 참고 자료

button.label = STOP_SOUND;chennel = sound.play();

}


}}

5. 스크린 리더기의 실행 여부에 따라 소리의 자동 재생 여부가 결정이 되고 아래 그림과 같이 각각 다른 결과를 보이게 됩니다.

그림 74 스크린 리더기를 사용했을 때


1.23.3 Flex 에서 스크린 리더기를 감지하여 자동으로 재생하는 소리를 정지하기스크린 리더기의 감지는 플래시 저작도구나 Flex 나 동일한 방법을 사용합니다. flash.system.Capabilities.hasAccessibility 속성으로 시스템이 보조 도구를 사용할 수 있는지를 확인하고, Accessiblity.active 속성을 사용하여 스크린 리더기가 활성화 되어 있는지를 확인합니다.1. 예제 파일 : AccessibilityDetectSoundControll.mxml2. 사운드를 동적으로 로드를 하고, 스크린 리더기를 감지하여 스크린 리더기의 활성화 여부에 따라 버튼과 상태를 나타내는

텍스트를 각각 다르게 표현합니다.3. 스크린 리더기를 사용하지 않고 있을 때에는 자동으로 소리가 재생되지만, 스크린 리더기를 사용 중이라면 자동으로 소리를

재생하지 않습니다.4. 소스 코드


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="applicationCompleteHandler(event)" minWidth="955" minHeight="600">

<s:layout><s:VerticalLayout paddingTop="20" paddingLeft="20"/>

</s:layout>



private static const PLAY_SOUND:String = "Play Sound.";private static const STOP_SOUND:String = "Stop Sound.";private static const ACTIVE_SCREEN_READER:String = "스크린 리더기가 감지

되었습니다. 소리는 재생되지 않을 것입니다.";

165 / 307

6. 참고 자료

private static const DEACTIVE_SCREEN_READER:String = "스크린 리더기가 감지되지 않았습니다. 소리는 재생됩니다.";

private var sound:Sound;private var chennel:SoundChannel;private var request:URLRequest;private var soundURL:String =

"http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3";

protected function applicationCompleteHandler(event:FlexEvent):void{

sound = new Sound();chennel = new SoundChannel();request = new URLRequest(soundURL);sound.load(request);

// 시스템이 접근성 보조 도구와의 통신을 지원하는 경우if (Capabilities.hasAccessibility){

// 스크린 리더기가 감지되었을 때if (Accessibility.active){

setStopSoundStatus();}else{

chennel = sound.play();setPlaySoundStatus();

}}else{

chennel = sound.play();setPlaySoundStatus();

}

}

private function setPlaySoundStatus():void{

soundControllButton.label = STOP_SOUND;statusLabel.text = DEACTIVE_SCREEN_READER;

}

private function setStopSoundStatus():void{

soundControllButton.label = PLAY_SOUND;statusLabel.text = ACTIVE_SCREEN_READER;

}

protected function soundControllButtonClickHandler(event:MouseEvent):void{

if (soundControllButton.label == STOP_SOUND){

chennel.stop();soundControllButton.label = PLAY_SOUND;

166 / 307

6. 참고 자료

}else if (soundControllButton.label == PLAY_SOUND){

chennel = sound.play();soundControllButton.label = STOP_SOUND;

}


]]></fx:Script>

<s:Button id="soundControllButton" label="Stop Sound." click="soundControllButtonClickHandler(event)" tabIndex="1"/>

<s:Label id="statusLabel" width="100%" tabEnabled="true" tabIndex="2"/>

</s:Application>

5. 실행 결과

그림 76 스크린 리더기를 사용하지 않을 때



∘ 1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.

1.24 시간 제한이 있는 콘텐츠의 경우 사용자에게 안내1.24.1 설명

스크린 리더기와 같은 보조 도구를 사용하는 사용자들은 비장애인에 비해 양식(Form)을 완성하거나 특정한 인터렉션을 완성하는 속도가 늦을 수 있습니다. 만약, 어떠한 인터렉션을 요구하는 데 있어 시간 제한이 있는 콘텐츠의 경우 사용자에게 남은 시간을 알려주고 좀더 시간을 연장할 수 있는 기능을 제공할 필요가 있습니다.

예를 들어, 시간 제한에 임박하기 전, 사용자에게 좀 더 시간이 필요한지를 묻는 다이얼로그를 띄울 수 있습니다. 사용자가 수락을 하면 제한된 시간이 지정된 시간만큼 시간 제한이 초기화 되고, 수락하지 않으면 시간 제한은 만료될 것입니다.

167 / 307

6. 참고 자료

이 장의 목적은 시간 제한이 있는 콘텐츠의 경우 시간 제한이 임박했을 때 사용자에게 시간 제한이 만료가 되어 간다는 안내와 함께 시간 연장을 묻는 다이얼로그를 띄우고, 수락을 하면 시간 연장을 할 수 있도록 합니다.

1.24.2 Flex 를 사용하여 시간 제한이 만료되어감을 안내하고 시간 제한을 연장이 예제에서는 setTimeout 함수를 사용하여 사용자가 텍스트 필드를 입력하고 있지 않은 경우, 일정 시간 내에 지정한 액션을 수행(시간 연장 안내 다이얼로그) 후, 사용자의 인터렉션에 따라 시간을 연장하거나, 제한 시간을 만료 시킵니다.

텍스트 필드에 입력을 하지 않는다면 60초의 시간 제한이 주어지고, 40초가 되는 때에, 시간을 연장할 것을 묻는 다이얼로그가 노출이 됩니다, 사용자의 승인에 여부에 따라 제한 시간을 다시 연장하거나, 주어진 제한 시간을 만료합니다.

이 예제에서는 편의를 위해 짧은 시간으로 테스트 하였습니다.1. 예제 파일 : IncreaseTimeLimit.mxml

그림 78 곧 세션이 종료됨을 알리고, 시간 연장을 할 수 있도록 하는 다이얼로그

168 / 307

6. 참고 자료

그림 79 제한 시간 60초 후 세션이 완전히 종료됨을 알리는 다이얼로그

2. 소스 코드


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" fontFamily="NanumGothic" applicationComplete="applicationCompleteHandler(event)" width="550" height="600">

<s:layout><s:VerticalLayout paddingTop="20"

paddingBottom="20" paddingLeft="20" paddingRight="20"/>

</s:layout>


import flash.utils.clearTimeout;import flash.utils.setTimeout;

import mx.controls.Alert;import mx.events.CloseEvent;import mx.events.FlexEvent;import mx.managers.PopUpManager;

169 / 307

6. 참고 자료

import spark.events.TextOperationEvent;

[Bindable]private var notice:String = "아래의 텍스트 입력 필드에서 아무런 인터렉션이 없다면,

60초 후에 세션이 종료가 됩니다. \n40초 후 세션 종료를 알리는 다이얼로그가 노출이 되고, 이 창에서 세션 종료 시간을 연장할 수 있습니다.";

private var sessionTimeoutID:uint;private var sessionNotificationTimeoutID:uint;private var timeLimit:int = 60000;private var sessionWarningAlert:Alert;private var sessionExpireAlert:Alert;

/** * @private * 어플리케이션이 생성 완료가 되면 실행되는 이벤트 핸들러 */protected function applicationCompleteHandler(event:FlexEvent):void{

resetTimeout();}

/** * @private * 시간제한을 리셋하는 메소드 */protected function resetTimeout():void{

clearTimeout(sessionTimeoutID);clearTimeout(sessionNotificationTimeoutID);

// 세션이 완전히 종료되는 시간 제한 설정sessionTimeoutID = setTimeout(expireTimeLimit, timeLimit);// 세션이 종료되기 전의 타이머 설정sessionNotificationTimeoutID = setTimeout(showTimeoutWarningAlert,

timeLimit -20000);

}

/** * @private * 세션이 종료되기 전, 종료가 됨을 알리는 다이얼로그 생성 */private function showTimeoutWarningAlert():void{

// 세션 종료 예고 다이얼로그가 이미 있다면 다이얼로그를 뛰우지 않음if (sessionExpireAlert)

return;

sessionWarningAlert = Alert.show("세션 종료 시간을 연장하려면 YES 버튼을 클릭하세요.",

"세션이 곧 만료됩니다.", Alert.YES|Alert.NO, null,

170 / 307

6. 참고 자료

alertClickHandler);}

private function expireTimeLimit():void{

// 세션 종료 예고 다이얼로그가 있다면, 다이얼로그 삭제if (sessionWarningAlert){

PopUpManager.removePopUp(sessionWarningAlert);sessionWarningAlert = null;

}

sessionExpireAlert = Alert.show("세션이 종료 되었습니다.", "세션 종료");

textArea.enabled = false;}

/** * @private * 세션의 종료 예정을 알리는 다이얼로그로 부터 응답을 받으면 실행되는 메소드 */private function alertClickHandler(event:CloseEvent):void{

// 사용자가 세션 종료 연장을 요청하면 타이머를 다시 초기화 합니다.if (event.detail == Alert.YES){

resetTimeout();}

sessionWarningAlert = null;}

/** * @private * 텍스트 영역에서 사용자가 타이핑을 하고 있을 때 실행되는 이벤트 핸들러 */protected function textAreaChangeHandler(event:TextOperationEvent):void{

resetTimeout();}

]]></fx:Script>

<mx:Text id="noticeText" width="100%" fontFamily="NanumGothic" fontSize="20" text="{notice}"/>

<s:TextArea id="textArea"width="100%"height="300"fontSize="16"change="textAreaChangeHandler(event)"/>

</s:Application>

171 / 307

6. 참고 자료

1.24.3 KWCAG 2.0 관련 항목• 2.2(충분한 시간 제공) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.

∘ 2.2.1(응답 시간 조절) 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다.

1.25 읽는 순서가 논리적으로 보장된 메뉴 구조의 제작1.25.1 설명

웹사이트의 구조를 설명하는 메뉴(내비게이션)는 구조화 된 사이트를 보다 빠르고 쉽게 탐색할 수 있도록 하위 메뉴를 가지기도 합니다. 상위 메뉴에서 마우스를 롤 오버 하거나 클릭을 하면 하위 메뉴가 레이어 또는 아코디언 UI 형태로 노출되는 형태가 많습니다. 웹 사이트의 메뉴 구조는 사이트를 이용하기 위한 진입점과 같은 요소이기 때문에 마우스뿐만 아니라 키보드를 사용하여 이용할 수 있어야 하며, 스크린 리더기와 같은 보조 도구를 이용하는 사용자들도 문서의 구조를 이해하고 쉽게 접근할 수 있도록 만들어져야 합니다.

이 장의 목표는 상위 메뉴에서 롤 오버 또는 포커스를 받게 되었을 때 하위 메뉴를 노출하는 메뉴 구조에서 논리적인 순서로 메뉴의 구조를 탐색할 수 있게 하는 방법을 알아봅니다.

1.25.2 플래시 저작 도구를 사용하여 논리적으로 읽는 순서가 보장된 메뉴 구조의 제작

그림 80 상위 메뉴에 롤 오버 하거나 상위 메뉴가 포커스를 받았을 때 하위 메뉴를 보여주는 내비게이션 구조

1. 예제 파일 : 17_NavigationStructureTabIndex.fla2. 이 예제는 “ 4.8.2 Adobe Flash Professional 의 Accessibility 패널 ( 액세스 가능성 패널 ) 을 사용 ” 에서 사용한 예제 파일을

사용하였습니다.3. 읽는 순서를 논리적으로 보장하려면 flash.display.InteractiveObject 객체의 tabIndex 속성을 사용해야 합니다. tabIndex

속성은 Tab 키를 누를 때 포커스의 이동 순서를 의미하며, 1 부터 시작하는 정수를 사용합니다. 순서는 반드시 숫자의

순서대로일 필요는 없으며, 작은 수에서부터 큰 수의 순서로 이동합니다.4. 상위 메뉴 버튼의 tabIndex 속성은 100, 200, 300, ... 의 단위로 주고, 하위 메뉴 버튼은 상위 메뉴 버튼의 tabIndex 의

속성과 연관을 지어서 101, 102, 103,... , 201, 202, 203, ... 의 방식으로 설정할 수 있습니다. 이렇게 tabIndex 를

설정하면, 상위 메뉴가 포커스를 받아 하위 메뉴를 표시하면 자연스럽게 하위 메뉴의 버튼들도 Tab 키를 사용하여 읽을 수

있게 됩니다.

172 / 307

6. 참고 자료

그림 81 논리적으로 메뉴 구조를 탐색할 수 있도록 tabIndex 의 설정

5. 서브 메뉴를 포함하는 컨테이너 역할을 할 무비 클립 객체를 만들고 그 안에 서브 메뉴 버튼들을 배치합니다.

그림 82 제품 버튼과 스토어 버튼에 해당하는 각각의 하위 메뉴 레이어

6. Accessibility(액세스가능성) 패널을 사용하여 상위 메뉴 각각의 버튼 요소에 접근성 정보인 name 과 tabIndex 속성을

설정합니다.

173 / 307

6. 참고 자료

그림 83 상위 메뉴에 대한 접근성 속성 설정

객체 인스턴스 네임 접근성 이름 탭 인덱스

어도비 홈 버튼 adobeHome 어도비 한국 홈 1

제품 버튼 productButton 제품 100

솔루션 버튼 solutionButton 솔루션 200

학습 버튼 learnButton 학습 300

도움말 버튼 helpButton 도움말 400

다운로드 버튼 downloadButton 다운로드 500

회사 버튼 companyButton 회사 600

스토어 버튼 storeButton 스토어 700

7. Accessibility(액세스가능성) 패널을 사용하여 서브 메뉴 패널에 대한 접근성 정보를 설정합니다. 레이어로 사용되는 패널

자체에는 접근할 필요가 없기 때문에 접근성 정보(name, tabIndex 등)를 설정하지 않습니다. 단, 패널 안에 있는 버튼들은

접근 가능하게 만들어야 하기 때문에 컨테이너 역할을 하는 패널에 대해서는 “객체를 액세스 가능하게 만들기”와 “자식 객체

액세스 가능” 체크 상자에 체크를 해주어야 합니다.

174 / 307

6. 참고 자료

그림 84 하위 메뉴 패널에 대한 접근성 정보 설정


제품 메뉴의 하위 메뉴 패널 subMenuPanel01 없음 없음

스토어 메뉴의 하위 메뉴 패널 subMenuPanel02 없음 없음

8. Accessibility(액세스가능성) 패널을 사용하여 하위 메뉴 패널 안의 각각의 버튼에 대한 접근성 정보인 name 과 tabIndex 속성을 설정합니다.

그림 85 제품 메뉴의 하위 메뉴 패널 안의 버튼들에 대한 접근성 정보 설정

175 / 307

6. 참고 자료


Creative Suite 버튼 creativeSuiteButton 크리에이티브 스위트 101

Photoshop 버튼 photoshopButton 포토샵 102

Acrobat 제품군 버튼 acrobatProductButton 아크로뱃 제품군 103

Flash Platform 버튼 flashPlatformButton 플래시 플랫폼 104

Online Marketing Suite 버튼 onlineMarketingSuiteButton 온라인 마케팅 스위트 105

Digital Enterprise Platform 버튼 digitalEnterprisePlatformButton 디지털 엔터프라이즈 플랫폼 106

Digital Publishing Suite 버튼 digitalPublishingSuiteButton 디지털 퍼블리싱 스위트 107

기타 제품 버튼 etcProductButton 기타 제품 108

그림 86 스토어 메뉴의 하위 메뉴 패널 안의 버튼들에 대한 접근성 정보 설정


Adobe 스토어 버튼 adobeStoreButton 어도비 스토어 – 가정 및 소호 사무실 701

교육용 제품 스토어 버튼 educationProductStore 교육용 제품 스토어 – 학생, 교육자 및 교직원 702

기업용 제품 스토어 버튼 corpProductStore 기업용 제품 스토어 – 중견중소기업 703

기타 구입 방법 버튼 etcBuyButton 기타 구입 방법 704

9. 타임라인의 키 프레임에 다음과 같은 코드를 작성합니다.

import flash.events.FocusEvent;import flash.display.InteractiveObject;import flash.events.MouseEvent;import flash.display.DisplayObject;import flash.events.Event;import flash.display.Sprite;import flash.display.Stage;

176 / 307

6. 참고 자료

// 상위 메뉴 버튼 목록var mainMenus:Array = [adobeHome,

productButton, solutionButton, learnButton, helpButton, downloadButton, companyButton, storeButton ];

// 하위 메뉴 패널 목록var subMenus:Array = [subMenuPanel01, subMenuPanel07];

hideAllSubMenu();

for (var i:int = 0; i < mainMenus.length; i++){(mainMenus[i] as InteractiveObject).addEventListener(FocusEvent.FOCUS_IN, focusInHandler);(mainMenus[i] as InteractiveObject).addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);}

backgroundClip.addEventListener(FocusEvent.FOCUS_IN, hideAllSubMenu);this.stage.addEventListener(MouseEvent.CLICK, hideAllSubMenu);

// 모든 하위 메뉴들을 시각적으로 보이지 않게 하는 함수function hideAllSubMenu(event:Event=null):void{for (var i:int = 0; i < subMenus.length; i++){

(subMenus[i] as DisplayObject).visible = false;}

}

// 선택한 상위 메뉴에 대한 하위 메뉴를 보여주는 함수function showSubMenu(interactiveObject:InteractiveObject):void{if (interactiveObject.name == "productButton"){

subMenuPanel01.visible = true;subMenuPanel07.visible = false;

}

if (interactiveObject.name == "storeButton"){

subMenuPanel01.visible = false;subMenuPanel07.visible = true;

}}

// 상위 메뉴 버튼이 포커스를 받으면 실행하는 이벤트 핸들러function focusInHandler(event:FocusEvent):void{

177 / 307

6. 참고 자료

hideAllSubMenu();showSubMenu(event.currentTarget as InteractiveObject);}

// 상위 메뉴 버튼에 롤 오버 되었을 때 실행하는 이벤트 핸들러function rollOverHandler(event:MouseEvent):void{showSubMenu(event.currentTarget as InteractiveObject);}

이 예제에서 주의해야 할 것은 시각적으로 보이지 않는 객체(visible 속성이 false 인 경우)는 tabIndex 를 가지고 있더라도 화면에 표시되기 전까지 탭 순서에 영향을 주지 않습니다.


∘ 1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.• 2.1(키보드 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다.

∘ 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.• 3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.

∘ 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.

1.26 복잡한 데이터를 포함하는 그래프나 차트의 설명1.26.1 설명

그래프나 차트는 복잡한 데이터의 구조를 간결하고 보기 쉽게 시각화 한 요소입니다. 스크린 리더기 사용자들이 이러한 그래프나 차트를 이해하게 하려면 이와 동등한 구조를 가지고 있는 데이터 테이블이 있는 링크를 제공하는 것이 좋습니다.

또는, 그래프나 차트를 단일 이미지처럼 취급 하고 대체 텍스트를 통해서 차트의 요약 정보를 설명할 수 있습니다. 또한, 스크린 리더기 사용자들에게 전달해야 할 내용은 차트의 데이터들에 대한 요약이지 범례나 축과 레이블 대한 요약을 설명할 필요는 없습니다. 그렇기 때문에, 스크린 리더기가 차트 내부의 객체에 접근하지 않도록 접근성 속성을 설정해야 합니다.

178 / 307

6. 참고 자료

1.26.2 Flex 의 차트 컴포넌트로 제작한 차트의 요약 정보 제공

그림 87 플렉스의 ColumnChart 컴포넌트

1. 예제 파일 : AccessibilityChart.mxml2. 데이터를 어떻게 읽을 것인지를 결정합니다. 이 예제에서는 “2004~2006 1 분기 이익 : 2004 년 - 1 월 : 2692, 2 월 :

2750, 3 월 : 1000, 2005 년 - 1 월 : 1945, 2 월 : 1911, 3 월 : 2524, 2006 년 - 1 월 : 2730, 2 월 : 2239, 3 월 : 2564,”의 형태로 읽을 것입니다.

3. 차트 안에는 스크린 리더기가 접근할 수 있는 텍스트나 상호작용을 하는 요소들이 포함되어 있습니다. 차트 안의 자식 객체에

접근할 수 없도록 flash.accessibility.AccessibilityProperties.forceSimple 속성을 사용하여 차트의 접근성 속성을

설정합니다.4. 읽을 필요가 없는 요소를 선정합니다. 이 예제에서는 차트를 읽을 때 차트의 제목과 범례를 함께 읽어 주기 때문에 차트

요소와 분리되어 있는 요소인 차트 제목과 범례를 읽지 않도록 설정합니다. flash.accessibility.AccessibilityProperties.silent 속성이나 플렉스의 mx.core.UICompoenent.accessibilityEnabled 값을 사용하여 설정할 수 있습니다.

5. 소스 코드

<?xml version="1.0"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"

179 / 307

6. 참고 자료

applicationComplete="applicationCompleteHandler(event)"fontFamily="NanumGothic" fontSize="12"width="950" height="600">


import mx.collections.ArrayCollection;import mx.events.FlexEvent;

// 차트에 바인딩할 데이터[Bindable]public var data01:ArrayCollection;[Bindable]public var data02:ArrayCollection;[Bindable]public var data03:ArrayCollection;

/** * @private * 지정한 범위내에서 랜덤한 정수를 반환하는 메소드 */protected function generateRandomInt(minNum:Number, maxNum:Number):Number{

return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);

}

/** * @private * 차트용 데이터를 생성하는 메소드 */protected function createChartData():ArrayCollection{

var dataAC:ArrayCollection = new ArrayCollection();for (var i:int = 0; i < 3; i++){

var obj:Object = {};obj.Month = (i + 1) + "월";obj.Profit = generateRandomInt(1000, 3000);

dataAC.addItem(obj);}

return dataAC;}

/** * @private * 차트에 대한 접근성 정보를 업데이트 하는 메소드 */protected function updateChartAccessibilityProp():void{

var chartAccessibiltiyProperties:AccessibilityProperties;

if (!myChart.accessibilityProperties)

180 / 307

6. 참고 자료

chartAccessibiltiyProperties = new AccessibilityProperties();

elsechartAccessibiltiyProperties =

myChart.accessibilityProperties;

// 차트의 정보 요약을 설명할 내용을 만듭니다.var chartInfo:String = "2004~2006 1분기 이익 : ";var series:Array = myChart.series;for (var i:int = 0; i < series.length; i++){

chartInfo += (series[i] as ColumnSeries).displayName + " - ";

for (var j:int = 0; j < ArrayCollection((series[i] as ColumnSeries).dataProvider).length; j++)

{chartInfo += ((series[i] as

ColumnSeries).dataProvider as ArrayCollection).getItemAt(j).Month + " : " + ((series[i] as

ColumnSeries).dataProvider as ArrayCollection).getItemAt(j).Profit + ", ";

}

}

trace(chartInfo);

// 차트 내부의 자식 객체로 접근할 수 없도록 설정합니다.chartAccessibiltiyProperties.forceSimple = true;

// 스크린 리더기에서 다음의 형태로 차트를 읽습니다.// 2004~2006 1분기 이익 : 2004년 - 1월 : 2692, 2월 : 2750, 3월 :

1000, // 2005년 - 1월 : 1945, 2월 : 1911, 3월 : 2524, // 2006년 - 1월 : 2730, 2월 : 2239, 3월 : 2564, chartAccessibiltiyProperties.name = chartInfo;


/** * @private * 데이터 생성 버튼을 클릭하면 실행되는 이벤트 핸들러 */protected function changeDataButtonClickHandler(event:MouseEvent):void{

data01 = createChartData();data02 = createChartData();data03 = createChartData();updateChartAccessibilityProp();

}

/**

181 / 307

6. 참고 자료

* @protected * 어플리케이션 생성이 완료되었을 때 실행되는 이벤트 핸들러 */protected function applicationCompleteHandler(event:FlexEvent):void{

// 차트에 대한 데이터 생성 및 접근성 정보 업데이트data01 = createChartData();data02 = createChartData();data03 = createChartData();updateChartAccessibilityProp();

}

]]></fx:Script>


horizontalAlign="center"/></s:layout>

<s:Button id="changeDataButton" label="데이터 생성" tabIndex="1" click="changeDataButtonClickHandler(event)"/>

<s:VGroup><mx:Text id="chartTitle"

text="2004~2006 1분기 이익" fontWeight="bold" accessibilityEnabled="false"/>

<mx:ColumnChart id="myChart" showDataTips="true"tabIndex="2"fontFamily="NanumGothic" fontSize="12">

<mx:horizontalAxis><mx:CategoryAxis dataProvider="{data01}" categoryField="Month"/>

</mx:horizontalAxis><mx:series>

<mx:ColumnSeries dataProvider="{data01}" yField="Profit"xField="Month" displayName="2004년"/>



182 / 307

6. 참고 자료

</mx:series></mx:ColumnChart><mx:Legend dataProvider="{myChart}"

direction="horizontal" accessibilityEnabled="false"/>

</s:VGroup></s:Application>

6. 스크린 리더기로 접근을 하면 차트의 내용을 “2004~2006 1 분기 이익 : 2004 년 - 1 월 : 2692, 2 월 : 2750, 3 월 : 1000, 2005 년 - 1 월 : 1945, 2 월 : 1911, 3 월 : 2524, 2006 년 - 1 월 : 2730, 2 월 : 2239, 3 월 : 2564,”의

형태로 읽습니다.7. 차트의 데이터가 런타임상에서 변경될 때, 변경 된 값을 스크린 리더기로 통지하기 위해 Accessibility.updateProperties()

메소드를 호출합니다. 탭을 이용하여 “데이터 생성” 버튼으로 이동하여 버튼을 클릭(Space 키)하면 차트의 데이터가 런타임

상에서 변경이 됩니다. 그리고, 탭을 이용하여 다시 차트로 이동하면, 스크린 리더기는 변경된 차트의 내용을 읽을 것입니다.


∘ 1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

1.27 색상 정보에 의존하지 않는 차트1.27.1 설명

색상으로만 정보를 제공하려 하는 경우 색을 구분하지 못하는 사람(색맹)들은 정보를 제공받기가 어렵습니다. 실제로 색상은 사용자에게 주의를 끌기 위한 정보를 표현할 때, 또는 데이터 간의 그룹을 표현할 때 매우 효과적인 요소입니다. 하지만 접근성 있는 어플리케이션에서는 색상 한 가지가 정보를 소통하기 위한 도구로 사용되어서는 안됩니다.

예를 들어, 신호등에서는 붉은색은 정지, 녹색은 주행이라는 의미로 사용되지만, 색을 구분할 수 없는 사람들은 신호등이 지시하는 신호의 의미를 구분할 수 없습니다.

마찬가지로 플래시 어플리케이션에서 행동에 대한 지시, 즉각적인 반응, 시각적인 요소의 식별, 선택 그리고 에러의 표현 등과 같은 경우에, 색상이라는 한 가지만으로 의미를 전달하거나 정보를 소통하기 위해 사용하지 말아야 합니다.

1.27.2 Flex 의 ColumnChart 의 Custom ItemRenderer 제작차트의 경우 단순히 색상으로 차트의 시리즈들을 구분하는 경우가 많습니다. 이런 경우 색을 구분할 수 없는 사람들은 차트의 정보들을 구분하기가 어려울 것입니다. (차트를 흑백 프린터로 출력하거나 흑백 모니터에서 봤을 때와 유사합니다)

그림 89 에서 차트의 색상 정보를 제거했을 때, 범례와 차트의 막대를 구분하기가 어렵다는 것을 확인할 수 있습니다.

183 / 307

6. 참고 자료

그림 88 색상 정보를 제거했을 때의 차트의 모습

이 장에서는 “ 4.18 복잡한 데이터를 포함하는 그래프나 차트의 설명 ” 에서 만든 차트의 막대를 색상뿐만 아니라 무늬가 있는 패턴을 사용하여 색을 구분할 수 없는 사람들도 차트의 내용을 확인할 수 있도록 개선합니다.1. 예제 파일

a. AccessibilityChartPattern.mxmlb. asserts 폴더 안에 있는 패턴용 이미지

2. 포토샵과 같은 이미지 저작 도구를 사용하여 차트의 막대에서 표현할 패턴 이미지를 제작하고 프로젝트의 assets 폴더에

저장합니다.

그림 89 ColumnChart 의 ItemRenderer 에서 사용할 패턴 이미지

3. BitmapFill 클래스와 SolidColorStroke 클래스를 사용하여 막대에 적용할 패턴과 라인을 만듭니다.4. 소스 코드

<?xml version="1.0"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"initialize="initializeHandler(event)"applicationComplete="applicationCompleteHandler(event)"fontFamily="NanumGothic" fontSize="12"

184 / 307

6. 참고 자료

width="950" height="600">


import mx.collections.ArrayCollection;import mx.events.FlexEvent;import mx.graphics.BitmapFill;import mx.graphics.BitmapFillMode;import mx.graphics.SolidColorStroke;import mx.graphics.Stroke;

// 차트에 바인딩할 데이터[Bindable]public var data01:ArrayCollection;[Bindable]public var data02:ArrayCollection;[Bindable]public var data03:ArrayCollection;

// 차트 막대에 사용할 이미지 패턴[Embed(source="/../assets/diagonalLinePattern.png")]private var diagonalLinePattern:Class;[Embed(source="/../assets/horizontalLinePattern.png")]private var horizontalLinePattern:Class;[Embed(source="/../assets/verticalLinePattern.png")]private var verticalLinePattern:Class;

// 사선 패턴을 적용할 렌더러에 사용할 리소스[Bindable]private var diagonalLinePatternColor:BitmapFill;[Bindable]private var diagonalLinePatternStroke:SolidColorStroke;

// 가로방향 패턴을 적용할 렌더러에 사용할 리소스[Bindable]private var horizontalLinePatternColor:BitmapFill;[Bindable]private var horizontalLinePatternStroke:SolidColorStroke;

// 세로방향 패턴을 적용할 렌더러에 사용할 리소스[Bindable]private var verticalLinePatternColor:BitmapFill;[Bindable]private var verticalLinePatternStroke:SolidColorStroke;

/** * @private * 지정한 범위내에서 랜덤한 정수를 반환하는 메소드 */protected function generateRandomInt(minNum:Number, maxNum:Number):Number{

return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);

}

/**

185 / 307

6. 참고 자료

* @private * 차트용 데이터를 생성하는 메소드 */protected function createChartData():ArrayCollection{

var dataAC:ArrayCollection = new ArrayCollection();for (var i:int = 0; i < 3; i++){

var obj:Object = {};obj.Month = (i + 1) + "월";obj.Profit = generateRandomInt(1000, 3000);

dataAC.addItem(obj);}

return dataAC;}

/** * @private * 차트에 대한 접근성 정보를 업데이트 하는 메소드 */protected function updateChartAccessibilityProp():void{

var chartAccessibiltiyProperties:AccessibilityProperties;

if (!myChart.accessibilityProperties)chartAccessibiltiyProperties = new

AccessibilityProperties();else

chartAccessibiltiyProperties = myChart.accessibilityProperties;

// 차트의 정보 요약을 설명할 내용을 만듭니다.var chartInfo:String = "2004~2006 1분기 이익 : ";var series:Array = myChart.series;for (var i:int = 0; i < series.length; i++){

chartInfo += (series[i] as ColumnSeries).displayName + " - ";

for (var j:int = 0; j < ArrayCollection((series[i] as ColumnSeries).dataProvider).length; j++)

{chartInfo += ((series[i] as

ColumnSeries).dataProvider as ArrayCollection).getItemAt(j).Month+ " : "+ ((series[i] as ColumnSeries).dataProvider

as ArrayCollection).getItemAt(j).Profit+ ", ";

}

}

trace(chartInfo);

186 / 307

6. 참고 자료

// 차트 내부의 자식 객체로 접근할 수 없도록 설정합니다.chartAccessibiltiyProperties.forceSimple = true;

// 스크린 리더기에서 다음의 형태로 차트를 읽습니다.// 2004~2006 1분기 이익 : 2004년 - 1월 : 2692, 2월 : 2750, 3월 :

1000, // 2005년 - 1월 : 1945, 2월 : 1911, 3월 : 2524, // 2006년 - 1월 : 2730, 2월 : 2239, 3월 : 2564, chartAccessibiltiyProperties.name = chartInfo;


/** * @private * 데이터 생성 버튼을 클릭하면 실행되는 이벤트 핸들러 */protected function changeDataButtonClickHandler(event:MouseEvent):void{

data01 = createChartData();data02 = createChartData();data03 = createChartData();updateChartAccessibilityProp();

}

/** * @protected * 어플리케이션 생성이 완료되었을 때 실행되는 이벤트 핸들러 */protected function applicationCompleteHandler(event:FlexEvent):void{

// 차트에 대한 데이터 생성 및 접근성 정보 업데이트data01 = createChartData();data02 = createChartData();data03 = createChartData();updateChartAccessibilityProp();

}

/** * @private * 어플리케이션이 초기화 되면 실행되는 이벤트 핸들러 * 이 이벤트 핸들러에서 차트의 아이템 렌더러에서 사용할 패턴을 만듭니다. */protected function initializeHandler(event:FlexEvent):void{

// 사선 패턴에 적용할 아이템 렌더러에서 사용하는 BitmapFill과 SolidColorStroke생성

diagonalLinePatternColor = new BitmapFill();diagonalLinePatternColor.source = diagonalLinePattern;diagonalLinePatternColor.fillMode = BitmapFillMode.REPEAT;

diagonalLinePatternStroke = new SolidColorStroke(0x2FBF16, 1);

187 / 307

6. 참고 자료

// 가로방향 패턴에 적용할 아이템 렌더러에서 사용하는 BitmapFill과 SolidColorStroke생성

horizontalLinePatternColor = new BitmapFill();horizontalLinePatternColor.source = horizontalLinePattern;horizontalLinePatternColor.fillMode = BitmapFillMode.REPEAT;

horizontalLinePatternStroke = new SolidColorStroke(0xEA0000, 1);

// 세로방향 패턴에 적용할 아이템 렌더러에서 사용하는 BitmapFill과 SolidColorStroke생성

verticalLinePatternColor = new BitmapFill();verticalLinePatternColor.source = verticalLinePattern;verticalLinePatternColor.fillMode = BitmapFillMode.REPEAT;

verticalLinePatternStroke = new SolidColorStroke(0x1818DE, 1);

}

]]></fx:Script>


horizontalAlign="center"/></s:layout>

<s:Button id="changeDataButton" label="데이터 생성" tabIndex="1" click="changeDataButtonClickHandler(event)"/>

<s:VGroup><mx:Text id="chartTitle"

text="2004~2006 1분기 이익" fontWeight="bold" accessibilityEnabled="false"/>

<mx:ColumnChart id="myChart" showDataTips="true"tabIndex="2"fontFamily="NanumGothic" fontSize="12">

<mx:horizontalAxis><mx:CategoryAxis dataProvider="{data01}" categoryField="Month"/>

</mx:horizontalAxis><mx:series>

<mx:ColumnSeries dataProvider="{data01}" yField="Profit"xField="Month" fill="{diagonalLinePatternColor}"stroke="{diagonalLinePatternStroke}"displayName="2004년"/>

<mx:ColumnSeries

188 / 307

6. 참고 자료

dataProvider="{data02}" yField="Profit"xField="Month" fill="{horizontalLinePatternColor}"stroke="{horizontalLinePatternStroke}"displayName="2005년"/>

<mx:ColumnSeries dataProvider="{data03}" yField="Profit"xField="Month" fill="{verticalLinePatternColor}"stroke="{verticalLinePatternStroke}"displayName="2006년"/>

</mx:series></mx:ColumnChart><mx:Legend dataProvider="{myChart}"

direction="horizontal" accessibilityEnabled="false"/>

</s:VGroup></s:Application>

5. 실행 결과

189 / 307

6. 참고 자료

그림 90 패턴 이미지가 차트의 아이템 렌더러와 범례에 적용된 모습

6. 차트에서 색상 정보를 제거해도 패턴의 무늬로부터 차트의 정보를 구분할 수 있습니다.

190 / 307

6. 참고 자료

그림 91 패턴을 적용하였을 때, 색상 정보를 제거한 차트


∘ 1.3.1(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.∘ 1.3.2(명확한 지시 사항 제공) 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

1.28 폼(양식)에서 필수 요구사항 표현1.28.1 설명

폼(양식)에서 작성해야 하는 필드 중에는 필수적으로 입력해야 하는 필드와 선택적으로 입력할 수 있는 필드로 나뉘어집니다. 폼에서 정확하고 성공적인 데이터 제출을 위해서 필수적으로 제출해야 하는 필드가 있다면, 이러한 필드는 시각적으로 구분할 수 있도록 별도의 표시를 해주는 것이 좋습니다. 필수적으로 입력해야 하는 양식 필드에 별도의 표기가 없다면, 장애의 유무를 떠나 폼을 입력하는 과정에서 접근성뿐만 아니라 사용성 측면에서도 불편함을 느낄 수 있을 것입니다.

이 장의 목적은 정확한 폼 작성을 위해서 필수로 입력해야 하는 필드에 대해서는 시각적인 지표로써, 별표(* : asterisk)를 표기하고, 스크린 리더기가 폼 필드를 읽을 때 스크린 리더기가 인지할 수 있도록 접근성 정보에 “필수(Required)”라는 단어를 조합하도록 합니다.

191 / 307

6. 참고 자료

1.28.2 플래시 저작도구를 사용하여 폼 양식에 필수 요구사항 표기

그림 92 필수로 요구하는 폼 필드에는 시각적인 지표(*)와 접근성 정보에 필수임을 명시

1. 예제 파일 : 18_required_form.fla2. 폼 입력 필드에 명시적으로 접근성 정보를 설정하는 방식으로 제작하기 때문에, 플래시 문서의 전역적인 Auto Label(자동

레이블) 기능은 비활성화 하도록 합니다. 스테이지를 선택하고 Accessibility(액세스 가능성) 패널에서 자동 레이블 필드의

체크를 해제합니다.

그림 93 플래시 문서의 전역 속성인 자동 레이블 해제

3. “*표가 있는 항목은 필수 입력 사항입니다.” 라는 문장은 굳이 스크린 리더기에 노출할 필요는 없습니다. 이 안내 문장은

스크린 리더기를 사용하지 않는 사람들을 대상으로 하는 안내문이기 때문에 스크린 리더기에 의존하는 사용자에게는

불필요한 안내가 될 수 있습니다. 필수로 입력해야 할 필드에 대해서 접근성 속성 중 Name 속성에 필수 입력 여부를

제공하기 때문에 해당 문장을 스크린 리더기에서 숨길 것입니다. 문장을 무비 클립으로 만들고 스크린 리더기가 접근할 수

없도록 Accessibility(액세스 가능성) 패널에서 “객체를 액세스 가능하게 만들기” 필드의 체크를 해제합니다.

192 / 307

6. 참고 자료

그림 94 스크린 리더기와 같은 보조 도구가 접근할 수 없도록 숨김

4. 필수적으로 입력해야 할 폼 필드의 레이블에 별표(*)를 표시하고 각각의 입력 필드의 접근성 속성에 필수 여부에 대한 값을

지정합니다.

폼 요소 접근성 이름 탭 인덱스

이름* 이름(필수) 1

주소* 주소(필수) 2

전화번호 전화번호 3

메모 메모 4

확인 버튼 확인 5

취소 버튼 취소 6

그림 95 폼 필드에 폼 레이블과 필수 요구사항의 여부를 표기

193 / 307

6. 참고 자료

5. 스크린 리더기는 폼의 요소들에 대해서 다음과 같이 읽습니다.

폼 요소 설명

이름* 이름 괄호 열고 필수 괄호 닫고 편집상자 텍스트를 입력하세요

주소* 주소 괄호 열고 필수 괄호 닫고 편집상자 텍스트를 입력하세요

전화번호 전화번호 편집상자 텍스트를 입력하세요

메모 메모 편집상자 텍스트를 입력하세요

확인 버튼 확인 버튼

취소 버튼 취소 버튼

1.28.3 플렉스를 사용하여 폼 양식에 필수 요구사항 표기플렉스에서 제공하는 폼(Form)관련 컴포넌트는 플래시에서 제작한 폼 형태와 달리 좀더 구체적이고 체계화 된 구조를 제공합니다. 그 중 FormItem 컴포넌트의 required 속성을 사용하여 폼의 필드 값이 필수 요구 사항인지에 대해 시각적으로 표기할 수 있습니다.

하지만 required 속성은 시각적인 표현 방식을 설정할 뿐이며, 이 값을 true 로 설정해도 스크린 리더기가 읽을 때에는 해당 폼 필드가 필수 사항인지에 대한 여부를 음성으로 설명해주지 않습니다. 그렇기 때문에 FormItem 의 accessibilityName 속성에 명시적으로 폼의 필수 요구사항에 대한 여부를 작성해야 합니다.

그림 96 플렉스의 FormItem 컴포넌트의 required 속성을 사용하여 필수 요구사항 표기

1. 예제 파일 : AccessibilityRequiredForm.mxml

194 / 307

6. 참고 자료

2. 소스 코드


xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" fontFamily="NanumGothic">


</s:layout>


s|Form{

skinClass: ClassReference("spark.skins.spark.StackedFormSkin");}s|FormHeading{

skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");} s|FormItem{

skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");}

</fx:Style><mx:Text text="*표가 있는 항목은 필수 입력 사항입니다." accessibilityEnabled="false"/><s:Form width="500" backgroundColor="#EEEEEE" >

<s:FormHeading label="회원 가입 양식"/><s:FormItem label="이름" sequenceLabel="1." required="true" accessibilityName="이름

(필수)"><s:TextInput width="100%" tabIndex="1"/>

</s:FormItem><s:FormItem label="주소" sequenceLabel="2." required="true" accessibilityName="주소

(필수)"><s:TextInput width="100%" tabIndex="2"/>

</s:FormItem><s:FormItem label="전화번호" sequenceLabel="3.">

<s:TextInput width="100%" tabIndex="3"/></s:FormItem><s:FormItem label="메모" sequenceLabel="4.">

<s:TextArea width="100%" height="100" tabIndex="4"/></s:FormItem>

</s:Form><s:HGroup horizontalAlign="center" gap="10">

<s:Button id="submitButton" label="확인" tabIndex="5"/><s:Button id="cancelButton" label="취소" tabIndex="6"/>

</s:HGroup></s:Application>

3. 소스 코드 중 이름과 주소의 FormItem 컴포넌트의 영역에 required 속성 값을 true 로 설정하였습니다. 이 값을 true 로

설정하게 되면 폼 필드에 별표(*: asterisk) 기호가 표시됩니다.

195 / 307

6. 참고 자료

4. 스크린 리더기는 FormItem 의 label 속성을 자동으로 접근할 수 있는 이름값으로 읽을 수 있지만, required 와 같은

속성값은 자동으로 반영할 수 없습니다. 그렇기 때문에 명시적으로 accessibilityName 속성에 “이름(필수)”와 같이 필수

요구사항 여부를 작성해야 합니다.5. 스크린 리더기는 폼의 요소들에 대해서 다음과 같이 읽습니다.

폼 요소 설명

이름* 회원 가입 양식 이름 괄호 열고 필수 괄호 닫고 편집상자 텍스트를 입력하세요

주소* 회원 가입 양식 주소 괄호 열고 필수 괄호 닫고 편집상자 텍스트를 입력하세요

전화번호 회원 가입 양식 전화번호 편집상자 텍스트를 입력하세요

메모 회원 가입 양식 메모 편집상자 텍스트를 입력하세요

확인 버튼 확인 버튼

취소 버튼 취소 버튼


∘ 1.3.2(명확한 지시 사항 제공) 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.• 3.4(입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다

∘ 3.4.1(레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다.

1.29 비디오 콘텐츠에 자막 사용1.29.1 설명

플래시 MX 에서부터 동영상을 지원하기 시작하면서부터 웹 상에서 비디오는 상당히 중요한 콘텐츠의 영역으로 자리를 잡게 되었고, 비디오 콘텐츠의 보급 또한 급격하게 늘어났습니다. 그리고 이 러닝 콘텐츠의 90% 이상이 플래시 애니메이션 또는 플래시 동영상을 채택하고 있을 만큼 동영상과 같은 멀티미디어 콘텐츠는 콘텐츠로서의 중요한 가치를 가지고 있는 위치에 있습니다.

이 장의 목적은 청각 장애가 있거나, 소리를 듣는데 있어 어려움을 가지고 있는 사람(비단 장애를 가지고 있는 사람뿐만 아니라, 음성 출력이 어려운 환경에 있는 사람들도 포함합니다)들을 위해 영상과 동기화 된 자막을 제공 하는 데 있습니다.

자막은 크게 열린 자막(Open Caption)과 닫힌 캡션(Closed Caption)이 있는데, 열린 캡션은 영상 위에 항상 자막이 노출되어 있는 형태의 자막을 의미하고, 닫힌 캡션은 사용자의 선택(TV 의 경우 전용 어댑터의 설치 여부)에 따라 화면에 자막을 노출하거나 숨길 수 있는 형태의 자막을 의미합니다.

YouTube 나 TED 에서 서비스하는 비디오들의 경우 동영상 제어 영역에 CC(Closed Caption) 버튼을 두어 이 버튼의 선택에 따라 자막을 노출하거나 숨길 수 있도록 하는 기능을 제공하고 있습니다.

196 / 307

6. 참고 자료

그림 97 TED 의 동영상 서비스는 자원봉사자들의 집단지성을 활용하여 국가별 자막을 노출하는 플랫폼을 제공하고 있습니다.

그림 98 YouTube 의 자막 제공 서비스

플래시는 다양한 방법으로 자막을 제공할 수 있습니다. 프로그래밍 요소를 배제하여 키 프레임을 사용하여 타임라인에 기반한 정적인 자막을 제공할 수 있고, 외부에 분리된 자막 데이터를 ActionScript 를 사용하여 제공할 수 있습니다. 또한 플래시

197 / 307

6. 참고 자료

저작도구에서 제공하는 FLVPlayback 과 FLVPlaybackCaptioning 컴포넌트를 사용하여, W3C 표준 XML 형식인 TT(Timed Text) XML 을 사용하여 손쉽게 자막을 제공할 수 있습니다. 또한 Timed Text XML 의 스타일을 통해 자막과 자막 영역에 대한 폰트 스타일, 투명도 등을 설정할 수 있습니다.

Timed Text XML 에 대한 자세한 내용은 Adobe Flash Professional 도움말 과 ActionScript 3.0 Reference 의 Timed Text Tag 섹션 그리고 W3C 의 Timed Text Markup Language (TTML) 1.0 섹션 을 참고하시기 바랍니다.

1.29.2 플래시 저작도구에서 Timed Text XML, FLVPlayback 과 FLVPlaybackCaptioning 컴포넌트를 사용한 자막 구현

그림 99 자막을 지원하는 플래시 동영상 플레이어

1. 예제 파일 : ClosedCaptionVideo.fla, caption_video.flv, caption_video.xml2. MAGPie 나 텍스트 에디터와 같은 도구를 사용하여 자막으로 사용할 xml 기반의 Timed Text XML 을 작성합니다.

<?xml version="1.0" encoding="UTF-8"?><tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling"> <head> <styling> <style id="1" tts:textAlign="right"/> <style id="2" tts:color="transparent"/> <style id="3" style="2" tts:backgroundColor="white"/> <style id="4" style="2 3" tts:fontSize="20"/> </styling> </head> <body> <div xml:lang="en"> <p begin="00:00:00.00" dur="00:00:03.07">I had just joined <span tts:fontFamily="monospaceSansSerif,proportionalSerif,TheOther" tts:fontSize="+2">Macromedia</span> in 1996,</p> <p begin="00:00:03.07" dur="00:00:03.35">and we were trying to figure out what to do about the internet.</p> <p begin="00:00:06.42" dur="00:00:03.15">And the company was in dire straights at the time.</p> <p begin="00:00:09.57" dur="00:00:01.45">We were a CD-ROM authoring company,</p> <p begin="00:00:11.42" dur="00:00:02.00">and the CD-ROM business was going away.</p> <p begin="00:00:13.57" dur="00:00:02.50">One of the technologies I remember seeing was Flash.</p> <p begin="00:00:16.47" dur="00:00:02.00">At the time, it was called <span tts:fontWeight="bold" tts:color="#ccc333">FutureSplash</span>.</p>

http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/download-magpie

http://www.w3.org/TR/ttaf1-dfxp/

http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/TimedTextTags.html

http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/TimedTextTags.html

http://help.adobe.com/ko_KR/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee5.html

198 / 307

6. 참고 자료

<p begin="00:00:18.50" dur="00:00:01.20">So this is where Flash got its start.</p> <p begin="00:00:20.10" dur="00:00:03.00">This is smart sketch running on the <span tts:fontStyle="italic">EU-pin computer</span>,</p> <p begin="00:00:23.52" dur="00:00:02.00">which was the first product that FutureWave did.</p> <p begin="00:00:25.52" dur="00:00:02.00">So our vision for this product was to</p> <p begin="00:00:27.52" dur="00:00:01.10">make drawing on the computer</p> <p begin="00:00:29.02" dur="00:00:01.30" style="1">as <span tts:color="#ccc333">easy</span> as drawing on paper.</p> </div> </body></tt>

그림 100 Timed Text XML 기반의 자막 제작 도구인 MAGpie

3. 컴포넌트(구성요소) 패널에서 FLVPlayback 컴포넌트와 FLVPlaybackCaptioning 컴포넌트를 스테이지로 드래그 합니다.

199 / 307

6. 참고 자료

그림 101 스테이지에 FLVPlayback 과 FLVPlaybackCaptioning 컴포넌트 배치

4. FLVPlayback 컴포넌트를 선택하고 속성 패널에서 다음과 같이 속성을 설정합니다.a. 인스턴스 네임 : myVideob. autoPlay : 체크 해제

c. skin : Closed Caption 버튼을 포함하고 있는 스킨을 선택합니다. 이 예제에서는 “MinimalFlatCustomColorAll.swf”를 선택하였습니다.

d. source : 동영상의 경로를 지정합니다. 이 예제에서는 “flv/caption_video.flv”를 선택하였습니다.

그림 102 FLVPlayback 구성요소 매개 변수 설정

5. FLVPlaybackCaptioning 컴포넌트를 선택하고 속성 패널에서 다음과 같이 속성을 설정합니다.a. 인스턴스 네임 : myVideoCaptionb. flvPlaybackName : 대상이 되는 FLVPlayback 컴포넌트의 인스턴스 네임을 적어줍니다. 이 예제에서는 “myVideo”를

사용합니다.

200 / 307

6. 참고 자료

c. showCaptions : 체크

d. source : Timed Text XML 로 작성된 자막 파일의 경로를 작성합니다. 이 예제에서는 “video/caption_video.xml”을 선택하였습니다.

1.29.3 ActionScript 3.0 으로 Timed Text XML, FLVPlayback 과 FLVPlaybackCaptioning 컴포넌트를 사용한 자막 구현ActionScript 3.0 을 사용하여 FLVPlayback, FLVPlaybackCaptioning 컴포넌트와 Timed Text XML 을 사용하여 자막이 지원되는 동영상 플레이어를 제작할 수 있습니다.

그림 103 ActionScript 를 사용한 자막을 제공하는 비디오 플레이어

1. 예제 파일 : ClosedCaptionVideo_AS.fla, ClosedCaptionVideo.as, caption_video.flv, caption_video.xml2. FLVPlayback 컴포넌트와 FLVPlaybackCaptioning 컴포넌트를 라이브러리에 추가합니다.3. ClosedCaptionVideo.as 라는 ActionScript 파일을 생성하고 이 클래스를 ClosedCaptionVideo_AS.fla 의 도큐먼트

클래스로 지정합니다.

그림 104 도큐먼트 클래스 지정

4. ClosedCaptionVideo.as 에 다음 코드를 작성합니다.

package {

import fl.video.FLVPlayback;import fl.video.VideoEvent;

201 / 307

6. 참고 자료

import fl.video.FLVPlaybackCaptioning;import flash.display.Sprite;

public class ClosedCaptionVideo extends Sprite {

// 비디오 파일의 경로private var videoPath:String =

"http://www.helpexamples.com/flash/video/caption_video.flv";// 자막 파일의 경로private var captionPath:String =

"http://www.helpexamples.com/flash/video/caption_video.xml";

private var videoPlayer:FLVPlayback;private var videoCaption:FLVPlaybackCaptioning;

/** * Constructor */public function ClosedCaptionVideo() {

createVideoPlayer();createVideoCaption();

}

/** * @private * FLVPlayback 컴포넌트를 생성하는 메소드 */private function createVideoPlayer():void{

// 비디오 플레이어 생성videoPlayer = new FLVPlayback();

// 비디오 플레이어에 비디오 경로를 지정합니다.videoPlayer.source = videoPath;videoPlayer.autoPlay = false;videoPlayer.skin = "MinimaFlatCustomColorAll.swf";addChild(videoPlayer);

}

/** * @private * FLVPlaybackCaptioning 컴포넌트를 생성하는 메소드 */private function createVideoCaption():void{

videoCaption = new FLVPlaybackCaptioning();// FLVPlaybackCaptioning 객체에 자막 파일을 지정합니다videoCaption.source = captionPath;

//FLVPlaybackCaptioning 객체와 연결할 FLVPlayback 객체를 지정합니다. videoCaption.flvPlayback = videoPlayer;addChild(videoCaption);

}

}

202 / 307

6. 참고 자료

}

1.29.4 KWCAG 2.0 관련 항목• 1.2(멀티미디어 대체 수단) 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다.

∘ 1.2.1(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 합니다.

1.30 파이어폭스 브라우저에서 키보드 포커스의 트랩 방지1.30.1 설명

이 장의 목적은 웹 콘텐츠 영역에서 마크업 영역과 플래시 영역 사이를 탭 키를 통해 이동을 할 때, 플래시 안의 객체를 모두 탐색 한 후 마크업 영역으로 빠져나가지 못하고 다시 플래시 안의 영역 안에서 포커스가 순환을 함으로써 발생하는 현상을 방지하는 것입니다.

이러한 현상은 주로 Internet Explorer 이외의 Mozilla Firefox 와 같은 브라우저에서 발생하는 현상으로, 탭 키를 이용하여 플래시 안 객체를 모두 탐색하고 난 후에도, 마우스로 마크업 영역을 클릭하기 전 까지 마크업 영역으로 포커스가 나가지 않고 플래시 내부를 계속 순환을 합니다. 이 문제는 키보드만으로 웹 페이지를 탐색하는 사용자에게 웹 콘텐츠의 사용을 어렵게 만듭니다.

이러한 문제가 공식적으로 수정 되기 전까지 회피할 수 있는 방법을 제공할 수 있도록 합니다.

203 / 307

6. 참고 자료

그림 105 Mozilla Firefox 에서 플래시 내부의 포커스가 플래시 밖으로 빠져나가지 않고 내부에서 순환함

1.30.2 SWFFocus.as 클래스를 사용하여 키보드 포커스의 트랩 회피1. 예제 파일 : 20_keyboardTrap.fla, SWFFocus.as2. 플래시 콘텐츠의 이전과 이후에 포커스(탭 키를 활용한)를 받을 수 있는 HTML 객체를 둡니다. 이 객체에는 링크나 폼 컨트롤

같은 객체를 사용할 수 있습니다.3. 내부에 tabIndex 를 사용하여 포커스를 표기할 수 있는 플래시 파일을 제작 합니다. 이 예제에서는 웹사이트의 내비게이션

구조를 가진 메뉴를 예를 들었습니다. 각 메뉴 버튼에 tabIndex 값을 설정하여 Tab 키를 사용하였을 때 지정한 순서대로

플래시 내부의 포커스가 이동할 수 있도록 합니다.

204 / 307

6. 참고 자료

그림 106 일반적인 내비게이션 메뉴 구조에서 각 메뉴에 대하여 tabIndex 설정

4. 제작하는 플래시 프로젝트에 com/swffocus 구조의 폴더를 만들고 SWFFocus.as 파일을 swffocus 폴더 안에 둡니다. (포함한 SWFFocus 클래스의 패키지 경로는 com.swffocus.SWFFocus 이므로 폴더 구조를 동일하게 설정해야 합니다.)

5. SWFFocus 클래스는 내부에서 fl.managers.FocusManager 클래스를 사용하기 때문에 플래시의 ActionScript 설정에서

소스 경로와 라이브러리 경로에 fl.managers.FocusManager 클래스를 사용할 수 있도록 경로를 지정해야 합니다.6. 속성 패널에서 ActionScript 설정 편집 버튼을 누릅니다.

그림 107 ActionScript 설정 편집

7. 고급 ActionScript 3.0 설정 다이얼로그의 소스 경로 탭에서 소스 경로를 추가해줍니다. 새 경로 추가 버튼을 선택하고 다음

경로를 입력합니다.a. $(AppConfig)/Component Source/ActionScript 3.0/User Interface

205 / 307

6. 참고 자료

그림 108 소스 경로 설정

8. 고급 ActionScript 3.0 설정 다이얼로그의 라이브러리 경로 탭을 선택하고 새 경로 추가 버튼을 클릭한 후, 다음의

라이브러리 경로를 새로 추가합니다.a. $(AppConfig)/Component Source/ActionScript 3.0/User Interface

206 / 307

6. 참고 자료

그림 109 라이브러리 경로 설정

9. 확인 버튼을 누른 후 액션스크립트의 초기화 되는 영역에 다음의 코드를 작성합니다. 이 예제에서는 타임라인의 1번 키

프레임에 코드를 작성하였습니다. 만약 클래스 기반의 코드를 작성하였다면, 도큐먼트 클래스의 생성자 또는 초기화 메소드

내부에 코드를 추가합니다.

import com.swffocus.SWFFocus;SWFFocus.init(this);

10. HTML 문서에 제작한 플래시를 포함시킨 후 Tab 키를 이용하여 포커스의 이동이 순서대로 이동을 하는지 확인합니다.11. HTML 소스 코드

207 / 307

6. 참고 자료

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head>

<title>Keyboard Trap</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head> <body><h1>웹 접근성이란?</h1> <p> 월드 와이드 웹 (World Wide Web)을 <a href="http://www.w3.org/People/Berners-Lee/">창시한 팀 버너스 리(Tim Berners-Lee)</a>는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다. <a href="http://www.w3.org/">월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)</a>, <a href="http://www.w3.org/WAI">웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)</a>와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 <a href="http://en.wikipedia.org/wiki/Web_accessibility">Wikipedia</a> 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다. </p>

 <div id="flashContent"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1079" height="90" id="20_keyboardTrap" align="top"> <param name="movie" value="20_keyboardTrap.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#2d4233" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="noscale" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="lt" /> <param name="allowScriptAccess" value="sameDomain" />  <object type="application/x-shockwave-flash" data="20_keyboardTrap.swf" width="1079" height="90"> <param name="movie" value="20_keyboardTrap.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#2d4233" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="noscale" /> <param name="menu" value="true" /> <param name="devicefont" value="false" />

208 / 307

6. 참고 자료

<param name="salign" value="lt" /> <param name="allowScriptAccess" value="sameDomain" />  <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player 가져오기" /> </a>  </object> 

</object> </div>  <p> 월드 와이드 웹 (World Wide Web)을 <a href="http://www.w3.org/People/Berners-Lee/">창시한 팀 버너스 리(Tim Berners-Lee)</a>는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다. <a href="http://www.w3.org/">월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)</a>, <a href="http://www.w3.org/WAI">웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)</a>와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 <a href="http://en.wikipedia.org/wiki/Web_accessibility">Wikipedia</a> 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다. </p></body></html>

209 / 307

6. 참고 자료

그림 110 Mozilla Firefox 에서 Tab 을 사용했을 때의 포커스의 흐름

12. 플래시에 삽입한 SWFFocus.init(this); 코드를 제거하고 컴파일 한 후 다시 실행을 하면 탭 포커스가 플래시 내부에서만

순환을 할 것입니다.


∘ 2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.∘ 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

• 3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.∘ 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.

210 / 307

6. 참고 자료

211 / 307

4.사용자 접근성 구현 클래스의 제작

212 / 307

6. 참고 자료

1.31 사용자(커스텀) 접근성 구현 클래스1.31.1 사용자 접근성 구현 클래스의 필요성

플래시 개발자 또는 디자이너들은 플래시 또는 플렉스의 프레임웍에서 제공하는 UI 컴포넌트 이외에 디자인, 기능 등을 변경하거나 추가하여 사용자 UI 컴포넌트(예를 들어 버튼, 콤보 박스, 슬라이더 등)를 제작할 수 있습니다. ActionScript 와 그래픽 애셋, 텍스트 들로 구성이 된 이러한 컴포넌트들을 제작할 때에는 컴포넌트 자체적으로 접근성을 구현해야 할 필요가 있습니다.

플래시의 ActionScript 3.0 의 API 중 기본적으로 제공이 되는 클래스인 SimpleButton 클래스를 사용하여 만든 버튼이나 TextField 클래스를 사용하여 만든 입력 텍스트 필드들로 구성된 플래시 어플리케이션을 제작했다고 했을 때, 스크린 리더기를 사용하여 버튼과 텍스트 필드에 각각 포커스를 주게 되면 선택한 버튼과 입력 텍스트 필드를 읽을 때 “버튼” 또는 “입력 텍스트 필드”라는 객체의 역할을 함께 읽어주며, 사용자들은 객체의 역할을 인지하게 되어 올바르게 화면상의 컨트롤들을 사용할 수 있게 됩니다.

뿐만 아니라 스크린 리더기들이 이러한 역할 값을 인지함으로써 부가적인 사용 방법도 함께 읽어주기도 합니다. 예를 들어 버튼의 경우 “스페이스 키를 누르세요”, 슬라이더의 경우 “값을 변경하려면 화살표 키를 누르세요” 와 같은 기본적인 사용법도 함께 읽습니다.

만약 Sprite 나 MovieClip 클래스를 사용하여 라디오 버튼이나 콤보 박스와 같은 컴포넌트를 제작하였을 때, 스크린 리더기로 컴포넌트들의 역할과 같은 정보를 통지하지 않는다면 스크린 리더기는 단순히 이 컴포넌트들을 단순히 그래픽으로만 인지하게 될 것입니다.

Flash Player 에서는 이러한 사용자 접근성 구현을 위해서 IAccessible 이라는 인터페이스의 하위 집합인 flash.accessibility.AccessibilityImplementation 이라는 클래스를 제공하고 있으며, 이 클래스는 플래시 또는 플렉스의 프레임웍에서 제공하는 기본 UI 컴포넌트(fl.controls 패키지와 mx.controls 패키지 안의 클래스들)들뿐만 아니라, 사용자 접근성을 구현하기 위한 기본적인 기능을 제공하는 기반 클래스입니다.

플래시나 플렉스의 프레임웍에 있는 대부분의 UI 컴포넌트에는 컴포넌트와 쌍을 이루는 접근성 구현 클래스들이 있습니다(접근성 구현 클래스는 ButtonImpl 와 같이 컴포넌트 명 뒤에 Impl 라는 글자가 붙은 클래스들입니다). 이 접근성 구현 클래스는 접근성 구현의 기반이 되는 클래스인 flash.accessibility.AccessibilityImplementation 클래스를 상속받아 각각 fl.accessibility.AccImpl 클래스와 mx.accessibility.AccImpl 클래스로 만들어 졌고 구현된 클래스들은 각각 쌍을 이루는 UI 컴포넌트들의 역할, 기본 액션, 값, 이벤트 등을 IAccessible 인터페이스를 통해 MSAA(Microsoft Active Acssessibiliy)를 사용하여 스크린 리더기와 같은 보조 도구들과 통신을 하게 됩니다.

1.31.2 AccessibilityImplementation 클래스AccessibilityImplementatioin 클래스는 컴포넌트의 시스템 역할, 객체 기반의 이벤트, 상태 등에 대한 정보를 스크린 리더기와 같은 보조 도구로 전달할 수 있는 메소드들을 제공합니다. 이 메소드들은 IAccessible 인터페이스에 정의된 메소드들로 MSAA 를 사용하여 스크린 리더기와 같은 보조 도구와 통신할 수 있는 수단이 됩니다.

이 AccessibilityImplementation 클래스는 접근성 구현을 위한 기반 클래스입니다. 플래시의 경우 fl.core.UIComponent 라는 UI 구현을 위한 기반 클래스에 대응하는 fl.accessibility.AccImpl 클래스가 있고, 플렉스의 경우 mx.core.UIComponent 라는 UI 구현을 위한 기반 클래스에 대응하는 mx.accessibility.AccImpl 클래스가 있습니다. 각각의 UIComponent 클래스를 상속하여 만든 사용자 UI 컴포넌트 클래스들에 대해서는 각각의 AccImpl 접근성 구현 클래스를 상속하여 그에 맞는 접근성을 구현하여야 합니다

AccessibilityImplementation 클래스를 사용하여 접근성을 구현할 때 주의해야 할 점은 MSAA 문서상에 정의되어 있는 컴포넌트의 유형과 일치하는 형태이어야 하며, HTML 상의 폼 요소 또는 윈도우 운영체제 안의 폼 요소와 유사한 형태로 행동할 수 있도록 구현해야 하는 것입니다.

http://msdn.microsoft.com/en-us/library/ms696097(VS.85).aspx

213 / 307

6. 참고 자료

A. AccessibilityImplementation 클래스의 메소드AccessibilityImplementation 클래스에는 IAccessible 인터페이스에서 정의한 메소드들이 구현되어 있습니다. 이러한 메소드들의 기능으로는 컴포넌트의 기본 액션, 컴포넌트의 역할, 선택의 변경, 이름, 값 반환과 같은 역할을 하는 메소드들이 있습니다. 새로운 컴포넌트에 대한 접근성 구현 클래스에서는 이러한 메소드들을 오버라이드(재정의) 하여 새롭게 재정의하여야 합니다.

메소드 설명

accDoDefaultAction(childID:uint):void AccessibilityImplementation 이 나타내는 구성 요소나 그 자식 요소 중 하나와 연결된 기본 액션을 수행하는 IAccessible 메소드입니다.

accLocation(childID:uint):* AccessibilityImplementation 에서 자식 요소의 테두리 상자를 지정하는 DisplayObject 또는 Rectangle 을 반환하는 MSAA 메소드입니다.

accSelect(selFlag:uint, childID:uint):void

AccessibilityImplementation 이 나타내는 구성 요소에서 선택을 변경하는 IAccessible 메소드입니다. selFlag 값으로 아래 4 가지의 값을 사용합니다. SELFLAG_TAKESELECTION SELFLAG_EXTENDSELECTION SELFLAG_ADDSELECTION SELFLAG_REMOVESELECTION

get_accDefaultAction(childID:uint):String AccessibilityImplementation 이 나타내는 구성 요소나 그 자식 요소 중 하나의 기본 액션을 반환하는 MSAA 메소드입니다.AccessibilityImplementation 이 MSAA 모델에서 기본 액션이 있는 UI 요소를 나타내는 경우에만 이 메소드를 구현하십시오. MSAA 모델이 지정한 정확한 문자열을 반환해야 합니다. 예를 들어 Button 구성 요소의 기본 액션 문자열은 "Press"입니다.

get_accFocus():uint 자식 포커스가 구성 요소 내에 있는 자식 요소의 부호 없는 정수 ID(있는 경우)를 반환하는 MSAA 메소드입니다. 자식 포커스가 있는 자식이 없을 경우 메소드는 0 을 반환합니다.

get_accName(childID:uint):String AccessibilityImplementation 이 나타내는 구성 요소 또는 그 자식 요소 중 하나의 이름을 반환하는 MSAA 메소드입니다.

get_accRole(childID:uint):uint AccessibilityImplementation 이 나타내는 구성 요소 또는 그 자식 요소 중 하나의 시스템 역할을 반환하는 MSAA 메소드입니다. MSAA 의 모든 구성 요소의 경우 시스템 역할이 미리 정의됩니다.

get_accSelection():Array 선택된 모든 자식 요소의 ID 가 포함된 배열을 반환하는 MSAA 메소드입니다.

get_accState(childID:uint):uint AccessibilityImplementation 이 나타내는 구성 요소 또는 그 자식 요소 중 하나의 현재 런타임 상태를 반환하는 IAccessible 메소드입니다.

get_accValue(childID:uint):String AccessibilityImplementation 이 나타내는 구성 요소 또는 그 자식 요소 중 하나의 런타임 값을 반환하는 MSAA 메소드입니다.

get_accChildIDArray():Array AccessibilityImplementation 의 자식 요소 중 부호 없는 정수 ID 를 포함하는 배열을 반환합니다.

isLabeledBy(labelBound:Rectangle):Boolean x, y, 폭, 높이로 지정된 테두리 상자가 있는 텍스트 객체를 AccessibilityImplementation 이 나타내는 구성 요소의 레이블로 간주해야 하는지 표시하기 위해 true 또는 false 를 반환합니다.이 기능은 다음의 예시처럼 플래시의 자동 레이블(autoLabeling) 기능에 관여를 합니다. 버튼의 경우, 버튼 안에 완전히 들어가는 모든 텍스트를 레이블로

간주합니다.

214 / 307

6. 참고 자료

텍스트 필드의 경우, 위쪽 가까이에 왼쪽으로 정렬되어 나타나거나 왼쪽 가까이에 나타나는 모든 텍스트를 레이블로 간주합니다.

AccessibilityImplementation 클래스에서 제공하는 메소드들에 대해서는 “ Adobe Flash Platform 용 ActionScript 3.0 참조 설명서 ” 를 참고하기 바랍니다.

1.31.3 Accessibility 구현 상수 목록이 상수(Constants)들은 MSAA 에서 정의한 에러 코드, 객체 역할, 객체 상태, 이벤트 상태의 목록입니다. Flash Player 가 MASS 와 통신을 할 때 사용하는 값들로 스크린 리더기와 같은 보조 도구들은 통지 받은 이 상수 값을 토대로 사용자에게 피드백을 합니다.• Microsoft 의 Accessibility Object Role Constants :

http://msdn.microsoft.com/en-us/library/ms696152(VS.85).aspx • Microsoft 의 Accessibility Object State Constants :

http://msdn.microsoft.com/en-us/library/dd373609(VS.85).aspx • Microsoft 의 Accessibility Event Constants : http://msdn.microsoft.com/en-us/library/ms697187(v=VS.85).aspx • Adobe Flash Platform 용 ActionScript 3.0 참조 설명서의 액세스 가능성 구현 상수 섹션 :

http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/accessibilityImplementationConstants.html

A. 객체 역할 상수 – Object Role Constants

다음 값들은 어플리케이션 안에서 사용하는 객체들의 역할들을 설명합니다. 객체의 역할을 지정하기 위해서는 사전에 정의된 이 값들만 사용해야 하며, 임의의 값을 사용하거나 사용자 정의 값을 추가해서는 안됩니다. 스크린 리더기와 같은 클라이언트는 IAccessible::get_accRole 함수를 호출하여 객체의 역할 값을 알아냅니다.

상수 설명

ROLE_SYSTEM_ALERT 경고 또는 사용자에게 알려주어야 하는 상태를 나타내는 객체입니다. 이 역할은 경고를 상징하는 객체로써 사용되어야만 하며, 메시지 박스, 그래픽, 텍스트 또는 사운드와 같은 다른 사용자 인터페이스를 사용하여 연관이 되지 않아야 합니다.

ROLE_SYSTEM_ANIMATION 비트맵 프레임들로 표시되는 컨트롤처럼 포함되어 있는 콘텐츠가 시간의 흐름에 따라 변화하는 애니메이션 컨트롤을 나타내는 객체입니다. 애니메이션 컨트롤은 파일이 복사될 때 또는 다른 시간이 걸리는 작업을 수행할 때 표시됩니다.

ROLE_SYSTEM_APPLICATION 어플리케이션의 메인 윈도우를 나타내는 객체입니다.

ROLE_SYSTEM_BORDER 윈도우의 보더를 나타내는 객체입니다. 전체의 보더는 단일 객체가 아닌 각각의 측면에 대해 구분된 객체로 나타냅니다.

ROLE_SYSTEM_BUTTONDROPDOWN 아이템 리스트를 드롭다운하는 버튼을 나타내는 객체입니다.

ROLE_SYSTEM_BUTTONDROPDOWNGRID

표(그리드)를 드롭다운하는 버튼을 나타내는 객체입니다.

ROLE_SYSTEM_BUTTONMENU 메뉴를 드롭다운하는 버튼을 나타내는 객체입니다.

ROLE_SYSTEM_CARET 시스템 캐럿을 나타내는 객체입니다.

ROLE_SYSTEM_CELL 테이블 안의 셀을 나타내는 객체입니다.

ROLE_SYSTEM_CHARACTER 마이크로 소프트 오피스 길잡이와 같이 어플리케이션의 사용자를 돕기 위해 제공되어 표시되는 만화와 같은 그래픽 객체를 나타냅니다.

ROLE_SYSTEM_CHART 데이터를 표시하기 위해 사용하는 그래픽 이미지를 나타내는 객체입니다.

ROLE_SYSTEM_CHECKBUTTON 체크 박스 컨트롤을 나타내는 객체로, 옵션 값을 켜거나 끈 상태를 표시합니다.

ROLE_SYSTEM_CLIENT 윈도우의 클라이언트 영역을 나타내는 객체입니다. Active Accessibility는 UI 요소의 역할에 대한 질의가 있을 때, 기본 값으로써 이 역할을 사용합니다.



http://msdn.microsoft.com/en-us/library/ms697187(v=VS.85).aspx

http://msdn.microsoft.com/en-us/library/dd373609(VS.85).aspx

http://msdn.microsoft.com/en-us/library/ms696152(VS.85).aspx

http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/accessibility/AccessibilityImplementation.html#methodSummary

http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/accessibility/AccessibilityImplementation.html#methodSummary

215 / 307

6. 참고 자료

ROLE_SYSTEM_CLOCK 시간을 표시하는 컨트롤을 나타내는 객체입니다.

ROLE_SYSTEM_COLUMN 테이블 안에서의 셀의 칼럼을 나타내는 객체입니다.

ROLE_SYSTEM_COLUMNHEADER 테이블 안에서의 칼럼의 시각적인 레이블을 제공하는 칼럼 헤더를 나타내는 객체입니다.

ROLE_SYSTEM_COMBOBOX 콤보 박스를 나타내는 객체입니다. 미리 선택할 수 있는 데이터 세트를 제공하는 리스트 박스를 사용하여 선택 값을 변경합니다.

ROLE_SYSTEM_CURSOR 시스템의 마우스 포인터를 나타내는 객체입니다.

ROLE_SYSTEM_DIAGRAM 다이어그램 데이터에 사용되는 그래픽 이미지를 나타내는 객체입니다.

ROLE_SYSTEM_DIAL 다이얼 또는 손잡이를 나타내는 객체입니다.

ROLE_SYSTEM_DIALOG 다이얼로그 박스나 메시지 박스를 나타내는 객체입니다.

ROLE_SYSTEM_DOCUMENT 도큐먼트 윈도우를 나타내는 객체입니다. 도큐먼트 윈도우는 항상 어플리케이션 윈도우 안에 포함되어 있습니다. 이 역할은 멀티플 도큐먼트 인터페이스(Multiple-Document Interface:MDI)에만 적용이 되고, MDI 타이틀 바를 포함한 객체를 참조합니다.

ROLE_SYSTEM_DROPLIST

ROLE_SYSTEM_EQUATION 수학상의 방정식을 나타내는 객체입니다.

ROLE_SYSTEM_GRAPHIC 그림을 나타내는 객체입니다.

ROLE_SYSTEM_GRIP 특별한 마우스 포인터를 나타내는 객체로, 사용자들이 윈도우들과 같은 사용자 인터페이스 요소를 다루게 할 수 있도록 합니다. 예를 들면, 사용자는 윈도우의 크기를 리 사이즈 하기 위해 우측 하단의 영역을 붙잡고 클릭하고 드래그 합니다.

ROLE_SYSTEM_GROUPING 다른 객체들과의 논리적인 그룹을 나타내는 객체입니다. 항상 그룹으로 묶인 객체와 객체가 포함하고 있는 객체들 사이에는 부모 자식간의 관계가 맺어지는 것은 아닙니다.

ROLE_SYSTEM_HELPBALLOON 폼 안에서의 툴 팁이나 말 풍선과 같이 도움말을 표시해주는 객체입니다.

ROLE_SYSTEM_HOTKEYFIELD 사용자가 키의 조합이나 연속 키를 입력할 수 있도록 해주는 단축키 필드를 나타내는 객체입니다.

ROLE_SYSTEM_INDICATOR 현재의 아이템에 대한 신호를 주는 포인터 그래픽과 같은 표시를 나타내는 객체입니다.

ROLE_SYSTEM_IPADDRESS 인터넷 프로토콜(IP) 주소를 위해 설계된 편집 가능한 컨트롤을 나타내는 객체입니다. 이 편집 가능한 컨트롤은 IP 주소의 다른 부분들을 위해서 섹션들로 구분이 되어 있습니다.

ROLE_SYSTEM_LINK 링크를 나타내는 객체입니다. 이 객체는 텍스트 또는 그래픽으로 보일 수 있으나, 버튼처럼 행동합니다.

ROLE_SYSTEM_LIST 리스트 박스를 나타내는 객체로, 사용자가 하나 또는 그 이상의 아이템을 선택할 수 있도록 해줍니다.

ROLE_SYSTEM_LISTITEM 리스트 박스의 아이템이나 콤보 박스, 드롭 다운 리스트 박스, 또는 드롭 다운 콤보 박스의 리스트 부분을 나타내는 객체입니다.

ROLE_SYSTEM_MENUBAR 사용자들이 선택할 수 있는 메뉴들이 있는 윈도우의 타이틀 바 아래의 메뉴 바를 나타내는 객체입니다.

ROLE_SYSTEM_MENUITEM 메뉴 안에서 사용자가 명령을 실행하고 옵션을 선택하기 위해 고를 수 있거나 또는 또 다른 메뉴들을 표시할 수 있는 메뉴 아이템을 나타내는 객체입니다. 기능적으로 메뉴 아이템은 푸시 버튼, 라디오 버튼, 체크박스, 또는 메뉴를 대체할 수 있습니다.

ROLE_SYSTEM_MENUPOPUP 사용자가 액션을 실행하기 위해 선택을 할 수 있고 그로부터 옵션 리스트들이 표시되는 메뉴를 나타내는 객체입니다. 모든 메뉴들은 이 역할을 가지고 있어야

216 / 307

6. 참고 자료

하고, 메뉴 바로부터 선택되어 표시되는 드롭 다운 메뉴를 포함합니다. 그리고 마우스 우클릭으로부터 단축 메뉴가 표시됩니다.

ROLE_SYSTEM_OUTLINE 계층 구조의 리스트와 사용자가 계층을 열거나 닫을 수 있도록 하는 트리 뷰 컨트롤과 같은 아웃라인 또는 트리 구조를 나타내는 객체입니다.

ROLE_SYSTEM_OUTLINEBUTTON 아웃라인 아이템과 같이 탐색할 수 있는 아이템을 나타내는 객체입니다. 위/아래 화살표 키를 사용하여 아웃라인을 이동할 수 있습니다. 그러나, 좌/우 화살표 키를 사용하여 메뉴를 확장하거나 축소시키는 방법 대신에 포커스를 가지고 있는 아이템에서 스페이스 바 또는 엔터키를 눌러 메뉴를 확장 또는 축소시킬 수 있습니다.

ROLE_SYSTEM_OUTLINEITEM 아웃라인 또는 트리 구조 안에서의 아이템을 나타내는 객체입니다.

ROLE_SYSTEM_PAGETAB 페이지 탭을 나타내는 객체입니다. 페이지 탭 컨트롤의 자식만이 관련된 페이지의 콘텐츠를 포함하고 있는 객체인 ROLE_SYSTEM_GROUPING 객체입니다.

ROLE_SYSTEM_PAGETABLIST 탭 페이지 컨트롤의 컨테이너를 나타내는 객체입니다.

ROLE_SYSTEM_PANE 프레임 또는 도큐먼트 윈도우 안의 페인을 나타내는 객체입니다. 사용자는 페인들과 현재 페인의 콘텐츠 안 사이를 탐색할 수 있으나, 다른 페인 안의 아이템들과의 탐색은 불가능합니다. 이와 같이 페인들은 프레임 윈도우나 도큐먼트보다 낮은 그룹을 나타내지만 각각의 컨트롤보다는 높은 레벨입니다. 사용자들은 문맥에 의존하여 TAB, F6 또는 CTRL+TAP 키를 눌러 페인들 사이를 탐색할 수 있습니다.

ROLE_SYSTEM_PROGRESSBAR 진행 상태의 완성 시점까지를 퍼센트를 사용하여 동적으로 사용자에게 보여주는 프로그래스바를 나타내는 객체입니다. 이 컨트롤은 사용자의 입력을 받지 않습니다.

ROLE_SYSTEM_PROPERTYPAGE 속성 시트를 나타내는 객체입니다.

ROLE_SYSTEM_PUSHBUTTON 푸시 버튼 컨트롤을 나타내는 객체입니다.

ROLE_SYSTEM_RADIOBUTTON 라디오 버튼이라고 하는 옵션 버튼을 나타내는 객체입니다. 모든 객체들은 상호간에 독점적인 그룹의 부분으로써 한 개의 부모를 공유합니다. 구분된 그룹 안에서 객체들을 나누려면 ROLE_SYSTEM_GROUPING 객체를 사용합니다.

ROLE_SYSTEM_ROW 테이블 안에서 셀의 행을 나타내는 객체입니다.

ROLE_SYSTEM_ROWHEADER 테이블의 행에 대한 시각적인 레이블을 제공하는 행의 헤더를 나타내는 객체입니다.

ROLE_SYSTEM_SCROLLBAR 클라이언트의 부분 또는 컨트롤 안에서 사용되는 가로/세로 방향의 스크롤 바를 나타내는 객체입니다.

ROLE_SYSTEM_SEPARATOR 구분된 메뉴 아이템 또는 윈도우 안에서 페인을 나누는 바와 같이 두 개의 영역 안에서 시각적으로 공간을 나누기 위해 사용되는 객체입니다.

ROLE_SYSTEM_SLIDER 슬라이더를 나타내는 객체로, 사용자가 최소값과 최대값 사이에서 주어진 증가 값을 사용하여 값을 설정할 수 있도록 합니다.

ROLE_SYSTEM_SOUND 다양한 시스템 이벤트들과 관련된 시스템 사운드를 나타내는 객체입니다.

ROLE_SYSTEM_SPINBUTTON 사용자가 표시된 값을 증가시키거나 감소시키게 하는 컨트롤인 스핀 박스를 나타내는 객체입니다.

ROLE_SYSTEM_SPLITBUTTON 버튼에 바로 인접한 드롭다운 리스트 아이콘을 가지고 있는 툴 바에서의 버튼을 나타내는 역할입니다.

ROLE_SYSTEM_STATICTEXT 컨트롤 안의 레이블들이나 다이얼로그 박스 안의 지시 글들처럼 읽을 수만 있는 텍스트를 나타내는 객체입니다. 정적 텍스트는 변경하거나 선택할 수 없습니다.

ROLE_SYSTEM_STATUSBAR 현재의 과정에 대한 정보, 어플리케이션의 상태 또는 선택한 객체를 표시하는 윈도우 하단 영역의 상태 바를 나타내는 객체입니다. 상태 바는 다른 종류의 정보들을 표시할 수 있는 여러 필드를 가지고 있습니다.

ROLE_SYSTEM_TABLE 셀의 행과 열, 그리고 선택적으로 행의 헤더와 열의 헤더를 가진 테이블을 나타내는 객체입니다.

217 / 307

6. 참고 자료

ROLE_SYSTEM_TEXT 편집이 가능하거나 또는 읽기 전용으로 명시한 선택이 가능한 텍스트를 나타내는 객체입니다.

ROLE_SYSTEM_TITLEBAR 윈도우의 제목이나 캡션바를 나타내는 객체입니다.

ROLE_SYSTEM_TOOLBAR 자주 사용하는 기능들에 쉽게 접근할 수 있도록 제공한 컨트롤들의 그룹인 툴 바를 나타내는 객체입니다.

ROLE_SYSTEM_TOOLTIP 유용한 힌트를 제공하는 툴 팁을 나타내는 객체입니다.

ROLE_SYSTEM_WHITESPACE 객체들간의 사이에서 빈 공간을 나타내는 객체입니다.

ROLE_SYSTEM_WINDOW 윈도우 안에 포함되어 있는 타이틀 바, 클라이언트 그리고 다른 객체들과 같이 자식 객체들을 포함한 윈도우 프레임을 나타내는 객체입니다.

B. 객체 상태 상수 – Object State Constants

다음 표에는 어플리케이션 UI 안의 객체의 상태를 설명하기 위해 사용하는 상수 값들을 나타냅니다. 객체들은 언제나 관련된 하나 또는 그 이상의 상태에 대한 값을 가집니다. 다음의 객체 상태 상수는 사용되지 않습니다. • STATE_SYSTEM_ALERT_HIGH• STATE_SYSTEM_ALERT_MEDIUM• STATE_SYSTEM_ALERT_LOW• STATE_SYSTEM_FLOATING

클라이언트는 IAccessible::get_accState 를 호출하여 객체의 상태를 알아냅니다. 상수 설명

STATE_SYSTEM_ALERT_HIGH (이 객체 상태 상수는 지원되지 않습니다.)사용자에게 즉시 전달해야 할 매우 중요한 정보를 나타냅니다. 예를 들어, 배터리가 심각하게 낮은 상태이거나, 레벨 표시기가 위험한 상태를 나타낼 때가 해당이 됩니다. 그 결과로써, 스크린 리더기와 같은 도구는 사용자에게 이러한 정보를 즉시 알려주고, 스크린 확대기 프로그램은 배터리 표시기가 화면 안에 표시되도록 스크린을 스크롤 합니다. 또한 이 상태는 사용자가 적절한 명령이나 기능을 수행 하기 전에 기능을 지속하여 사용할 수 없습니다.

STATE_SYSTEM_ALERT_LOW (이 객체 상태 상수는 지원되지 않습니다.)사용자에게 즉시 전달해야 할 매우 중요한 정보를 나타냅니다. 예를 들어, 배터리가 낮은 상태로 도달하기 시작하는 시점이나 레벨 표시기가 중간 정도의 위험한 상태를 나타낼 때가 해당이 됩니다. 스크린 리더기와 같은 도구는 사용자의 작업을 차단 없이 사용자가 중요한 정보를 알 수 있도록 소리를 냅니다. 그리고 나서 사용자는 원하는 때에 주의 정보에 대한 요청을 보낼 수 있습니다.

STATE_SYSTEM_ALERT_MEDIUM (이 객체 상태 상수는 지원되지 않습니다.)사용자에게 중요하지 않은 우선 순위가 낮은 정보를 나타냅니다.

STATE_SYSTEM_ANIMATED 객체의 외형이 빠르게 또는 끊임 없이 변화하는 상태입니다. 애니메이션 되는 그래픽들은 가끔 State 속성이 STATE_SYSTEM_ANIMATED로 설정된 상태로 ROLE_SYSTEM_GRAPHIC으로써 설명이 됩니다. 이 상태는 객체의 위치가 변화하고 있는 것을 나타내기 위해 사용됩니다.

STATE_SYSTEM_BUSY 현재 시점에서 컨트롤이 입력을 받아들일 수 없는 상태를 나타냅니다.

STATE_SYSTEM_CHECKED 객체의 체크 박스가 선택된 상태를 나타냅니다.

STATE_SYSTEM_COLLAPSED ROLE_SYSTEM_OUTLINEITEM의 역할을 가진 객체의 자식들이 숨겨진 상태를 나타냅니다.

STATE_SYSTEM_DEFAULT 이 상태는 윈도우 안에서의 기본 버튼을 나타냅니다.

STATE_SYSTEM_EXPANDED ROLE_SYSTEM_OUTLINEITEM의 역할을 가진 객체의 자식들이 표시된 상태를 나타냅니다.

218 / 307

6. 참고 자료

STATE_SYSTEM_EXTSELECTABLE IAccessible::accSelect 메소드 안에서 SELFLAG_EXTENDSELECTION을 사용하여 객체들이 선택된 상태를 나타냅니다.

STATE_SYSTEM_FLOATING (이 객체 상태 상수는 지원되지 않습니다.)객체가 부모 객체의 경계에 클리핑 되지 않고, 부모가 움직일 때 객체가 자동으로 움직이지 않는 상태를 나타냅니다.

STATE_SYSTEM_FOCUSABLE 객체가 활성화 된 윈도우 안에 있고, 키보드 포커스를 받을 준비가 된 상태입니다.

STATE_SYSTEM_FOCUSED 객체가 키보드 포커스를 받은 상태입니다. 객체의 선택과 객체의 포커스를 혼동하지 마십시오. 보다 많은 정보는 Selection and Focus Properties and Methods 를 참고하기 바랍니다. 이 객체 상태를 사용하는 객체에 대해서, 상태 변화에 대해 클라이언트 어플리케이션에게 통지하기 위해 EVENT_OBJECT_SHOW 또는 EVENT_OBJECT_HIDE를 보냅니다. EVENT_OBJECT_STATECHANGE를 보내지 마십시오.

STATE_SYSTEM_HOTTRACKED 객체가 마우스에 의해 핫트랙 되는 것으로 객체의 외형이 객체 위에 위치한 마우스 포인터를 나타내기 위해 변화하는 것을 의미합니다.

STATE_SYSTEM_INVISIBLE 객체가 시각적으로 숨겨진 것을 의미합니다. 예를 들면, 메뉴 아이템들은 프로그래밍적으로 사용자가 메뉴를 활성화 할 때까지 숨겨져 있습니다. 객체가 사용자에게 사용 가능하지 않은 상태이기 때문에, 클라이언트 어플리케이션들은 사용자에게 객체에 대한 상호 작용을 위한 정보를 보낼 필요가 없습니다. 그러나, 만약 클라이언트 어플리케이션이 이러한 상태의 객체를 발견한다면, STATE_SYSTEM_OFFSCREEN으로 설정되어 있다 하더라도 그 객체들을 확인합니다. 만약 이 두 번째 상태가 정의되어 있다면, 클라이언트들은 사용자들과 객체에 대한 정보를 상호작용 할 수 있습니다. 예를 들어, 리스트 박스가 STATE_SYSTEM_INVISIBLE과 STATE_SYSTEM_OFFSCREEN 두 가지의 상태를 가지고 있을 수 있습니다. 이 경우, 클라이언트 어플리케이션은 사용자들과 리스트 안의 모든 아이템에 대해 상호 작용을 할 수 있습니다.

STATE_SYSTEM_LINKED 하이퍼 링크와 같은 형태의 객체를 나타냅니다. 객체의 역할은 보통 ROLE_SYSTEM_TEXT입니다.

STATE_SYSTEM_MARQUEED 스크롤이 되거나 움직이는 텍스트 또는 그래픽을 의미합니다.

STATE_SYSTEM_MIXED 결정이 되지 않은 세 개의 상태의 체크 박스 또는 툴바 버튼의 상태를 나타냅니다. 체크 박스는 선택되지도 해제되지도 않은 세 번째 상태입니다.

STATE_SYSTEM_MOVEABLE 객체가 움직여질 수 있는 상태를 의미합니다. 예를 들어, 사용자가 객체의 타이틀 바를 클릭하고 새로운 위치로 객체를 드래그 하는 경우가 해당됩니다.

STATE_SYSTEM_MULTISELECTABLE 여러 개를 아이템들을 선택할 수 있는 객체를 의미합니다. IAccessible::accSelect 메소드를 위한 유효한 값은 SELFLAG_ADDSELECTION입니다.

STATE_SYSTEM_NORMAL 객체가 특별한 상태 값을 할당 받지 않은 상태를 의미합니다.

STATE_SYSTEM_OFFSCREEN 객체가 클리핑 되거나 뷰 밖으로 스크롤 된 상태를 나타내며, 프로그래밍적으로 숨겨진 상태는 아닙니다. 만약 사용자가 뷰 포트를 크게 만든다면, 객체의 더 많은 부분들이 컴퓨터 스크린에 나타나게 될 것입니다.

STATE_SYSTEM_PRESSED 객체가 눌려진 것입니다.

STATE_SYSTEM_PROTECTED 객체가 암호로 보호된 편집 가능한 컨트롤입니다.

STATE_SYSTEM_READONLY 객체가 읽기 전용으로 설계된 것입니다.

STATE_SYSTEM_SELECTABLE 객체가 선택을 받을 수 있습니다.

STATE_SYSTEM_SELECTED 객체가 선택된 것입니다.

STATE_SYSTEM_SELFVOICING 객체 또는 자식이 목적을 설명하기 위해 Text-To-Speech(TTS) 기술을 사용합니다. 이러한 상태의 객체가 포커스를 받게 되면, 객체가 자동으로 객체의 목적을 낭독하기 때문에, 음성 기반의 접근성 지원 기술은 객체의 정보를 낭독하지

http://msdn.microsoft.com/en-us/library/dd373633(v=VS.85).aspx

219 / 307

6. 참고 자료

않습니다.

STATE_SYSTEM_SIZEABLE 객체의 크기를 변경할 수 있음을 의미합니다. 예를 들면, 사용자는 윈도우의 테두리를 드래그 해서 윈도우의 크기를 변경합니다.

STATE_SYSTEM_TRAVERSED 사용자가 이전에 클릭을 하여 방문했던 하이퍼 텍스트 링크를 나타내는 객체입니다.

STATE_SYSTEM_UNAVAILABLE 사용할 수 없는 객체를 의미합니다.

C. 이벤트 상수다음 표의 내용들은 운영체제와 서버 어플리케이션으로부터 만들어지는 이벤트에 대한 설명입니다. 이 이벤트들을 사용하기 전에, 클라이언트 어플리케이션에서는 사용자 인터페이스(UI) 요소에 의해 사용되는 이 이벤트들을 확인하기 위해 Accessible Event Watcher 를 사용해야 합니다.

상수 설명

EVENT_OBJECT_CREATE 객체가 만들어질 때의 이벤트입니다. 시스템은 캐럿, 헤더 컨트롤, 리스트 뷰 컨트롤, 탭 컨트롤, 툴바 컨트롤, 트리 뷰 컨트롤 그리고 윈도우 객체 등의 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들을 위한 이 이벤트를 전달합니다.서버들은 부모 객체에 대한 이벤트를 전달하기 전에 객체의 모든 자식 객체에 대한 이벤트를 전달해야 합니다. 서버들은 부모 객체가 이 이벤트들을 전달하기 전에 모든 자식 객체들이 완전히 만들어지고 클라이언트로부터 IAccessible이 호출될 수 있도록 준비할 수 있어야 합니다.부모 객체는 자식 객체들 이후에 만들어지기 때문에, 클라이언트는 객체들의 부모가 IAccessible::get_accParent를 호출하기 전에 만들어질 수 있도록 해야 합니다.

EVENT_OBJECT_DESTROY 객체가 소멸될 때의 이벤트 입니다. 시스템은 캐럿, 헤더 컨트롤, 리스트 뷰 컨트롤, 탭 컨트롤, 툴바 컨트롤, 트리 뷰 컨트롤, 그리고 윈도우 객체 등의 사용자 인터페이스(UI) 요소에 대해서 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들을 위한 이 이벤트를 전달합니다.클라이언트들은 모든 객체의 자식들이 부모 객체가 이 이벤트를 전달할 때 소멸되는 것으로 추정합니다.클라이언트들은 인터페이스 포시가 더 이상 유효하지 않기 때문에 이 이벤트를 받은 후에는 객체의 IAccessible 속성 또는 메소드를 호출하지 않습니다.

EVENT_OBJECT_SHOW 숨겨진 객체가 보여질 때의 이벤트입니다. 시스템은 캐럿, 헤더 컨트롤, 리스트 뷰 컨트롤, 탭 컨트롤, 툴바 컨트롤, 트리 뷰 컨트롤, 그리고 윈도우 객체 등의 사용자 인터페이스(UI) 요소에 대해서 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들을 위한 이 이벤트를 전달합니다.클라이언트들은 부모 객체에 의해 이 이벤트를 받을 때 모든 자식 객체들이 이미 표시되어 있어야 합니다. 그러므로, 서버 어플리케이션들은 자식 객체들을 위한 이 이벤트를 전달하지 않습니다.숨겨진 객체는 STATE_SYSTEM_INVISIBLE 플래그를 포함합니다. 보여지는 객체는 이 플래그를 포함하지 않습니다. EVENT_OBJECT_SHOW 이벤트는 STATE_SYSTEM_INVISIBLE 플래그를 제거합니다. 그러므로 이 경우, 서버는 EVENT_STATE_CHANGE 이벤트를 전달하지 않습니다.

EVENT_OBJECT_HIDE 객체가 숨겨질 때의 이벤트입니다. 시스템은 캐럿과 커서와 같은 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들을 위해 이 이벤트를 전달합니다.부모 객체를 위해 이 이벤트가 생성될 때, 모든 자식 객체들은 이미 숨겨져 있어야 합니다. 서버 어플리케이션은 자식 객체들을 위해 이 이벤트를 전달하지 않습니다.숨겨진 객체들은 STATE_SYSTEM_INVISIBLE 플래그를 포함합니다. 보여지는 객체는 이 플래그를 포함하지 않습니다. 또한 EVENT_OBJECT_HIDE 이벤트는

220 / 307

6. 참고 자료

STATE_SYSTEM_INVISIBLE 플래그가 설정되었다는 것을 의미합니다. 그러므로, 이 경우 서버는 EVENT_STATE_CHANGE 이벤트를 전달하지 않습니다.이 이벤트는 시스템에 의해 지속적으로 전달되지 않습니다. 이것은 알려진 이슈이며 언급되고 있는 중입니다.

EVENT_OBJECT_REORDER 컨테이너 객체가 추가되고 제거되거나 또는 컨테이너의 자식들을 재배열 할 때의 이벤트입니다. 시스템은 헤더 컨트롤, 리스트 뷰 컨트롤, 툴바 컨트롤 그리고 윈도우 오브젝트의 사용자 인터페이스(UI) 요소를 위해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들을 위해 적절하게 이 이벤트를 전송합니다.예를 들면, 이 이벤트는 자식 요소의 수 또는 요소의 순서가 변경될 때 리스트 뷰 객체에 의해 만들어집니다. 또한 이 이벤트는 자식 윈도우에 대한 z순서가 변경될 때, 부모 윈도우에 의해 전달됩니다.

EVENT_OBJECT_FOCUS 객체가 키보드 포커스를 받을 때의 이벤트입니다. 시스템은 리스트 뷰 컨트롤, 메뉴 바, 팝업 메뉴, 스위치 윈도우, 탭 컨트롤, 트리 뷰 컨트롤 그리고 윈도우 오브젝트 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체를 위해 이 이벤트를 전달합니다.

EVENT_OBJECT_SELECTION 컨테이너 객체 안의 선택이 변경될 때의 이벤트입니다. 시스템은 리스트 뷰 컨트롤, 탭 컨트롤, 트리 뷰 컨트롤 그리고 윈도우 오브젝트 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체를 위해 이 이벤트를 전달합니다.이 이벤트 신호는 단일 선택에 대한 것입니다. 사전에 선택된 자식을 포함하지 않는 컨테이너 안에 자식이 선택이 되거나 하나의 자식으로부터 다른 자식으로 선택이 변경될 때의 이벤트가 전달됩니다

EVENT_OBJECT_SELECTIONADD 컨테이너 오브젝트 안의 아이템이 선택에 추가가 될 때의 이벤트입니다. 시스템은 리스트 박스, 리스트 뷰 컨트롤, 그리고 트리 뷰 컨트롤 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체를 위해 이 이벤트를 전달합니다. 이 이벤트는 이미 존재하고 있는 선택에 자식을 추가할 때 신호를 보냅니다.

EVENT_OBJECT_SELECTIONREMOVE 컨테이너 오브젝트 안의 아이템이 선택에서 제거될 때의 이벤트입니다. 시스템은 리스트 박스, 리스트 뷰 컨트롤, 그리고 트리 뷰 컨트롤 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체를 위해 이 이벤트를 전달합니다.이 이벤트는 이미 존재하고 있는 선택에서 자식이 제거될 때 신호를 보냅니다.

EVENT_OBJECT_SELECTIONWITHIN 많은 선택의 변화가 컨테이너 오브젝트 안에서 일어납니다. 시스템은 리스트 박스에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체를 위해 이 이벤트를 전달합니다.이 이벤트는 컨트롤 안의 선택된 아이템이 상당히 많이 변경될 때 전달됩니다. 이 이벤트는 많은 선택의 변화가 발생한 클라이언트에 통지하고 여러 개의 EVENT_OBJECT_SELECTIONADD 또는 EVENT_OBJECT_SELECTIONMOVE 이벤트 대신에 사용됩니다. 클라이언트는 컨테이너 객체의 IAccessible::get_accSelection 메소드를 호출하고 선택된 아이템들을 열거함으로써 선택된 아이템들에 대한 요청을 보냅니다.

EVENT_OBJECT_STATECHANGE 오브젝트의 상태가 변경될 때의 이벤트입니다. 시스템은 체크박스, 콤보 박스, 헤더 컨트롤, 푸시 버튼, 라디오 버튼, 스크롤 바, 툴바 컨트롤, 트리 뷰 컨트롤, 업 다운 컨트롤, 그리고 윈도우 사용자 인터페이스(UI) 요소에 대해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.예를 들면, 버튼 객체가 눌려지거나 릴리즈 될 때, 또는 객체가 사용 가능하거나 불가능할 때 상태 변경 이벤트가 발생합니다.

EVENT_OBJECT_LOCATIONCHANGE 객체의 위치, 도형 또는 크기가 변화할 때의 이벤트입니다. 시스템은 캐럿과 윈도우

221 / 307

6. 참고 자료

객체 사용자 인터페이스(UI) 요소를 위해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.이 이벤트는 계층 구조의 객체 내부에서 최상위 레벨의 객체가 변화될 때에 대한 응답을 받았을 때 만들어집니다. 예를 들어 사용자가 윈도우를 리 사이즈 한다면, 시스템은 이 신호를 윈도우에 전달합니다. 하지만 메뉴 바, 타이틀 바, 스크롤 바 또는 변화되어야 하는 다른 객체로는 전달하지 않습니다.시스템은 부모 윈도우가 이동할 때 플로팅 되지 않은 모든 자식 윈도우에 대해서 이 이벤트를 전달하지 않습니다. 그러나, 만약 어플리케이션이 리 사이즈의 결과로서 자식 윈도우를 명확하게 리 사이즈 한다면, 시스템은 리 사이즈 된 자식에 여러 이벤트들을 전달합니다.만약 객체의 State 속성이 STATE_SYSTEM_FLOATING으로 설정되어 있다면, 서버들은 객체의 위치가 변경될 때 마다 EVENT_OBJECT_LOCATIONCHANGE를 전달합니다. 만약 객체가 이 상태를 가지고 있지 않다면, 서버는 오로지 객체가 객체의 부모에 대해 상대적으로 움직일 때 이 이벤트를 트리거 합니다.

EVENT_OBJECT_NAMECHANGE 객체의 Name 속성이 변경될 때의 이벤트입니다. 시스템은 체크박스, 커서, 리스트 뷰 컨트롤, 푸시 버튼, 라디오 버튼, 스테이터스 바 컨트롤, 트리 뷰 컨트롤, 그리고 윈도우 객체 사용자 인터페이스(UI) 요소를 위해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

EVENT_OBJECT_DESCRIPTIONCHANGE

객체의 Description 속성이 변경될 때의 이벤트입니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

EVENT_OBJECT_VALUECHANGE 객체의 Value 속성이 변경될 때의 이벤트입니다. 시스템은 편집 컨트롤, 헤더 컨트롤, 단축키 컨트롤, 프로그래스 바 컨트롤, 스크롤 바, 슬라이더 컨트롤, 그리고 업다운 컨트롤 사용자 인터페이스(UI) 요소를 위해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

EVENT_OBJECT_PARENTCHANGE 객체가 새로운 부모 객체를 가지게 될 때의 이벤트입니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

EVENT_OBJECT_HELPCHANGE 객체의 Help 속성이 변경될 때의 이벤트입니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

EVENT_OBJECT_DEFACTIONCHANGE 객체의 DefaultAction 속성이 변경될 때의 이벤트입니다. 시스템은 다이얼로그 박스를 위해 이 이벤트를 전달합니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

EVENT_OBJECT_ACCELERATORCHANGE

객체의 KeyboardShortcut 속성이 변경될 때의 이벤트입니다. 서버 어플리케이션은 서버 어플리케이션의 접근성 있는 객체들에 대해 이 이벤트를 전달합니다.

1.32 튜토리얼 –사용자 접근성 구현 클래스 제작 : Slider (flash package)이 장에서는 AccessibilityImplementation 클래스를 사용하여 MSAA 를 지원하는 접근성 있는 사용자 슬라이더 컴포넌트를 제작합니다. 슬라이더의 완전한 기능을 구현하는 것이 아닌 슬라이더의 기본적인 기능에 대해 접근성 구현 클래스를 어떻게 만드는지를 아는 것이 목적입니다.

그림 111 이 장에서 제작할 가로 방향 슬라이더 예제

222 / 307

6. 참고 자료

이 예제는 제작 편의상 Flash Builder 에서 ActionScript Project 를 생성하여 제작을 하였습니다. 하지만 Flash IDE 를 사용할 경우에는 fla 문서의 속성 패널에서 도큐먼트 클래스를 지정해주는 것 이외에는 제작 방식은 거의 동일합니다. Flash IDE 를 사용하여 제작하는 방법에 대해서는 별도로 표기합니다.

이 예제는 fl.core.UIComponent 와 fl.accessibility.UIComponentAccImpl, fl.accessibility.AccImpl 클래스의 내용을 참고하여 제작하였습니다. 범용적이면서도 접근성 있는 UI 컴포넌트를 제작을 하려면 일반적으로 Sprite 를 상속받아 제작하는 것이 아닌 기반이 되는 기반 클래스를 만들고 그 클래스들을 필요에 따라 상속을 받아 사용하는 것이 편리합니다. 실제로 Flash IDE 안의 UI 컴포넌트 클래스들은 fl.core.UIComponent 클래스를 상속하여 제작되었고, 각각의 컴포넌트에 대한 접근성 구현 클래스들은 fl.accessibility.AccImpl 클래스를 상속하여 제작되었습니다. Flex 의 UI 컴포넌트들 역시 마찬가지로 mx.core.UIComponent 클래스를 상속받았으며, 각각의 컴포넌트에 해당하는 접근성 구현 클래스들도 mx.accessibility.AccImpl 클래스를 상속하여 제작되었습니다.

이 예제 역시 접근성 지원을 위한 기반 클래스들을 제작한 후 그 클래스들을 상속하여 실제 제작할 컴포넌트 및 접근성 구현 클래스들을 구현하는 방식으로 제작합니다.

1.32.1 프로젝트 생성 및 환경 설정하기A. Flash Builder

Flash Builder(또는 Flex Builder)에서 새로운 ActionScript Project 를 생성합니다. Project 를 생성하는 방법은 다음과 같습니다.• Package Explorer 에서 우클릭 후 New > ActionScript Project 선택• 메뉴에서 File > New > ActionScript Project 선택

• 툴바의 New 아이콘 ( ) 클릭 > ActionScript Project 선택

위의 세 가지 방법 중 한 가지를 선택해서 ActionScript Project 를 생성하면 New ActionScript Project 다이얼로그가 나타납니다.

New ActionScript Project 다이얼로그의 Project Location 단계에서 Project 의 이름을 입력합니다. 이 예제에서는 CustomAccessibilityImplementation 으로 작성하였습니다.

223 / 307

6. 참고 자료

그림 112 새로운 ActionScript Project 생성

프로젝트의 이름을 입력하고 Next 버튼을 눌러 Build Paths 단계로 옵니다. 이 단계에서는 메인 어플리케이션 클래스 라이브러리로 사용할 경로, 배포 경로 등을 설정할 수 있습니다.

224 / 307

6. 참고 자료

그림 113 Build paths 설정

Finish 를 누르고 ActionScript Project 생성을 완료하면 Package Explorer 에 CustomAccessibilityImplementation 이라는 ActionScript Project 가 등록이 됩니다.

프로젝트 이름을 우클릭 해서 나오는 메뉴에서 New > Folder 를 선택해서 assets 와 libs 라는 폴더를 두 개 만듭니다.

폴더의 상위 프로젝트가 CustomAccessibilityImplementation 인지 확인하시기 바랍니다.

225 / 307

6. 참고 자료

그림 114 assets 폴더 생성

assets 라는 폴더는 프로젝트에서 사용할 fla, 이미지, 폰트, 사운드 등을 담기 위한 경로입니다. libs 폴더는 프로젝트에서 사용할 swc 라이브러리들을 담기 위한 경로입니다.

폴더를 생성하면 Package Explorer 에서 아래 그림과 같은 프로젝트 구조를 확인 할 수 있습니다.

226 / 307

6. 참고 자료

그림 115 CustomAccessibilityImplementation 프로젝트 구조

프로젝트 이름(CustomAccessibilityImplementation)에서 우클릭 후 나오는 메뉴에서 Properties 를 선택합니다. Properties 다이얼로그가 나오면 좌측 메뉴 중 ActionScript Build Path 를 선택합니다.

그림 116 ActionScript Build Path 설정

이 창에서 프로젝트가 참조해야 할 라이브러리 경로를 추가합니다. Library Path 탭이 선택된 상태에서 Add SWC Folder 버튼을 클릭하고 나오는 다이얼로그에 이전 단계에서 만들었던 libs 폴더를 지정합니다.

227 / 307

6. 참고 자료

그림 117 라이브러리 폴더 지정

libs 폴더를 지정을 하면 플렉스 컴파일러는 외부 라이브러리를 libs 폴더 안의 SWC 파일에서 참조하게 됩니다. OK 를 눌러 프로젝트의 환경에 대한 설정을 마칩니다.

B. Flash IDE

Flash IDE 에서는 새로운 fla 파일을 생성하고 “CustomAccessibilityImplementation.fla” 라는 이름으로 저장합니다. 그리고 새로운 ActionScript 파일을 생성하여 클래스 이름을 “CustomAccessibilityImplementation”으로 지정하여 fla 문서에 대한 도큐먼트 클래스로 지정을 합니다.

그림 118 도큐먼트 클래스 생성

확인을 누르고 새로운 ActionScript 파일이 생성이 되면 “CustomAccessibilityImplementation.as”라는 이름으로 저장합니다.

CustomAccessibilityImplementation.as 클래스가 flash.display.MovieClip 클래스를 상속받을 수 있도록 수정합니다.package{import flash.display.MovieClip;

public class CustomAccessibilityImplementation extends MovieClip

228 / 307

6. 참고 자료

{public function CustomAccessibilityImplementation(){

}}}

CustomAccessibilityImplementation.fla 에서 속성 패널의 도큐먼트 클래스가 CustomAccessibilityImplementation 로 지정이 되어 있는지 확인합니다. 만약 지정되어 있지 않다면 CustomAccessibilityImplementation 클래스가 도큐먼트 클래스로 될 수 있도록 지정합니다.

그림 119 CustomAccessibilityImplementation.fla 의 도큐먼트 클래스 지정

CustomAccessibilityImplementation.fla 파일이 있는 위치에 assets 와 libs 두 개의 폴더를 만듭니다. assets 폴더 안에는 애셋 제작을 위한 fla, 이미지, 폰트 등을 포함하는 폴더이고, libs 폴더는 외부 라이브러리를 위치할 폴더입니다.

그림 120 assets 및 libs 폴더 생성

CustomAccessibilityImplementation.fla 에서 속성 패널에서 ActionScript 설정 편집 버튼을 클릭하여 고급 ActionScript 3.0 설정 다이얼로그를 띄웁니다.

229 / 307

6. 참고 자료

그림 121 ActionScript 설정 편집

230 / 307

6. 참고 자료

그림 122 고급 ActionScript 3.0 설정 다이얼로그

라이브러리 경로 탭이 선택된 상태에서 플러스(+) 버튼을 눌러 swc 파일들이 위치할 폴더인 libs 폴더를 지정하여 이 프로젝트가 외부 라이브러리 경로로써 libs 폴더를 참조할 수 있도록 합니다.

231 / 307

6. 참고 자료

그림 123 libs 폴더를 라이브러리 경로에 추가

확인 버튼을 누르고 프로젝트에 대한 설정을 마칩니다.

Flash Builder 와 Flash IDE 상의 이후의 진행 방식은 모두 동일합니다. 다만 Flash Builder 에서 새로운 패키지의 만드는 것은 Flash IDE 의 경우 동일한 이름과 구조의 폴더를 생성한다는 것을 의미합니다.

1.32.2 기반 클래스 제작기반 클래스는 사용자와 상호작용을 하고 화면에 표시되는 UI 를 제작하기 위한 클래스의 기반이 되는 클래스와 접근성 구현을 위한 클래스입니다.

이 예제에서의 기반 클래스는 다음 표와 같습니다. 기반 클래스 설명

core.AccessibleSprite 사용자와 상호작용을 하고 화면에 표시되는 UI를 제작하기 위한 기반 클래스입니다. 내부적으로 포커스 표시, 접근성 구현 클래스의 활성화, 사이즈 재정의, 기타 이벤트 처리 등을 실행합니다. 이 클래스를 상속받아 새로운 UI를 제작합니다.

accessibility.AccessibleSpriteAccImpl

AccessibleSprite 클래스의 접근성 구현 클래스이며 기반 클래스입니다. flash.accessibility.AccessiblityProperties 클래스를 상속하고 있으며, 접근성에 대한 정보들도 함께 포함하고 있습니다.

accessibility.AccImpl 컴포넌트들의 접근성 구현 클래스 제작을 위한 기반 클래스입니다. flash.accessibility.AccessibilityImplementation 클래스를 상속하고 있으며, IAccessible 인터페이스를 구현하고 있습니다.

events.AccessibleSpriteEvent AccessibleSprite에서 버튼이 눌렸을 때, 레이블이 변경되었을 때, 화면에 시각적으로 노출이 되었을 때, 화면에 시각적으로 숨겨졌을 때, 입력을 받았을 때에 대한 이벤트들에 대해 정의합니다.

A. core.AccessibleSprite

core 패키지를 만들고 그 안에 AcessibleSprite.as 클래스를 만듭니다.

AccessibleSprite 클래스는 런타임 상에서 직접 이 클래스를 new AccessibleSprite() 로 생성하는 것이 아닌 AccessibleSprite 클래스를 상속 받은 클래스를 사용합니다.

AccessibleSprite 클래스에 아래 코드를 작성합니다.

232 / 307

6. 참고 자료

package core{import events.AccessibleSpriteEvent;

import flash.display.DisplayObject;import flash.display.InteractiveObject;import flash.display.Sprite;import flash.events.Event;import flash.events.FocusEvent;import flash.events.KeyboardEvent;

[Event(name="show", type="events.AccessibleSpriteEvent")][Event(name="hide", type="events.AccessibleSpriteEvent")][Event(name="buttonDown", type="events.AccessibleSpriteEvent")][Event(name="labelChange", type="events.AccessibleSpriteEvent")]/** * 사용자 접근성 구현을 할 수 있는 기능을 제공하는 기반 클래스 */public class AccessibleSprite extends Sprite{

//--------------------------------------------------------------------------// // Class Variables// //--------------------------------------------------------------------------

/** * 현재의 컴포넌트와 연관되는 접근성 클래스를 만듭니다. */public static var createAccessibilityImplementation:Function;

/** * @private * 이 인스턴스에 포커스가 있는지에 대한 여부 */protected var isFocused:Boolean;

/** * @private */protected var uiFocusRectSkin:DisplayObject;

//--------------------------------------------------------------------------// // Override Properties// //--------------------------------------------------------------------------

//--------------------------------------// width//--------------------------------------

/** * @private *

233 / 307

6. 참고 자료

* 속성의 저장 공간입니다. */private var _width:Number;

/** * 재정의 된 컴포넌트의 너비 */override public function get width():Number{

return _width;}

/** * @private */override public function set width(value:Number):void{

_width = value;}

//--------------------------------------// height//--------------------------------------

/** * @private * * 속성의 저장 공간입니다. */private var _height:Number;

/** * 재정의 된 컴포넌트의 높이 */override public function get height():Number{

return _height;}

/** * @private */override public function set height(value:Number):void{

_height = value;}

//--------------------------------------------------------------------------// // Properties// //--------------------------------------------------------------------------

//--------------------------------------// enabled//--------------------------------------

234 / 307

6. 참고 자료

/** * @private * * 속성의 저장 공간입니다. */private var _enabled:Boolean = true;

[Inspectable(defaultValue=true, verbose=1)]/** * 컴포넌트의 사용 가능 여부 */public function get enabled():Boolean{

return _enabled;}

/** * @private */public function set enabled(value:Boolean):void{

_enabled = value;}

//--------------------------------------// visible//--------------------------------------

[Inspectable(defaultValue=true, verbose=1)]/** * 인스턴스가 시각적으로 노출될 지에 대한 여부 */override public function get visible():Boolean{

return super.visible;}

/** * @private * visible 속성에 값에 따라 AccessibleSpriteEvent.SHOW 또는 * AccessibleSpriteEvent.HIDE 이벤트를 트리거 합니다. */override public function set visible(value:Boolean):void{

if (super.visible == value)return;

super.visible = value;var event:String = (value) ? AccessibleSpriteEvent.SHOW :

AccessibleSpriteEvent.HIDE;

dispatchEvent(new AccessibleSpriteEvent(event, true));}

//--------------------------------------

235 / 307

6. 참고 자료

// uiFocusRect//--------------------------------------

/** * @private * * 속성의 저장 공간입니다. */private var _uiFocusRect:Class;

/** * 포커스를 받았을 때 포커스를 표시할 수 있는 DisplayObject 객체 */public function get uiFocusRect():Class{

return _uiFocusRect;}

/** * @private */public function set uiFocusRect(value:Class):void{

_uiFocusRect = value;}

//--------------------------------------------------------------------------// // Constructor// //--------------------------------------------------------------------------

/** * Constructor */public function AccessibleSprite(){

super();focusRect = false;

width = super.width;height = super.height;

addEventListener(FocusEvent.FOCUS_IN, focusInHandler);addEventListener(FocusEvent.FOCUS_OUT, focusOutHandler);addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

addEventListener(Event.ENTER_FRAME, hookAccessibility, false, 0, true);

}

//--------------------------------------------------------------------------// // Methods//

236 / 307

6. 참고 자료

//--------------------------------------------------------------------------

/** * 이 메소드는 생성자에서 등록한 ENTER_FRAME 이벤트 핸들러로부터 호출이 되며, * 컴포넌트의 접근성 구현 클래스와 연결을 합니다. * AccessibleSprite의 접근성 구현의 생성 메소드(createAccessibilityImplementation)에 * 이 구현 클래스 자체를 인자로 넣으며 접근성에 대한 기능을 초기화 합니다. */protected function initializeAccessibility():void{

if (AccessibleSprite.createAccessibilityImplementation != null)AccessibleSprite.createAccessibilityImplementation(this);

}

/** * @private * 타겟으로 들어온 DisplayObject 객체가 이 AccessibleSprite 클래스의 인스턴스 * 자신인지 여부에 대한 값을 반환합니다. */protected function isOurFocus(target:DisplayObject):Boolean{

return (target == this);}

/** * @private * 포커스를 그리는 메소드 */protected function drawFocus(focused:Boolean):void{

isFocused = focused;

if (uiFocusRectSkin != null && contains(uiFocusRectSkin)){

removeChild(uiFocusRectSkin);uiFocusRectSkin = null;

}

if (focused){

uiFocusRectSkin = getFocusRectSkinInstance();

if (uiFocusRectSkin == null)return;

var focusPadding:int = 2;uiFocusRectSkin.x = -focusPadding;uiFocusRectSkin.y = -focusPadding;uiFocusRectSkin.width = _width + focusPadding * 2;uiFocusRectSkin.height = _height + focusPadding * 2;

addChildAt(uiFocusRectSkin, 0);}

}

237 / 307

6. 참고 자료

/** * @private * 포커스 인디케이터를 생성하여 반환하는 메소드 */protected function getFocusRectSkinInstance():DisplayObject{

var focusRectInstance:DisplayObject;

if (uiFocusRect == null)focusRectInstance = null;

if (uiFocusRect is Class)focusRectInstance = (new uiFocusRect()) as DisplayObject;

return focusRectInstance;}

/** * 포커스 받은 객체를 반환하는 메소드 */public function getFocus():InteractiveObject{

if (stage) {return stage.focus;

}return null;

}

//--------------------------------------------------------------------------// // Event Handlers// //--------------------------------------------------------------------------

/** * @private * AccessibileSprite 인스턴스가 포커스를 받으면 실행되는 이벤트 핸들러 */protected function focusInHandler(event:FocusEvent):void{

if (isOurFocus(event.target as DisplayObject)){

drawFocus(true);isFocused = true;

}}

/** * @private * AccessibleSprite 인스턴스가 포커스를 잃게 되면 실행되는 이벤트 핸들러 */protected function focusOutHandler(event:FocusEvent):void{

if (isOurFocus(event.target as DisplayObject)){

238 / 307

6. 참고 자료

drawFocus(false);isFocused = false;

}}

/** * @private * AccessibleSprite 인스턴스에서 키 다운 이벤트가 발생하면 실행되는 이벤트 핸들러로 * AccessibleSprite 를 상속받은 클래스에서 구현한다. */protected function keyDownHandler(event:KeyboardEvent):void{

// 서브 클래스에서 구현

}

/** * @private * AccessibleSprite 인스턴스에서 키 업 이벤트가 발생하면 실행되는 이벤트 핸들러로 * AccessibleSprite 를 상속받은 클래스에서 구현한다. */protected function keyUpHandler(event:KeyboardEvent):void{

// 서브 클래스에서 구현

}

/** * @private * AccessibleSprite 인스턴스의 접근성 코드를 초기화 시키는 이벤트 핸들러로 * 생성자에서 트리거 됩니다. */protected function hookAccessibility(event:Event):void{

removeEventListener(Event.ENTER_FRAME, hookAccessibility);initializeAccessibility();

}

}}

멤버 분류 설명

createAccessibilityImplementation

클래스 변수(메소드)

UI 컴포넌트(AccessibleSprite를 상속받은 클래스)에 대한 접근성 구현 클래스에서 이 값을 지정하여 접근성 정보를 할당합니다.

width / height 속성 UI 컴포넌트의 너비와 높이에 대한 속성으로 포커스 상자를 제외하거나 컴포넌트의 크기와 무관한 요소들을 제외 시킬 수 있도록 재정의 합니다. 이 값은 UI 컴포넌트의 실제 물리적인 크기와 다를 수 있습니다.

enabled 속성 UI 컴포넌트의 사용 가능 여부를 나타내는 속성으로 이 값에 따라 STATE_SYSTEM_UNAVAILABLE값을 MSAA에 전달하여 컴포넌트의 사용 가능 여부를 보조 도구에 알려줍니다.

239 / 307

6. 참고 자료

visible 속성 화면상에 UI 컴포넌트가 나타나 있는지에 대한 속성으로 이 값에 따라 EVENT_OBJECT_SHOW 또는 EVENT_OBJECT_HIDE 값을 MSAA에 전달합니다.

initializeAccessibility() 메소드 UI 컴포넌트와 이 UI 컴포넌트에 대응하는 접근성 구현 클래스와의 연결을 하며, 이 메소드 안에서 createAccessibilityImplementation 변수 값에 할당된 함수를 실행하여 접근성 정보를 이 UI 컴포넌트에 할당하게 됩니다.

hookAccessibility() 이벤트 핸들러

접근성 초기화 메소드인 initializeAccessibility 메소드를 트리거 하는 메소드입니다.

B. accessibility.AccessibleSpriteAccImpl

AccessibleSpriteAccImpl 클래스는 AccessibleSprite 클래스에 대한 접근성 구현 클래스입니다. AccessibleSprite 를 직접 사용하지 않기 때문에 이 AccessibleSpriteAccImpl 클래스 마찬가지로 직접 사용하지 않습니다. AccessibleSpriteAccImpl 클래스는 다른 접근성 구현 클래스(accessibility.AccImpl) 내부에서 사용하는 기반 클래스입니다.

accessibility 패키지를 만들고 그 안에 AccessibleSpriteAccImpl 클래스를 생성하여 그 안에 다음 코드를 작성합니다.package accessibility{import core.AccessibleSprite;

import flash.accessibility.AccessibilityProperties;import flash.events.Event;

/** * AccessibleSprite 액세스 가능성 구현 클래스라고도 하는 AccessibleSpriteAccImpl * 클래스는 AccessibleSprite 구성 요소에 액세스할 수 있도록 하는 데 사용됩니다. * 이 클래스는 List 기반 구성 요소와 화면 판독기 간의 통신을 가능하게 합니다. * 화면 판독기는 시각 장애가 있는 사용자를 위해 화면 내용을 합성된 음성이나 * 점자로 변환하는 데 사용됩니다. */public class AccessibleSpriteAccImpl extends AccessibilityProperties{

//--------------------------------------------------------------------------// // Class Variables// //--------------------------------------------------------------------------

/** * @private * * hookAccessibility() 메소드를 트리거 하는 정적 변수. * 이것은 AccessibleSprite의 createAccessibilityImplementation() 메소드에 * 연결할 AccessibileSpriteAccImpl 크래스를 초기화 하기 위해 사용합니다. */private static var accessibilityHooked:Boolean = hookAccessibility();

//--------------------------------------------------------------------------// // Variabels// //--------------------------------------------------------------------------

240 / 307

6. 참고 자료

/** * @private * AccessibleSprite 자신에 대한 참조 */protected var master:AccessibleSprite;

//--------------------------------------------------------------------------// // Constructor// //--------------------------------------------------------------------------

/** * Constructor */public function AccessibleSpriteAccImpl(component:AccessibleSprite){

super();

master = component;

var accProp:AccessibilityProperties = component.accessibilityProperties;

if (accProp){

silent = accProp.silent;forceSimple = accProp.forceSimple;noAutoLabeling = accProp.noAutoLabeling;

if (accProp.name){

name = accProp.name;}

if (accProp.description){

description = accProp.description;}

if (accProp.shortcut){

shortcut = accProp.shortcut;}

}}

//--------------------------------------------------------------------------// // Class Methods// //--------------------------------------------------------------------------

/** * @private * AccessibleSpriteImpl 클래스를 사용하여 AccessibleSprite의

241 / 307

6. 참고 자료

* createAccessbilityImplementation 메소드를 스와핑하는 정적 메소드 */private static function hookAccessibility():Boolean{

AccessibleSprite.createAccessibilityImplementation = createAccessibilityImplementation;

return true;}

/** * 접근성 클래스를 생성하는 메소드 * 이 메소드는 AccessibleSprite 클래스로부터 호출이 됩니다. */public static function

createAccessibilityImplementation(component:AccessibleSprite):void{

component.accessibilityProperties = new AccessibleSpriteAccImpl(component);

}

/** * AccessibleSprite의 접근성 기능을 활성화 시키는 정적 메소드 */public static function enabledAccessibility():void{

}

//--------------------------------------------------------------------------// // Event Handlers// //--------------------------------------------------------------------------

/** * @private * 모든 AccessibleSpriteImpl 클래스의 서브 클래스에서는 이 이벤트 핸들러를 * 구현해야 하며, 이것은 master로부터 이벤트를 수신하기 위한 것입니다. */protected function eventHandler(event:Event):void{

}

}}


accessibilityHooked 클래스 변수 AccessibleSpriteImpl 클래스가 메모리에 등록되는 순간 hookAccessibility() 메소드를 호출하고 메소드의 반환 값이 true를 저장합니다.

master 변수 접근성 구현 클래스와 연관이 된 UI 컴포넌트 클래스를 의미하며 이 값은 AccessibleSprite 클래스나 AccessibleSprite 클래스를

242 / 307

6. 참고 자료

상속받은 클래스의 인스턴스여야 합니다.

AccessibleSpriteImpl 생성자 AccessibleSprite 인스턴스를 인자로 받으며, 인자로 받은 AccessibleSprite의 접근성 기본 속성인 AccessibilityProperties의 정보를 지정합니다.

hookAccessibility() 메소드 연관된 UI 컴포넌트인 AccessibleSprite 클래스의 클래스 변수인 createAccessibilityImplementation 값에 AccessibleSpriteImpl에서 생성한 접근성 정보 값을 할당합니다.

enabledAccessibility() 메소드 내부적으로 실행하는 기능은 없으며 AccessibleSpriteImpl를 메모리에 올리는 기능만 합니다. 그렇게 됨으로써 accessibilityHooked 클래스 변수에 할당된 hookAccessibility() 메소드가 자동으로 실행이 되면서 UI 컴포넌트에 대한 접근성 정보를 활성화 하게 됩니다.

eventHandler 이벤트 핸들러

모든 AccessibleSpriteAccImpl 클래스의 서브 클래스는 이 이벤트 핸들러 내용을 구현해야 하며, master로 등록된 UI 컴포넌트로부터 전달되는 이벤트들을 수신하고 처리하는 역할을 합니다.

C. accessibility.AccImpl

AccImpl 는 접근성 구현 클래스의 기초가 되는 기반 클래스이며, IAccessible 인터페이스의 하위 집합인 flash.accessibility.AccessibilityImplementation 클래스를 상속하고 있습니다. 그러므로 MSAA 를 사용하기 위한 메소드들이 정의되어 있고, AccImpl 클래스를 상속한 접근성 구현 클래스에서는 스크린 리더기와 같은 보조도구에 접근성 정보를 전달할 수 있습니다.

AccessibleSprite 클래스를 상속받아 제작된 컴포넌트는 그에 대응하도록 AccImpl 클래스를 상속하여 제작하여야 합니다.

accessibility 패키지에 AccImpl 클래스를 생성하고 다음 코드를 작성합니다.package accessibility{import core.AccessibleSprite;

import flash.accessibility.AccessibilityImplementation;import flash.events.Event;

/** * 접근성 구현 클래스 */public class AccImpl extends AccessibilityImplementation{

//--------------------------------------------------------------------------// // Variables// //--------------------------------------------------------------------------

/** * @private * 이 AccImpl 클래스가 접근성 있도록 만들어줄 컴포넌트 */protected var master:AccessibleSprite;

/** * @private

243 / 307

6. 참고 자료

* 접근성 상에서 이 컴포넌트의 역할 */protected var role:uint;

//--------------------------------------------------------------------------// // Properties// //--------------------------------------------------------------------------

/** * 모든 하위 클래스에서는 이 속성을 오버라이드(재정의) 해야 하며 * 수신해야 할 포함하고 있는 이벤트 들의 목록 */protected function get eventsToHandle():Array{

return [];}

//--------------------------------------------------------------------------// // Constructor// //--------------------------------------------------------------------------

/** * Constructor */public function AccImpl(component:AccessibleSprite){

super();

stub = false;

master = component;master.accessibilityProperties = new AccessibleSpriteAccImpl(component);

var eventsList:Array = eventsToHandle;

if (eventsList){

var loop:int = eventsList.length;for (var i:int = 0; i < loop; i++){

master.addEventListener(eventsList[i], eventHandler);}

}}

//--------------------------------------------------------------------------// // Class Methods// //--------------------------------------------------------------------------

/**

244 / 307

6. 참고 자료

* @private * 모든 하위 클래스에서는 이 클래스를 구현해야 합니다. */public static function

createAccessibilityImplementation(component:AccessibleSprite):void{

}

/** * 컴포넌트를 접근성 있도록 설정하려면 호출해야 하는 메소드 */public static function enableAccessibility():void{

}

//--------------------------------------------------------------------------// // Override Methods : AccessibilityImplementation// //--------------------------------------------------------------------------

/** * 컴포넌트의 시스템 롤(역할) 값을 반환하는 메소드 */override public function get_accRole(childID:uint):uint{

return role;}

/** * 컴포넌트이 접근성 상에서의 name 값을 반환하는 메소드 */override public function get_accName(childID:uint):String{

var accName:String = "";if (childID == 0

&& master.accessibilityProperties&& master.accessibilityProperties.name&& master.accessibilityProperties.name != "")

{accName += master.accessibilityProperties.name + " ";

}

accName += ((getName(childID)) ? getName(childID) : "") + getStatusName();

return (accName != null && accName != "") ? accName : null;}

//--------------------------------------------------------------------------// // Methods// //--------------------------------------------------------------------------

245 / 307

6. 참고 자료

/** * 인자로 들어온 childID 값에 해당하는 접근성 이름 값을 반환하는 메소드 */protected function getName(childID:uint):String{

return null;}

/** * 컴포넌트의 상태 값을 반환하는 메소드 */protected function getState(childID:uint):uint{

var accState:uint = AccConsts.STATE_SYSTEM_NORMAL;

if (!AccessibleSprite(master).enabled){

accState |= AccConsts.STATE_SYSTEM_UNAVAILABLE;}else{

accState |= AccConsts.STATE_SYSTEM_FOCUSABLE;

if (AccessibleSprite(master) == AccessibleSprite(master).getFocus())

{accState |= AccConsts.STATE_SYSTEM_FOCUSED;

}}

return accState;}

private function getStatusName():String{

return ""}

//--------------------------------------------------------------------------// // Event Handlers// //--------------------------------------------------------------------------

protected function eventHandler(event:Event):void{

}

}}


master 변수 접근성 구현 클래스와 쌍을 이루는 AccessibleSprite을 상속한

246 / 307

6. 참고 자료

클래스의 인스턴스입니다.

role 변수 객체 기반의 역할 상수 값으로 이 값은 스크린 리더기와 같은 보조 도구에 전달이 되며, 이 값을 통해 UI 컴포넌트가 어떤 역할을 하는 컴포넌트인지를 알게 됩니다.

eventToHandle 속성 접근성 구현 클래스에서 master 쪽으로 등록을 해주어야 하는 이벤트 목록입니다. 이 배열의 요소인 이벤트들은 생성자에서 master에 등록을 하게 됩니다.

AccImpl 생성자 인자로 받은 AccessibleSprite 기반의 인스턴스를 master에 등록으로 하고 master에 eventToHandle 안의 이벤트 수신을 추가합니다.

createAccessibilityImplement() 클래스 메소드

AccImpl 클래스를 상속하는 접근성 구현 클래스에서 구현해야 하는 메소드로 UI 컴포넌트에 대한 접근성 정보를 전달하고 적용시킵니다.

enabledAccessibility() 클래스 메소드

접근성 구현 클래스를 메모리로 올려서 대응되는 UI 컴포넌트의 접근성 기능을 활성화 시킵니다.

get_accRole() 오버라이드(재정의) 메소드

컴포넌트의 객체 기반 시스템 역할 값을 반환하여 MSAA에 알려줍니다.

get_accName() 오버라이드(재정의) 메소드

컴포넌트의 이름(대체 텍스트)을 반환하여 MSAA에 알려줍니다.flash.accessibility.AccessibilityProperties.name의 값과 객체의 자식 객체의 유무, 그리고 상태에 따른 이름을 반환합니다.

getName() 메소드 지정한 자식 객체의 ID에 해당하는 객체의 이름을 반환합니다.

getState() 메소드 컴포넌트의 상태 값을 반환하며, enabled 속성에 의해 컴포넌트의 사용 가능 여부, 포커스를 받을 수 있는 상태 등에 따라 해당하는 상태 값을 반환합니다.

eventHandler() 이벤트 핸들러

모든 AccImpl 클래스의 서브 클래스는 이 이벤트 핸들러 내용을 구현해야 하며, master로 등록된 UI 컴포넌트로부터 전달되는 이벤트들을 수신하고 처리하는 역할을 합니다.

D. accessibility.AccConts

MSAA 클라이언트가 사용해야 하는 객체 역할 상수, 객체 상태 상수, 이벤트 상수 값을 정의한 열거 형 클래스입니다.

1.32.3 슬라이더 컴포넌트 및 슬라이더의 접근성 구현 클래스 제작이 예제에서는 편의상 가로 방향으로만 사용할 수 있는 HorizontalSlider 클래스를 제작합니다. 이 문서에서는 슬라이더의 본래의 기능을 구현하는 방법에 대해서는 설명하지 않으며, 접근성 구현을 위해 필요한 항목들에 대해서만 언급합니다.

A. 슬라이더 스킨의 제작슬라이더의 UI 를 표시하기 위한 스킨을 제작해야 합니다. assets 폴더 안에 SliderAssets.fla 를 생성하고 스킨을 제작합니다.

슬라이더 스킨은 다음 표에서 정의를 하였습니다.스킨 이미지 클래스 비고

슬라이더 트랙 controls.slider.sliderassets.SliderTrack

플렉서블하게 크기가 변경될 수 있도록 slice9Scale 을 적용합니다.

보통 상태의 핸들 controls.slider.sliderassets.ThumbNormal

247 / 307

6. 참고 자료

마우스 오버시의 핸들

controls.slider.sliderassets.ThumbOver

마우스 프레스 시의 핸들

controls.slider.sliderassets.ThumbPress

포커스 사각형 controls.slider.sliderassets.SliderFocusRect

플렉서블하게 크기가 변경될 수 있도록 slice9Scale 을 적용합니다

이 스킨들은 무비 클립 심볼로 제작을 하며, 클래스를 지정해야 합니다. 클래스를 지정할 때 Base Class 는 flash.display.Sprite 로 지정합니다.

그림 124 심볼 속성 지정

248 / 307

6. 참고 자료

그림 125 라이브러리에 정의한 슬라이더 스킨 요소

SliderAssets.fla 파일을 저장하고 제작 설정(File > 제작 설정 또는 Ctrl + Shift + F12)을 실행하여 제작 설정 다이얼로그를 띄웁니다. 제작 설정 다이얼로그 좌측의 제작 형식 리스트에서 모두 체크 해제를 하고 SWC 항목 한 개만 체크합니다. 그리고 출력 파일 항목에는 ../libs/SliderAssets.swc 를 입력합니다.

이 libs 경로는 사전에 프로젝트의 환경을 설정 할 때 외부 라이브러리 경로로 등록한 장소입니다. 제작 버튼을 클릭하면 이전에 만들어둔 libs 경로에 SliderAssets.swc 라는 라이브러리 파일이 추가가 되며, 외부 라이브러리로 정의된 슬라이더의 스킨 클래스를 프로젝트 내에서 사용할 수 있게 됩니다.

249 / 307

6. 참고 자료

그림 126 제작 설정 다이얼로그에서의 설정 화면

B. controls.HorizontalSlider – 가로 방향 슬라이더 클래스controls 패키지를 만들고 그 안에 HorizontalSlider.as 라는 클래스 파일을 생성합니다. 이 클래스는 실제로 화면에 가로 방향의 슬라이더의 형태로 표시가 되는 UI 컴포넌트입니다. 이 HorizontalSlider 클래스는 반드시 AccessibleSprite 클래스를 상속해서 제작해야 합니다.

HorizontalSlider 클래스에 다음 코드를 작성합니다.package controls{import controls.slider.sliderassets.SliderFocusRect;

250 / 307

6. 참고 자료

import controls.slider.sliderassets.SliderTrack;import controls.sliderclasses.SliderClickTarget;import controls.sliderclasses.SliderInteractiveDeviceType;import controls.sliderclasses.SliderThumb;

import core.AccessibleSprite;

import events.SliderEvent;

import flash.display.Sprite;import flash.events.Event;import flash.events.FocusEvent;import flash.events.KeyboardEvent;import flash.events.MouseEvent;import flash.geom.Rectangle;import flash.ui.Keyboard;

[Event(name="change", type="events.SliderEvent")][Event(name="thumbDrag", type="events.SliderEvent")][Event(name="thumbPress", type="events.SliderEvent")][Event(name="thumbRelease", type="events.SliderEvent")]public class HorizontalSlider extends AccessibleSprite{

//--------------------------------------------------------------------------// // Class Variables// //--------------------------------------------------------------------------

public static var createAccessibilityImplementation:Function;

//--------------------------------------------------------------------------// // Variables// //--------------------------------------------------------------------------

private var track:Sprite;private var thumb:SliderThumb;

private var isPressThumb:Boolean;

//--------------------------------------------------------------------------// // Properties// //--------------------------------------------------------------------------


super.width = value;

if (track)track.width = value;

}

251 / 307

6. 참고 자료

//--------------------------------------// minimum//--------------------------------------

/** * @private * * 속성의 저장 공간입니다. */private var _minimum:Number = 0;

[Inspectable(defaultValue=0)]/** * 최소 값 */public function get minimum():Number{

return _minimum;}

/** * @private */public function set minimum(value:Number):void{

_minimum = value;this.value = Math.max(value, this.value);

}

//--------------------------------------// maximum//--------------------------------------

/** * @private * * 속성의 저장 공간입니다. */private var _maximum:Number = 10;

[Inspectable(defaultValue=10)]/** * 최대 값 */public function get maximum():Number{

return _maximum;}

/** * @private */public function set maximum(value:Number):void{

_maximum = value;this.value = Math.min(value, this.value);

252 / 307

6. 참고 자료

}

//--------------------------------------// value//--------------------------------------

/** * @private * * 속성의 저장 공간입니다. */private var _value:Number = 0;

[Inspectable(defaultValue=0)]/** * 설정 값 */public function get value():Number{

return _value;}

/** * @private */public function set value(value:Number):void{

_value = value;}

//--------------------------------------------------------------------------// // Constructor// //--------------------------------------------------------------------------

/** * Constructor */public function HorizontalSlider(){

super();configurateUI();

}

//--------------------------------------------------------------------------// // Override Methods// //--------------------------------------------------------------------------

override protected function initializeAccessibility():void{

if (HorizontalSlider.createAccessibilityImplementation != null)HorizontalSlider.createAccessibilityImplementation(this);

}

253 / 307

6. 참고 자료

//--------------------------------------------------------------------------// // Methods// //--------------------------------------------------------------------------

/** * @private * UI 초기 및 생성하는 메소드 */protected function configurateUI():void{

track = new SliderTrack();addChild(track);

super.width = track.width;super.height = track.height;

thumb = new SliderThumb();thumb.x = 0;thumb.y = Math.floor((track.y + track.height) / 2);

thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbMouseDownHandler, false, 0, true);

thumb.addEventListener(MouseEvent.MOUSE_UP, thumbMouseUpHandler, false, 0, true);

addChild(thumb);

this.uiFocusRect = SliderFocusRect;}

/** * @private * value 계산하는 메소드 */private function calcurateValue(xPos:Number, interactiveType:String,

clickTarget:String, keyCode:int = undefined):void{

var newValue:Number = (xPos / width) * (maximum - minimum);newValue = minimum + newValue;

setNewValue(newValue, interactiveType, clickTarget, keyCode);}

/** * @private * 새로운 값을 계산하여 value 값을 갱신하고 thumb의 위치를 조정하는 메소드 */private function setNewValue(newValue:Number, interactiveType:String,

clickTarget:String, keyCode:int):void{

var oldValue:Number = value;

value = Math.max(minimum, Math.min(maximum, Math.round(newValue)));

254 / 307

6. 참고 자료

if (oldValue != value&& (clickTarget != null || interactiveType ==

SliderInteractiveDeviceType.KEYBOARD)){

dispatchEvent(new SliderEvent(SliderEvent.CHANGE, value, clickTarget, interactiveType, keyCode));

}

if (interactiveType == SliderInteractiveDeviceType.KEYBOARD){

setThumbPosition();}

}

/** * @private * value 값을 통해 thumb의 위치를 계산하여 지정하는 메소드 */private function setThumbPosition():void{

if (value >= minimum || value <= maximum){

thumb.x = (value - minimum) / (maximum - minimum) * width;}

}

//--------------------------------------------------------------------------// // Override Event Handlers// //--------------------------------------------------------------------------

/** * @private * 컴포넌트가 포커스 입력을 받았을 때 실행되는 이벤트 핸들러 */override protected function focusInHandler(event:FocusEvent):void{

super.focusInHandler(event);thumb.setFocusInState();

}

/** * @private * 컴포넌트가 포커스를 잃었을 때 실행되는 이벤트 핸들러 */override protected function focusOutHandler(event:FocusEvent):void{

super.focusOutHandler(event);thumb.setFocusOutState();

}

/** * @private

255 / 307

6. 참고 자료

* 키보드를 눌렀을 때 실행되는 이벤트 핸들러 */override protected function keyDownHandler(event:KeyboardEvent):void{

var incrementNumber:Number = 1;var newValue:Number;

if (event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.UP){

newValue = value + incrementNumber;}else if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.DOWN){

newValue = value - incrementNumber;}else if (event.keyCode == Keyboard.HOME){

newValue = minimum;}else if (event.keyCode == Keyboard.END){

newValue = maximum;}

if (!isNaN(newValue)){

event.stopPropagation();setNewValue(newValue, SliderInteractiveDeviceType.KEYBOARD, null,

event.keyCode);}

}

//--------------------------------------------------------------------------// // Event Handlers// //--------------------------------------------------------------------------

/** * @private * 슬라이더의 핸들을 눌렀을 때 실행되는 이벤트 핸들러 */protected function thumbMouseDownHandler(event:MouseEvent):void{

isPressThumb = true;

stage.focus = this;

var thumb:SliderThumb = event.currentTarget as SliderThumb;var rect:Rectangle = track.getBounds(this);rect.y = thumb.y;rect.height = 0;thumb.startDrag(false, rect);

256 / 307

6. 참고 자료

stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false, 0, true);

stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false, 0, true);

dispatchEvent(new SliderEvent(SliderEvent.THUMB_PRESS, value, SliderClickTarget.THUMB, SliderInteractiveDeviceType.MOUSE))

}

/** * @private * 슬라이더의 핸들에서 마우스를 떼었을 때 실행되는 이벤트 핸들러 */protected function thumbMouseUpHandler(event:MouseEvent):void{

if (isPressThumb){

isPressThumb = false;thumb.stopDrag();stage.removeEventListener(MouseEvent.MOUSE_UP,

stageMouseUpHandler);stage.removeEventListener(MouseEvent.MOUSE_MOVE,

stageMouseMoveHandler);

dispatchEvent(new SliderEvent(SliderEvent.THUMB_RELEASE, value, SliderClickTarget.THUMB, SliderInteractiveDeviceType.MOUSE));

dispatchEvent(new SliderEvent(SliderEvent.CHANGE, value, SliderClickTarget.THUMB, SliderInteractiveDeviceType.MOUSE));

}}

/** * @private * 스테이지가 마우스 무브 이벤트를 받았을 때 실행되는 이벤트 핸들러 */protected function stageMouseMoveHandler(event:MouseEvent):void{

if (isPressThumb){

calcurateValue(thumb.x, SliderInteractiveDeviceType.MOUSE, SliderClickTarget.THUMB);

dispatchEvent(new SliderEvent(SliderEvent.THUMB_DRAG, value, SliderClickTarget.THUMB, SliderInteractiveDeviceType.MOUSE));

event.updateAfterEvent();

}}

/** * @private * 스테이지가 마우스 업 이벤트를 받았을 때 실행되는 이벤트 핸들러 */protected function stageMouseUpHandler(event:MouseEvent):void{

isPressThumb = false;thumb.stopDrag();

257 / 307

6. 참고 자료

stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler);stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);

dispatchEvent(new SliderEvent(SliderEvent.THUMB_RELEASE, value, SliderClickTarget.THUMB, SliderInteractiveDeviceType.MOUSE));

dispatchEvent(new SliderEvent(SliderEvent.CHANGE, value, SliderClickTarget.THUMB, SliderInteractiveDeviceType.MOUSE));

}

}}



클래스 변수 UI 컴포넌트(AccessibleSprite를 상속받은 클래스)에 대한 접근성 구현 클래스에서 이 값을 지정하여 접근성 정보를 할당합니다.이 예제의 경우 HorizontalSlider의 접근성 구현 클래스인HorizontalSliderAccImpl클래스에서 이 값에 대한 함수를 지정하게 됩니다.

width 오버라이드(재정의) 속성

이 예제에서는 컴포넌트의 너비 값으로 트랙의 너비만을 사용하기 때문에 width라는 속성을 재정의 하였습니다.

initializeAccessibility() 오버라이드(재정의) 메소드

접근성 활성을 초기화 하는 메소드로 HorizontalSliderAccImpl 클래스에 HorizontalSlider 클래스의 인스턴스를 전달하여 접근성 구현을 시작하게 됩니다.

C. accessibility.HorizontalSliderAccImpl – 가로방향 슬라이더의 접근성 구현 클래스HorizontalSliderAccImpl 클래스는 HorizontalSlider 의 접근성 구현 클래스이며 AccImpl 클래스를 상속받습니다. 이 클래스 내부에서는 HorizontalSlider 클래스의 역할과 상태, 값들을 IAccessible 인터페이스에서 정의한 메소드들을 사용하여 MSAA 로 전달하게 됩니다.

이러한 이벤트들과 값을 전달 할 때에는 flash.accessibility.Accessibility.sentEvent() 메소드를 사용합니다.

accessibility 패키지 안에 HorizontalSliderAccImpl 클래스를 생성하고 다음 코드를 작성합니다.package accessibility{import controls.HorizontalSlider;

import core.AccessibleSprite;

import events.AccessibleSpriteEvent;import events.SliderEvent;

import flash.accessibility.Accessibility;import flash.events.Event;import flash.events.FocusEvent;

public class HorizontalSliderAccImpl extends AccImpl{

//--------------------------------------------------------------------------//

258 / 307

6. 참고 자료

// Class Variables// //--------------------------------------------------------------------------

private static var accessiblityHooked:Boolean = hookAccessibility();

//--------------------------------------------------------------------------// // Propertes// //--------------------------------------------------------------------------

override protected function get eventsToHandle():Array{

return super.eventsToHandle.concat(AccessibleSpriteEvent.SHOW,AccessibleSpriteEvent.HIDE,SliderEvent.CHANGE

);}

//--------------------------------------------------------------------------// // Constructor// //--------------------------------------------------------------------------

/** * Constructor */public function HorizontalSliderAccImpl(component:AccessibleSprite){

super(component);

role = AccConsts.ROLE_SYSTEM_SLIDER;}

//--------------------------------------------------------------------------// // Class Methods// //--------------------------------------------------------------------------

private static function hookAccessibility():Boolean{

HorizontalSlider.createAccessibilityImplementation = createAccessibilityImplementation;

return true;}

public static function createAccessibilityImplementation(component:AccessibleSprite):void

{component.accessibilityImplementation = new

HorizontalSliderAccImpl(component)}

259 / 307

6. 참고 자료

public static function enabelAccessiblity():void{

}

//--------------------------------------------------------------------------// // Override Methods// //--------------------------------------------------------------------------

override public function get_accRole(childID:uint):uint{

return role;}

override public function get_accName(childID:uint):String{

return super.get_accName(childID);}

override public function get_accState(childID:uint):uint{

var accState:uint = getState(childID);

if (master.enabled) {

accState |= AccConsts.STATE_SYSTEM_SELECTABLE;

if (childID == 0) {

accState |= AccConsts.STATE_SYSTEM_SELECTED; } else {

accState |= AccConsts.STATE_SYSTEM_SELECTED | AccConsts.STATE_SYSTEM_FOCUSED;

}}return accState;

}

override public function get_accValue(childID:uint):String{

var value:Number = (master as HorizontalSlider).value;

value = (value - (master as HorizontalSlider).minimum) / ((master as HorizontalSlider).maximum - (master as HorizontalSlider).minimum) * 100;

return value.toString(); }

override protected function eventHandler(event:Event):void{

switch (event.type){

260 / 307

6. 참고 자료

case SliderEvent.CHANGE:{

Accessibility.sendEvent(master, 0, AccConsts.EVENT_OBJECT_SELECTION);

Accessibility.sendEvent(master, 0, AccConsts.EVENT_OBJECT_VALUECHANGE, true);

break;}

case AccessibleSpriteEvent.SHOW:{

Accessibility.sendEvent(master, 0, AccConsts.EVENT_OBJECT_SHOW);

break;}

case AccessibleSpriteEvent.HIDE:{

Accessibility.sendEvent(master, 0, AccConsts.EVENT_OBJECT_HIDE);

break;}

}}

}}


accessibilityHooked 클래스 변수 HorizontalSliderAccImpl 클래스가 메모리에 올라가는 순간(HorizontalSliderAccImpl.enabledAccessibility()를 호출하는 순간) 정의된 hookAccesibility() 메소드를 실행하여 접근성 정보에 대한 초기화를 시작합니다.

eventToHandle 오버라이드(재정의) 속성

HorizontalSlider의 상태나 값 들에 대한 이벤트 들을 정의한 배열입니다.

HorizontalSliderAccImpl 생성자 인자로 받은 HorizontalSlider에 대해 AccessibilityProperties 값을 적용하고 eventToHandle에 정의한 이벤트들을 수신할 수 있도록 추가합니다.그리고 객체 기반 역할 값인 role 변수에 ROLE_SYSTEM_SLIDER 값을 할당합니다.

hookAccessibility() 클래스 메소드

HorizontalSlider 클래스의 클래스 변수인 createAccessibilityImplementation 값에 createAccessibilityImplementation 메소드를 할당합니다. 이로 인해서 접근성에 대한 기능을 초기화 하게 됩니다.


클래스 메소드

HoriztionSliderAccImpl의 인스턴스를 생성하여 HorizontalSlider의 accessibilityImplementation 값에 할당을 합니다.

enabledAccessibility() 클래스 메소드

HorizontalSlider 클래스의 접근성 기능을 활성화 합니다.

get_accRole() 오버라이드 HorizontalSlider의 객체 역할 값인 ROLE_SYSTEM_SLIDER 값을

261 / 307

6. 참고 자료

(재정의) 메소드

반환하여 MSAA에 전달합니다.

get_accName() 오버라이드(재정의) 메소드

컴포넌트의 이름(대체 텍스트)을 반환하여 MSAA에 전달합니다.flash.accessibility.AccessibilityProperties.name의 값과 객체의 자식 객체의 유무, 그리고 상태에 따른 이름을 반환합니다.

get_accState() 오버라이드(재정의) 메소드

HorizontalSlider의 상태 값을 현재 상태에 따라 MSAA에 전달합니다.

get_accValue() 오버라이드(재정의) 메소드

HorizontalSlider의 핸들이 위치함 값인 value를 백분율로 연산하여 MSAA에 전달합니다.

eventHandler() 이벤트 핸들러

HorizontalSliderAccImpl 생성자에서 master에 등록한 이벤트에 대한 처리를 합니다. 이 예제에서는 HorizontalSlider 인스턴스의 값이 변경되었을 때, 그리고 visible 속성에 의해 화면에 나타나고 숨겨졌을 때에 대한 이벤트가 발생하였을 때 flash.accessibility.Accessibility.sendEvent() 메소드를 사용하여 지정된 이벤트 상수를 포함시켜 MSAA로 전달합니다.

1.32.4 CustomAccessibilityImplement – 도큐먼트 클래스이 클래스는 CustomAccessibilityImplement 프로젝트의 도큐먼트 클래스입니다. 이 클래스 안에서 HorizontalSlider 인스턴스를 만들고, HorizontalSliderAccImpl 접근성 구현 클래스를 실행하여 스크린 리더기로 HorizontalSlider 의 역할과 값 등의 정보를 보냅니다.

CustomAccessibilityImplement 클래스에 다음 코드를 작성합니다.package{import accessibility.HorizontalSliderAccImpl;

import controls.HorizontalSlider;

import events.SliderEvent;

import flash.accessibility.AccessibilityProperties;import flash.display.Sprite;import flash.display.StageScaleMode;

[SWF(frameRate="24", width="800", height="600", backgroundColor="#FFFFFF")]public class CustomAccessibilityImplement extends Sprite{

//--------------------------------------------------------------------------// // Variables// //--------------------------------------------------------------------------

/** * @private * HorizontalSlider의 인스턴스 */private var slider:HorizontalSlider;

262 / 307

6. 참고 자료

//--------------------------------------------------------------------------// // Constructor// //--------------------------------------------------------------------------

/** * Constructor */public function CustomAccessibilityImplement(){

this.stage.scaleMode = StageScaleMode.NO_SCALE;

slider = new HorizontalSlider();slider.width = 300;slider.tabEnabled = true;slider.tabIndex = 2;slider.maximum = 10;slider.x = slider.y = 100;

var accProp:AccessibilityProperties = new AccessibilityProperties();accProp.name = "사용자 제작 슬라이더";slider.accessibilityProperties = accProp;addChild(slider);

HorizontalSliderAccImpl.enabelAccessiblity();}

}}

1.32.5 검토스크린 리더기를 실행하고 CustomAccessibilityImplementaion 어플리케이션을 컴파일 한 웹 페이지를 엽니다. 슬라이더로 포커스를 이동시키고 좌/우 또는 위/아래 화살표키를 사용하여 스크린 리더기가 슬라이더 객체와 슬라이더의 현재 값을 낭독하는 내용을 확인합니다.1. 처음 슬라이더가 포커스를 받았을 때

a. 사용자 제작 슬라이더 수평 슬라이드 선택 0퍼센트 감소하거나 증가시키려면 방향키를 사용하세요.2. 화살표 키를 사용하여 슬라이더를 조정할 때

a. 10퍼센트, 20퍼센트, 30퍼센트, ...

1.33 Flex 에서 사용자 컴포넌트 접근성 구현Flex 프레임웍을 기반으로 어플리케이션을 개발하다 보면, 기본적으로 제공되는 Flex 의 UI 컴포넌트만으로는 요구 사항과 디자인 요소를 모두 충족시킬 수 없는 상황이 발생합니다. 그렇기 때문에 기본으로 제공되는 컴포넌트(또는 클래스)를 일부 확장하거나 새롭게 제작해야 하는 경우가 많습니다. 기존의 Flex 의 컴포넌트를 확장하거나 또는 새로운 UI 컴포넌트를 제작해야 하려면, Flex 프레임웍이 가지고 있는 컴포넌트의 라이프 사이클을 이해하고, 제시된 확장점을 정확히 알고 있어야 효율적이고 안정적으로 동작하는 컴포넌트를 제작할 수 있습니다.

이와 마찬가지로 접근성과 관련된 코드들도 Flex 프레임웍에서 제공되고 있는 동작 방식을 이해하고 기존의 컴포넌트들에서 구현되어 있는 방법을 살펴보면 그리 어렵지 않게 접근성이 구현된 사용자 컴포넌트를 제작할 수 있습니다.

263 / 307

6. 참고 자료

이 절에서는 먼저 Flex 프레임웍의 접근성이 어떤 방식으로 구현이 되어 있는지를 이해하고, 접근성과 관련된 비교적 간단한 기본 컴포넌트의 코드를 살펴봅니다. 그리고 그와 동일한 방식을 사용하여 사용자 컴포넌트에 접근성 기능을 추가하는 방법을 알아봅니다.

1.33.1 Flex 프레임웍의 접근성 구현A. 구현 패턴앞 절에서 이미 여러 번 언급이 되었듯이, AccessibilityImplementation 클래스는 Flash Player 와 MSAA(또는 MSAA 클라이언트)와 연동을 할 수 있는 기본 통로입니다. 그렇기 때문에 이 클래스를 중심으로 접근성과 관련된 코드들이 동작하는 방법을 이해하는 것이 중요합니다.

그림 127 Flash Player 와 MSAA 클라이언트의 동장 관계

그림에서 보는 것과 같이, 스크린 리더기와 같은 MSAA 클라이언트 어플리케이션은 윈도우즈(운영체제)에서 MSAA 를 통해 콘텐츠로부터 접근성 관련 정보를 가져옵니다. 그리고, MSAA 는 IAccessible 인터페이스를 바탕으로 Flash Player 와 통신을 합니다.

Flash Player 에서 IAccessible 인터페이스를 구현한 클래스가 flash.accessibility.AccessibilityImplementation 이고, Flex 프레임웍에서는 이 AccessibilityImplementation 클래스를 확장한 기본 접근성 구현 클래스로써 mx.accessibility.AccImpl 클래스를 사용하게 됩니다.

Flex 프레임웍의 UI 구성을 위한 대부분의 컴포넌트에는 AccImpl 클래스를 상속한 UIComponentClassNameAccImpl 클래스가 1:1 로 존재하여 해당하는 컴포넌트에 대한 접근성을 구현하고 있습니다. (Flex 프레임웍의 네이밍 룰에 따르면 접근성 구현 클래스의 이름은 “컴포넌트 클래스 이름” + AccImpl 를 따릅니다)

정리하면, mx.accessibility.AccImpl 클래스는 flash.accessibility.AccessibilityImplement 클래스를 Flex 프레임웍에 맞게 구현한 것이고, 이 기반 클래스를 각각의 UI 컴포넌트들의 특성에 맞게 오버라이드(재정의)(재정의)하여 만든 것이 UIComponentClassNameAccImpl 입니다. 따라서, 새로운 컴포넌트를 생성하게 되면, 그에 맞는 접근성 구현 클래스를 함께 제작하여 두 클래스를 mix-in 방식으로 맺어줌으로 접근성 구현을 완성할 수 있게 됩니다.(mix-in 방식에 대해서는 뒤에 별도로 설명합니다.)

264 / 307

6. 참고 자료

B. 적절한 Role, State, Event 선정UI 컴포넌트들은 각각 역할에 맞는 Role, State, Event 를 사용해야 스크린 리더기와 같은 보조 도구들이 적절한 설명을 붙여서 읽어 줄 수 있게 됩니다. 그렇기 때문에 사용자 컴포넌트를 구현할 때 컴포넌트에 대한 접근성 구현 클래스를 작성하면서 이 부분에 대해 고민할 필요가 있습니다.

다음 표는 Flex 의 일부 UI 컴포넌트에 배정이 된 Role, State, Event 목록입니다(괄호 안의 클래스는 해당 컴포넌트에 대한 접근성 구현 클래스를 의미합니다).

Component Role State EventUIComponent(AccImpl)

STATE_SYSTEM_NORMALSTATE_SYSTEM_FOCUSABLESTATE_SYSTEM_UNAVAILABLESTATE_SYSTEM_FOCUSED

EVENT_OBJECT_NAMECHANGEEVENT_OBJECT_SHOWEVENT_OBJECT_HIDE

Button(ButtonAccImpl)

ROLE_SYSTEM_PUSHBUTTON STATE_SYSTEM_PRESSED EVENT_OBJECT_STATECHANGEEVENT_OBJECT_NAMECHANGE

List(ListBaseAccImpl)

ROLE_SYSTEM_LISTROLE_SYSTEM_LISTITEM

STATE_SYSTEM_OFFSCREENSTATE_SYSTEM_INVISIBLESTATE_SYSTEM_SELECTABLESTATE_SYSTEM_SELECTEDSTATE_SYSTEM_FOCUSEDSTATE_SYSTEM_MULTISELECTABLE

EVENT_OBJECT_SELECTIOINEVENT_OBJECT_FOCUS

DateField(DateFieldAccImpl)

ROLE_SYSTEM_COMBOBOX EVENT_OBJECT_FOCUSEVENT_OBJECT_SELECTION

위 표에서 볼 수 있듯이, 컴포넌트는 한 가지 이상의 Role 을 정의해야 하고, 한 가지 이상의 추가적인 State, Event 를 정의할 수 있습니다.

List 컴포넌트의 경우 컴포넌트 전체에 대한 Role 은 ROLE_SYSTEM_LIST 를 갖지만, 리스트 안의 각각의 아이템(목록)들은 ROLE_SYSTEM_LISTITEM 이라는 Role 을 반환하도록 되어 있습니다. 이에 대한 구분은 get_accRole() 메소드가 호출 될 때, 전달 받는 childID 파라미터를 보고 판단할 수 있습니다. childID 값이 0 이라면, 컴포넌트 그 자체를 의미하고, 0 보다 큰 숫자라면 컴포넌트 안에 있는 자식 객체를 의미합니다.public function ListBaseAccImpl(master:UIComponent){

super(master);role = AccConst.ROLE_SYSTEM_LIST;

}

override public function get_accRole(childID:uint):uint{

return childID == 0 ? role : AccConst.ROLE_SYSTEM_LISTITEM;}

UI 컴포넌트들은 상황에 따라서 한 가지 이상의 State 값을 가질 수 있습니다. 예를 들어 List 컴포넌트의 아이템(목록)은 선택할 수 있으면서 포커스도 받을 수 있습니다. 즉 STATE_SYSTEM_SELECTABLE 상태 값과 STATE_SYSTEM_FOCUSED 상태 값을 동시에 가질 수 있습니다.var accState:uint = getState(childID);

... (중략)

if (master is List)accState |= AccConst.STATE_SYSTEM_SELECTABLE;

265 / 307

6. 참고 자료

if (ListBase(master).isItemIndexSelected(index))accState |= AccConst.STATE_SYSTEM_SELECTED;

if (index == ListBase(master).caretIndex)accState |= AccConst.STATE_SYSTEM_FOCUSED;

... (중략)

return accState;

위 코드는 ListBaseAccImpl 의 get_accState() 메소드의 코드 일부입니다. 각각의 State 상태 값을 “or” 연산자( | )로 조합하여 accState 값을 설정하고 반환하는 것을 확인할 수 있습니다. 이렇게 반환된 State 값은 스크린 리더기로 하여금 적절한 사용자 동작을 유도할 수 있도록 안내하는 데 사용합니다.

DateField 컴포넌트의 경우, 접근성 구현 클래스인 mx.accessibility.DateFieldAccImpl 클래스에서 별도로 State 를 정의하지 않습니다. 이 경우 DateFieldAccImpl 클래스의 기반이 되는 mx.accessibility.AccImpl 클래스에서 기본적으로 반환하는 State 값만을 반환하게 됩니다. 즉, UI 컴포넌트가 특별한 State 값을 갖지 않을 경우에는 get_accState() 메소드를 오버라이드(재정의) 할 필요가 없습니다.

단, Role 은 반드시 정의해야 합니다.

Flex 컴포넌트에 대해 설명하면서 실제로 Flex SDK 에서 제공되는 컴포넌트 소스를 소개하였습니다. Flash Builder 상에서 컴포넌트의 소스를 쉽게 확인하는 방법은 Ctrl + Shift + T(Mac OS 에서는 Command + Shift + T) 단축키를 사용합니다.

C. mx.accessibility.AccImpl 접근성 구현 클래스이미 앞에서 mx.accessibility 패키지에 포함되어 있는 AccImpl 클래스는 flash.accessibility.AccessibilityImplementation 클래스를 Flex 프레임웍 환경에 맞게 구현한 것이라고 설명을 하였습니다. Flex 는 mx.core.UIComponent 라는 UI 의 기본이 되는 클래스와 이 클래스의 기본 요소를 중심으로 레이아웃을 만들고, 화면에 UI 요소를 렌더링을 비롯해서 포커스에 대한 핸들링을 하도록 되어 있습니다.

그렇기 때문에 접근성 구현 클래스 역시 이에 맞게 재정의가 될 필요가 있습니다. AccImpl 클래스는 UIComponent 클래스의 하위 클래스, 즉 하위 컴포넌트들에 대한 접근성 구현 클래스가 가져야 할 기본적인 값들을 설정하고 AccImpl 클래스의 하위 클래스가 상황에 맞게 재정의 할 수 있도록 확장점들을 가지고 있습니다.

다음은 AccImpl 클래스가 재정의한 주요 메소드 들로 주로 기본 값 설정을 하는 역할을 합니다.1. get_accRole(childID:uint):uint

protected 접근자로 선언된 role 이라는 값을 기본적으로 반환하도록 정의되어 있습니다. 따라서, AccImpl 클래스를

상속하는 하위 클래스에서는 컴포넌트의 Role 이 변경되지 않는다면, 이 메소드를 오버라이드(재정의)(재정의) 할 필요 없이

생성자에서 role 멤버 변수에 값을 설정합니다.2. get_accName(childID:uint):uint;

스크린 리더기가 컴포넌트의 이름을 읽어줄 문자열을 반환하는 메소드로, AccImpl 클래스는 이를 재정의 해서 다음과 같은

우선 순위와 패턴으로 문자열을 조합하여 반환하도록 정의되어 있습니다.a. childID 값이 0 보다 큰 경우 : 자식 컴포넌트에 대한 호출이며, protected 로 선언된 getName() 메소드의 결과 값을

반환합니다. 즉, 자식 객체에 대한 이름을 반환하는 경우 getName() 메소드를 오버라이드(재정의) 해서 재정의 합니다. List 컴포넌트의 경우 자식 아이템(목록)의 label 속성 값이 반환되도록 되어 있습니다.

b. childID 값이 0 인 경우 : 컴포넌트 자체에 대한 호출로 static 접근자로 선언된 getFormName() 메소드의 반환 값을 우선적으로 앞에 둡니다. 그 다음 accessibilityProperties.name 값을 뒤에 붙이게 되는데, 만약 이 name 값이 없는 경우에는 getName() 메소드의 반환 값이나 toolTip 속성에 사용한 문자열이 붙습니다. 그리고 뒤에 이어 getStatusName() 메소드의 결과값이 붙어서 반환됩니다.

266 / 307

6. 참고 자료

결과적으로 스크린 리더기에게 알맞은 이름을 전달하기 위해서, 각 컴포넌트의 접근성 구현 클래스에서는 getName() 메소드를 재정의하여 childID 값에 따라 적절하게 이름을 반환해야 할 필요가 있습니다.

3. getChilldIDArray():Array스크린 리더기에게 알려줄 자식 객체들에 대한 index 배열을 반환하도록 정의되어 있습니다. 컴포넌트가 자식 요소를 가지고

있지 않다면, 기본적으로 빈 배열을 반환하기 때문에, 이 메소드를 재정의할 필요는 없습니다. 여기서 말하는 자식 요소란, 시각적으로 보이는 실질적인 자식 객체가 아닌, 논리적으로 가지고 있는 자식을 의미합니다. 예를 들면, List 컴포넌트는

dataProvider 의 길이(length 속성)만큼 자식을 가지고 있는 것이며, 배열의 첫 번째 값을 1 로 시작하는 값을 가진

길이만큼의 배열을 반환합니다. 만약 dataProiveder 의 length 값이 5 라면, 이 메소드가 반환하는 배열은 [1, 2, 3, 4, 5]가

됩니다. 이러한 배열 생성을 위해서 AccImpl 클래스에는 createChildIDArray() 라는 protected 접근자의 메소드가 정의되어 있고, 이 메소드에 원하는 자식 요소의 개수를 넘기면, 위 형식대로 만들어진 배열이 반환됩니다.

AccImpl 클래스에서 재정의 메소드에서 사용하는 내부 메소드와 AccessibilityImplementation 클래스가 가지고 있는 메소드를 필요한 만큼 상황에 맞게 구현하는 것이 사용자 UI 컴포넌트에 대한 접근성 구현 클래스를 만드는 작업의 전부입니다.

D. UI 컴포넌트와 접근성 구현 클래스의 연결컴포넌트 클래스와 접근성 구현 클래스간의 연결은 전적으로 접근성 구현 클래스에서 정의하도록 되어 있습니다. 이는 UIComponentClassNameAccImpl 클래스에 정적 메소드인 enabledAccessibility() 메소드를 구현하는 것으로 시작합니다.public static function enableAccessibility():void{Button.createAccessibilityImplementation = createAccessibilityImplementation;}

mx_internal static function createAccessibilityImplementation(component:UIComponent):void{component.accessibilityImplementation = new ButtonAccImpl(component)}

이 코드는 ButtonAccImpl 클래스 소스의 일부분입니다. 코드에서 보는 것처럼, enableAccessibility 메소드를 만들고 그 내부에서는 이 클래스가 담당하는 컴포넌트(이 예제에서는 Button)의 createAccessibilityImplementation 속성에 접근성 클래스 인스턴스를 만드는 메소드를 배정하도록 되어 있습니다.

enableAccessibility 메소드는 Flex SDK 컴파일러가 컴파일 되면서 자동으로 생성되는 코드에서 호출되도록 추가되어 있습니다. 즉 Flex 로 만든 어플리케이션에서 실질적으로 사용하는 모든 컴포넌트에 대한 접근성 구현 클래스인 UIComponentClassNameAccImpl 클래스의 초기화 함수를 호출하는 코드가 자동으로 생성이 됩니다.if (Capabilities.hasAccessibility){mx.accessibility.UIComponentAccProps.enableAccessibility();mx.accessibility.ButtonAccImpl.enableAccessibility();mx.accessibility.TextBaseAccImpl.enableAccessibility();}

이 코드는 mxmlc 컴파일러가 자동으로 생성한 코드 중 일부로, Flex 로 제작한 어플리케이션에서 Label, Button() 컴포넌트를 사용했을 경우에 생성이 됩니다.

그렇다면 Flex 컴파일러는 Button 컴포넌트에 대한 접근성 구현 클래스가 ButtonAccImpl 클래스라는 것을 어떻게 알 수 있었을까요? 그것은 Button 클래스에 명시된 AccessibilityClass 라는 메타 태그에 있습니다.[AccessibilityClass(implementation="mx.accessibility.ButtonAccImpl")]

267 / 307

6. 참고 자료

컴파일러는 이 메타 태그를 확인하고 ButtonAccImpl 클래스의 enableAccessibility 메소드를 호출하는 코드를 어플리케이션 초기화 과정에 삽입을 합니다.

Flash Builder 로 컴파일 하는 과정에서 자동으로 생성된 코드를 확인하는 방법은 –keep-generated-actionscript 라는 컴파일 옵션을 사용하는 것입니다. Project Explorer 에서 작업하고 있는 프로젝트에 우 클릭 > Properties 메뉴를 선택하고 Flex Complier 항목을 찾아 선택합니다. 우측 화면에서 Additional compiler arguments 항목에 –keep-generated-actionscript=true 라는 컴파일 옵션을 추가하면 output 폴더(기본 값은 bin-debug) 하위에 generated 라는 폴더가 추가로 만들어지고, 이 안에 자동으로 생성된 코드가 들어가게 됩니다.

지금까지 UI 컴포넌트 클래스와 해당 컴포넌트와의 접근성 구현 클래스를 연결하는 과정을 살펴보았습니다. 이제 어플리케이션이 동작하는 과정에서 UI 컴포넌트가 인스턴스화 되는 과정을 살펴보도록 하겠습니다.

Flex 의 모든 UI 컴포넌트들은 mx.core.UIComponent 클래스를 상속 받게 되어 있습니다. 이는 모든 컴포넌트 클래스가 인스턴스화 될 때, 동일한 초기화 과정을 거치게 된다는 의미입니다. UIComponent 의 초기화 과정과 라이프 사이클(생명주기)에 대한 내용은 접근성이라는 주제에 대해 벗어나기 때문에 간략하게 과정만 살펴보도록 합니다.

UIComponent 는 initialize 라는 메소드를 정의하고 있습니다. 이 메소드는 컴포넌트가 인스턴스화 되고, 부모 컨테이너에 추가되는 시점에서 단 한 번 실행됩니다. 이 메소드의 역할은 먼저, preinitialize 이벤트를 발생시키고, createChildren() 메소드와 childrenCreated() 메소드를 차례로 호출한 다음, 우리가 관심을 가지고 있는 initializeAccessibility() 메소드를 호출합니다.

268 / 307

6. 참고 자료

UIComponent 를 상속한 모든 컴포넌트들은 이 메소드를 재정의하여, 실제 사용할 접근성 구현 클래스를 인스턴스화 하고 자기 자신을 파라미터로 전달하면서, 컴포넌트의 인스턴스와 접근성 구현 클래스의 인스턴스가 1 대 1 로 연결되게 합니다.

다음은 Button.as 와 ButtonAccImpl.as 코드의 일부입니다.• Button.as

override protected function initializeAccessibility():void{ if (Button.createAccessibilityImplementation != null) Button.createAccessibilityImplementation(this);}

• ButtonAccImpl.as

mx_internal static function createAccessibilityImplementation(component:UIComponent):void

{component.accessibilityImplementation =

new ButtonAccImpl(component);}

다음 그림은 지금까지의 과정을 단계적으로 도식화 한 것입니다.

269 / 307

6. 참고 자료

그림 128 UI 컴포넌트와 접근성 구현 클래스간의 mix-in 프로세스

이 일련의 과정을 거치면, 각 컴포넌트의 인스턴스는 자신만의 접근성 구현 클래스의 인스턴스를 가지게 되고, 이러한 사실은 IAccessible 인터페이스를 통해 MSAA 로 통보됩니다. 그 이후부터는 스크린 리더기와 같은 어플리케이션들이 각각의 UI 요소에 대해 접근하여 정보를 받아올 수 있게 됩니다.

1.34 튜토리얼 – 사용자 접근성 클래스 제작 : Degree Selector(mx package)앞 절에서 지금까지 Flex 프레임웍에서 컴포넌트의 접근성 구현 클래스가 어떠한 구조를 가지고 있으며, 어떠한 방식으로 동작을 하는지를 살펴 보았습니다. 지금부터는 UIComponent 클래스를 상속받아 기존에 없던 사용자 컴포넌트를 제작하면서 그에 대한 접근성 구현 클래스를 작성하는 방법을 알아보겠습니다.

270 / 307

6. 참고 자료

1.34.1 DegreeSelector 클래스이번 예제는 다이얼과 같이 각도를 조정해서 값을 설정하는 컴포넌트입니다. 포토샵의 레이어 스타일 다이얼로그 안의 드롭 쉐도우의 각도를 조절하는 UI 와 비슷합니다. 포토샵에서는 이 컨트롤을 사용하여 빛의 방향을 마우스의 드래그 동작으로 입력을 받아 그림자를 표현합니다.

이 튜토리얼에서는 이 UI 의 명칭을 DegreeSelector 라 표시합니다.

그림 129 포토샵의 레이어 스타일 다이얼로그 안의 각도 조절 컨트롤

먼저 기능적인 부분을 구현한 코드를 간단히 살펴 보겠습니다. 접근서 구현 클래스의 제작이 목적이기 때문에 DegreeSelector 컨트롤의 구현에 대해서는 최대한 간단히 하였습니다. 먼저 DegreeSelector 클래스는 degree 라는 속성을 가지게 되는데, 이 속성을 통해 외부에서 직접 각도에 해당하는 값을 입력하거나 또는 현재 컨트롤이 표시하고 있는 값을 제공하게 됩니다. degree 속성의 setter 함수에서 입력 받은 값을 호도 단위로 변환하여 radian 속성에 넣습니다. 반대로 degree 의 getter 함수는 radian 값을 각도로 변환하여 반환하게 됩니다. 결국 radian 값이 실제 value 로서의 의미를 가지게 되는데, radian 의 setter 함수는 입력 받은 값과 기존에 저장한 값을 비교하여 다를 경우에만 화면의 렌더링을 갱신하고 change 이벤트를 발생합니다.• degree 속성 정의

//----------------------------------// degree//----------------------------------

[Bindable]public function set degree(value:Number):void{this.radian = value / 180 * Math.PI;}

public function get degree():Number{return this.radian * 180 / Math.PI;}

• radian 속성 정의

//----------------------------------// radian//----------------------------------

private var _radian:Number = 0;

271 / 307

6. 참고 자료

[Bindable]public function set radian(value:Number):void{

if(_radian == value)return;

_radian = value;_radianChnaged = true;commitProperties();

}

public function get radian():Number{return _radian;}

마우스의 Drag 기능으로 값을 조절할 수 있도록 MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE 이벤트에 대한 이벤트 리스너를 등록하고 이벤트 핸들러를 정의합니다.• 마우스 이벤트에 대한 리스너 등록과 이벤트 핸들러 정의

private function mouseDownHandler(e:MouseEvent):void{stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);}

private function mouseMoveHandler(e:MouseEvent):void{var local:Point = this.globalToLocal(new Point(e.stageX, e.stageY));calculateDegree(local.x, local.y);}

private function mouseUpHandler(e:MouseEvent):void{stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);}

private function calculateRadian(lx:Number, ly:Number):void{var r:Number = Math.min(width, height)/2;this.radian = Math.atan2(ly - r, lx - r);}

키보드로도 컨트롤을 사용할 수 있도록 미세한 값을 조절할 기능을 추가하기 위해 keyDownHandler()라는 UIComponent 클래스에서 이미 정의된 이벤트 핸들러를 재정의하여, 좌/우, 상/하 화살표 키를 누를 때 마다 값을 1 도씩 조절하도록 구현하였습니다. 마우스를 사용할 수 없는 환경에서는 키보드로도 컨트롤을 조작할 수 있도록 기능을 제공하여야 합니다.• 키 이벤트에 따른 이벤트 핸들러 정의

override protected function keyDownHandler(e:KeyboardEvent):void{super.keyDownHandler(e);

switch(e.keyCode)

272 / 307

6. 참고 자료

{case 37: // leftcase 40: // down

this.degree += 1;break;

case 39: // rightcase 38: // up

this.degree -= 1;break;

}}

마지막으로, 설정된 degree 값을 화면에 표시할 수 있도록 UIComponent 클래스에서 이미 정의된 updateDisplayList() 메소드를 재정의하여, 주어진 값이 시각적으로도 확인될 수 있도록 렌더링 하는 기능의 코드를 작성합니다.//--------------------------------------------------------------------------//// Overridden event handlers: UIComponent////--------------------------------------------------------------------------

override protected function updateDisplayList(w:Number, h:Number):void{var r:Number = Math.min(w, h)/2;var g:Graphics = graphics;g.clear();g.lineStyle(1, 0x333333);g.beginFill(0xFFFFFF, 0.4);g.drawCircle(r, r, r);g.endFill();

var tx:Number = r + r * Math.cos(radian);var ty:Number = r + r * Math.sin(radian);

g.moveTo(r, r);g.lineTo(tx, ty);g.drawCircle(tx, ty, 2);}

기본적인 동작과 관련된 코드가 완성되었고, 그 결과는 아래의 화면처럼 컴포넌트 크기에 맞게 원이 나타나고, degree 값에 맞게 선이 그려지는 것을 볼 수 있습니다. 원 내부에서 마우스를 드래그 하면, 마우스 위치에 따라서 선이 이동하는 것을 확인할 수 있습니다.

1.34.2 DegreeSelectorAccImpl 클래스DegreeSelectorAccImpl 클래스는 앞 절에서 제작한 DegreeSelector 컨트롤에 대한 접근성 구현 클래스입니다. DegreeSelector 컨트롤을 제작했다면, 컨트롤에 대응하는 접근성 구현 클래스인 DegreeSelectorAccImpl 클래스를 제작하도록 합니다. 이 접근성 구현 클래스는 Flex 프레임웍에서의 모든 접근성 구현 클래스에 대한 기반이 되는 mx.accessibility.AccImpl 클래스를 상속 받아야 합니다.

다시 DegreeSelector 클래스로 돌아가서, 컴파일러가 DegreeSelector 클래스에 대한 접근성 구현 클래스를 찾을 수 있도록 메타태그를 추가합니다. • DegreeSelector 클래스 선언 전에 AccessibilityClass 메타 태그 정의

[AccessibilityClass(implementation="com.component.DegreeSelectorAccImpl")]

그리고 Function 타입의 createAccessibilityImplementation 정적 속성을 추가합니다.

273 / 307

6. 참고 자료

• createAccessibilityImplementation 정적 속성 선언

//--------------------------------------------------------------------------//// Class mixins////--------------------------------------------------------------------------

mx_internal static var createAccessibilityImplementation:Function;

다음 initialize 메소드가 호출하게 될 initializeAccessibility 메소드를 오버라이드(재정의) 하여 DegreeSelectorAccImpl 클래스가 가지고 있는 createAccessibilityImplementation 메소드를 호출합니다.• initializeAccessibility() 메소드 재정의

//--------------------------------------------------------------------------//// Overridden method: UIComponent////--------------------------------------------------------------------------

override protected function initializeAccessibility():void{if (DegreeSelector.createAccessibilityImplementation != null)

DegreeSelector.createAccessibilityImplementation(this);}

DegreeSelectorAccImpl 클래스로 돌아와서 MASS 에게 전달할 정보를 반환하는 몇 가지 메소드를 구현합니다. 먼저, 클래스의 생성자 부분에서 DegreeSelector 클래스가 가져야 할 역할 값인 role 을 지정을 해야 하는데, 여기에서는 슬라이더 역할의 AccConst.ROLE_SYSTEM_SLIDER 를 지정합니다.

컨트롤에 대한 Role 을 지정할 때에는 MSAA 에 정의되어 있더라도 스크린 리더기와 같은 MSAA 클라이언트에서 대응할 수 없는 경우가 있습니다. 그러므로 반드시 MSAA 클라이언트를 통해 확인을 하는 것이 중요합니다.

• 컴포넌트의 역할(Role) 정의

public function DegreeSelectorAccImpl(master:UIComponent){super(master);

role = AccConst.ROLE_SYSTEM_SLIDER;}

createAccessibilityImplemenatation 메소드가 동작하면서 클래스 생성자에 접근성 적용을 위한 DegreeSelector 클래스의 인스턴스의 참조를 인자로 전달합니다. DegreeSelectorAccImpl 의 상위 클래스인 AccImpl 클래스의 생성자에서 master 라는 변수 값에 인자로 받은 DegreeSelector 의 인스턴스 참조를 할당하므로 이후부터는 DegreeSelector 인스턴스에 대한 참조를 위해서는 master 값을 사용합니다.

eventsToHandle ()라는 getter 메소드를 재정의 해서 현재 컴포넌트가 관심을 가져야 하는 이벤트 목록(배열)에 change 이벤트를 추가해 줍니다.• eventsToHandle 속성 정의

override protected function get eventsToHandle():Array{return super.eventsToHandle.concat([ "change" ]);}

274 / 307

6. 참고 자료

이제 2 개의 메소드만 구현하면 됩니다. 첫 번째로는 스크린 리더기로 하여금 현재 컴포넌트가 가지고 있는 값을 읽어오도록 하는 것입니다. 이것은 get_accValue() 메소드를 재정의 해주며, 이 예제에서는 컴포넌트가 가지고 있는 “각도” 값을 전달하는 것이 목적입니다.

아래 코드에서와 같이 이미 DegreeSelector 컴포넌트에 대한 인스턴스로의 참조로 배정을 받은 master 의 degree 속성값을 가져옵니다. degree 값은 숫자(Number)형 자료이기 때문에 스크린 리더기 사용자들이 값에 대해 좀 더 원활한 이해를 돕기 위해 “degree”라는 단위를 붙인 문자열을 반환하도록 합니다.

이렇게 하면, 스크린 리더기는 컴포넌트의 값을 읽을 때 “NN degree”(N 은 숫자) 라고 읽을 것입니다.• get_accValue 메소드 재정의

override public function get_accValue(childID:uint):String{return DegreeSelector(master).degree + " degree";}

위 코드에서 DegreeSelector 컴포넌트는 자식 요소를 가지고 있지 않기 때문에, childID 값에 상관 없이 동일한 결과를 반환합니다. 하지만 만약 List 컴포넌트와 같이 여러 개의 자식을 가지고 있는 컴포넌트라면 childID 에 따른 해당하는 값을 선별해 주어야 합니다.

마지막으로 외부에서 degree 값이 변경 되었을 때, 이 사실을 MSAA 에 통보하기 위해서 eventHandler() 메소드를 재정의 합니다.• eventHandler() 메소드 재정의

override protected function eventHandler(event:Event):void{$eventHandler(event);

switch (event.type){

case "change":{

Accessibility.sendEvent(master, 0,AccConst.EVENT_OBJECT_VALUECHANGE, true);

break;}

}}

이 eventHandler() 메소드는 AccImpl 클래스의 생성자에서 정의한 eventToHandle 속성을 받은 결과로, 일괄적으로 이벤트 리스너를 등록해 주기 때문에 eventToHandle 속성에서 반환한 배열에서 추가로 포함한 이벤트(이 예제에서는 change 이벤트)에 대해서만 제어를 합니다.

여기까지 진행을 하면 기본적인 접근성 구현 클래스가 완성이 됩니다.

1.34.3 접근성 향상예제로 설명한 컴포넌트와 컴포넌트의 접근성 구현 클래스는 전체적인 구현 방법과 순서를 안내하기 위해 최대한 간단하게 작성되었습니다. 실무에서는 이보다 복잡한 사용자 컴포넌트를 만들어야 하는 경우가 많은 것이 사실입니다. 이를 위해서는 기존에 구현되어 있는 기본 컴포넌트의 소스 코드(mx.accessibility 패키지 안의 접근성 구현 클래스들)를 참고하는 것이 실질적으로 많은 도움이 될 것입니다.

새로 제작하여야 하는 컨트롤이라 할 지라도 컨트롤의 사용 방식과 특징을 기존에 만들어져 있는 컴포넌트들 중 성격이 비슷한 컴포넌트를 찾아 필요한 부분을 참고하여 구현하다 보면 많은 도움이 될 것입니다.

아울러, 기본 컴포넌트를 상속 받아 스킨과 같이 단순히 시각적인 요소만 변경한 경우라면, 접근성 구현 클래스도 상속받은 컴포넌트 클래스가 사용하는 접근성 구현 클래스를 동일하게 상속 받아서 enableAccessibility(),

275 / 307

6. 참고 자료

createAccessibilityImplementation() 이라는 두 개의 정적 메소드만을 재정의 합니다. 이 메소드들은 직접적으로 해당 클래스에 대한 이름을 포함하기 때문에 꼭 새로 작성을 할 필요가 있습니다.

276 / 307

5.테스트 도구

277 / 307

6. 참고 자료

1.35 Microsoft Windows SDK 7.1Microsoft Windows SDK 7.1 은 UI 의 접근성 지원을 확인할 수 있는 도구들을 포함하고 있습니다. Accessibility Event Watcher(AccEvent)와 Inspect Objects(Inspect) 라는 도구가 있는데 이 도구들은 각각 UI 에서 발생하는 이벤트를 수신하고 UI 객체에 지정된 MSAA 또는 UIA(UI Automation)에서 정의한 속성들을 보여주고 검토할 수 있도록 지원하는 도구들입니다.

Microsoft Windows SDK 7.1 을 설치하면 Tools 항목에 이 두 가지 도구들이 함께 포함이 됩니다.• Microsoft Windows SDK 7.1 다운로드 : http://www.microsoft.com/download/en/details.aspx?

displaylang=en&id=8279

1.35.1 Accessible Event WatcherAccessible Event Watcher(AccEvent)는 개발자들과 테스터들이 UI 에 변화가 발생할 때 어플리케이션의 UI 요소가 Microsoft UI Automation(UIA)과 Microsoft Active Accessibility(MSAA)들이 적절하게 반영이 되어 있는지를 확인할 수 있도록 해주는 도구입니다. UI 에서의 변화는 포커스의 이동 또는 UI 요소가 인보크 되거나 선택이 되었을 때, 또는 상태나 속성이 변할 때 발생할 수 있습니다.

Accessible Event Watcher 는 Windows Software Development Kit(SDK)과 함께 설치됩니다.

AccEvent 를 실행하면 메인 윈도우가 표시됩니다. AccEvent 의 메인 윈도우는 데스크톱에서 실행되는 어플리케이션에서 발생한 UI Automation 또는 Microsoft Active Accessibility 이벤트들을 표시합니다. AccEvent 는 다음 그림과 같은 형태로 구성되어 있습니다.

그림 130 AccEvent 의 구조

• Title Bar : 현재의 운영 모드와 상태를 나타냅니다.• Menu Bar : AccEvent 의 기능을 사용할 수 있는 메뉴를 제공합니다.• Data View : 이벤트를 통해 전달되는 이벤트의 ID 와 UI 요소의 선택된 속성들을 표시합니다.

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=8279

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=8279

278 / 307

6. 참고 자료

Accessible Event Watcher 에 대한 자세한 기능과 사용 방법은 Microsoft Dev Center 의 Accessible Event Watcher 포스트를 참고하시기 바랍니다.

아래의 그림은 4.2 튜토리얼 – 사용자 접근성 구현 클래스 제작 : Slider 섹션에서 제작한 가로방향의 슬라이더 UI 를 사용했을 때의 이벤트들을 감지한 내용입니다. 슬라이더가 선택되었을 때, 슬라이더의 값이 변경이 되었을 때의 이벤트에 대해서 슬라이더의 속성들(Name, Role, State, Value)등을 표시합니다.

그림 131 4.2 튜토리얼에서 제작한 슬라이더에 대한 이벤트 추적 사례

1.35.2 Inspect ObjectsInspect 는 특정 UI 요소를 선택하고 요소의 접근성 데이터를 볼 수 있는 도구입니다. 이 도구를 사용해서 Microsoft Active Aceesibility 속성뿐만 아니라 Microsoft UI Automation 속성들도 볼 수 있습니다. 또한 Inspect 는 UI Automation 트리 안의 UI Automation 요소들과 Microsoft Active Accessibility 계층 구조에서의 접근성 있는 객체들의 탐색 구조를 테스트 할 수 있습니다.

Inspect 는 다음의 구조로 구성되어 있습니다.• Title Bar : Inspect Window Handle(HWND) 값을 표시합니다.• Menu Bar : Inspect 의 기능을 사용할 수 있는 메뉴들을 제공합니다.• Tool Bar : Inspect 의 기능을 사용할 수 있는 도구들을 제공합니다.• Tree View : 요소들을 따라 탐색할 수 있는 트리뷰 컨트롤로 UI 요소의 계층 구조를 표시합니다.• Data View : 선택한 UI 요소의 모든 접근성 속성을 표시합니다.

http://msdn.microsoft.com/en-us/library/windows/desktop/dd317979(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/windows/desktop/dd317979(v=vs.85).aspx

279 / 307

6. 참고 자료

그림 132 Inspect 의 구조

Inspect 를 시작하면 Tree View 에서 요소의 계층에서 현재 선택한 UI 요소의 위치를 볼 수 있습니다. 그리고 Data View 에서는 선택한 UI 요소에 대한 속성 정보를 확인할 수 있습니다. UI 안의 모든 요소에 대한 접근성 정보를 보기 위해 UI 를 탐색할 수 있습니다. 기본적으로 Inspect 는 키보드 또는 마우스 포커스를 추적할 수 있습니다. 포커스가 변경될 때, Data View 의 내용들은 포커스를 받은 요소의 속성 정보로 업데이트 됩니다.

다음의 방법을 통해 UI 요소들을 탐색할 수 있습니다.• 마우스 사용

• 키보드 사용

• Tree View 에서의 트리뷰 아이템 선택

• Navigation 메뉴에서 탐색 옵션 사용

• Tool Bar 에서 탐색 옵션 사용

위의 탐색 방법 중 마지막 세 가지의 옵션을 사용하면, UI 의 트리 계층을 탐색할 수 있습니다. 트리의 구조는 UI Automation 과 Microsoft Active Accessibility 모드일 때 약간 다르게 나타납니다.

Data View 는 현재 선택한 UI 요소에 대한 속성 정보를 보여줍니다. 모든 접근성 정보 또는 이 속성들의 하위 세트를 보기 위해 Inspect 를 설정할 수 있습니다.

툴바의 Options 메뉴를 사용해서 보기 옵션들을 설정할 수 있습니다.옵션 설명

Always on Top 다른 윈도우들 위로 Inspect 가 항상 노출 되도록 지정합니다.MSAA Mode Microsoft Active Accessibility 속성 정보들을 표시합니다.UI Automation Mode UI Automation 속성 정보들을 표시합니다.Visible Windows Only View MSAA 모드에서만 사용할 수 있습니다. 보이는 윈도우에 대해서만 표시합니다.Raw View Tree View 에 UI Automation 트리 또는 MSAA 트리의 raw view(가공하지 않은 모든 view)

280 / 307

6. 참고 자료

를 보여줍니다.Control View Tree View 에 UI Automation 의 control view 를 보여줍니다. UI Automation 모드에서만

사용할 수 있습니다.Content View Tree View 에 UI Automation 의 content view 를 보여줍니다. UI Automation 모드에서만

사용할 수 있습니다.Active Hover Toolbar 마우스 클릭을 사용하는 것 대신에 마우스를 오버하는 것으로 툴바 버튼을 활성화 시킵니다.Beep on Error UI Automation 또는 MSAA 작동 중 에러가 감지되면 비프 음을 냅니다.Show Highlight Rectangle 포커스를 받은 UI 요소에 주변에 포커스 상자를 표시합니다.Show Caret Highlight 캐럿에 하이라이트를 줍니다. MSAA 모드에서만 사용 가능합니다.Show Information Tooltip 툴 팁에 속성 정보를 표시합니다.

Inspect 사용에 대한 보다 자세한 정보는 Microsoft Dev Center 의 Inspect 포스트 를 참고하시기 바랍니다.

아래의 그림은 4.2 튜토리얼 – 사용자 접근성 구현 클래스 제작 : Slider 섹션에서 제작한 가로방향의 슬라이더 UI 를 사용했을 때의 슬라이더 UI 의 속성 정보를 Inspect 를 통해 확인한 그림입니다.

슬라이더 UI 요소에 대해 IAccessible 을 구현하였다는 내용, 현재 이 요소의 Name, Value, Role, State, Location 등에 대한 정보를 확인할 수 있습니다.

그림 133 Inspect 를 통해 확인한 튜토리얼에서 제작한 슬라이더의 접근성 정보

1.36 UI Accessiblility Checker(AccChecker)UI Accessibility Checker(AccChecker)는 Windows 운영체제에서 Microsoft Active Accessibility(MSAA)를 사용해서 테스터들이 접근성 문제를 쉽게 발견할 수 있도록 합니다.

이 도구는 접근성 정보를 확인할 윈도우를 선택을 하고 실행을 하면 선택한 윈도우 안의 UI 요소들을 탐색하여 오류 및 주의 사항들을 리포트 하고 UI Automation 과 MSAA 에 대한 UI 요소에 대한 트리 구조의 뷰를 생성합니다. 또한 스크린 리더기가 지정한 객체를 어떠한 내용으로 읽을 것인지를 시뮬레이트 하는 기능이 있습니다.

UI Accessibility Checker 에 대한 자세한 정보 및 다운 로드는 UI Accessibility Checker 웹사이트 를 참고하시기 바랍니다.

http://acccheck.codeplex.com/

http://msdn.microsoft.com/en-us/library/windows/desktop/dd318521(v=VS.85).aspx

281 / 307

6. 참고 자료

그림 134 UI Accessibility Checker 를 통해 확인한 튜토리얼에서 제작한 슬라이더의 접근성 정보

282 / 307

6. 참고 자료

그림 135 MSAA 또는 UIA 스크린 리더기가 읽을 내용을 확인해볼 수 있다

283 / 307

6. 참고 자료

284 / 307

6.참고 자료

285 / 307

6. 참고 자료

1.37 Adobe Flash CS5 의 접근성을 지원하는 구성 요소(Component)Adobe Flash CS5 에는 스크린 리더기를 사용하는 사람들도 쉽게 접근할 수 있는 표준 구성 요소(UI Component)들이 있습니다. 구성 요소는 플래시 메뉴에서 “윈도우 > 구성 요소”를 선택하거나 “Ctrl+F7” 단축키로 활성화 시킬 수 있습니다.

구성 요소들은 스크린 리더기가 판독할 수 있는 접근성 클래스를 지원하며, 보다 쉬운 상호작용을 위해 키보드만으로도 조작을 할 수 있도록 구현되어 있기 때문에 스크린 리더기 사용자뿐만 아니라 장애가 없는 사용자들도 손쉽게 접근할 수 있는 장점이 있습니다.

그림 136 Adobe Flash CS5 의 구성 요소 패널

구성 요소들을 스크린 리더기가 판독할 수 있도록 하게 하려면, 구성 요소에 대응 하는 접근성 클래스를 가져와서 enableAccessibility() 메소드를 호출해야 합니다.

다음은 스크린 리더기가 판독할 수 있도록 접근성 정보를 가질 수 있는 ActionScript 3.0 구성요소들입니다.구성 요소 접근성 구현 클래스

Button ButtonAccImpl

CheckBox CheckBoxAccImpl

ComboBox ComboBoxAccImpl

DataGrid DataGridAccImpl

List ListAccImpl

RadioButton RadioButtonAccImpl

TileList TileListAccImpl

286 / 307

6. 참고 자료

예를 들어 Button 구성 요소에 대해 스크린 리더기가 판독할 수 있도록 하려면 다음과 같이 접근성 구현 클래스를 통해 접근성 기능을 활성화 시키는 ActionScript 코드를 추가로 작성합니다.import fl.accessibility.ButtonAccImpl;ButtonAccImpl.enableAccessibility();

1.37.1 Button 구성 요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키Button 구성요소에 포커스가 위치해 있으면 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

Shift + Tab 이전 객체로 포커스를 이동합니다.Space 마우스로 버튼을 클릭한 것과 같이 버튼의 기능을 수행하도록 click 이벤트를 트리거 합니다.Tab 다음 객체로 포커스를 이동합니다.Enter/Return FocusManager 의 defaultButton 속성에 할당된 버튼일 경우 click 이벤트를 트리거 합니다.

B. 접근성 활성화Button 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면, 다음의 접근성 구현 클래스의 활성화 코드를 추가합니다.import fl.accessibility.ButtonAccImpl; ButtonAccImpl.enableAccessibility();

Button 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 Button 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

1.37.2 CheckBox 구성 요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키CheckBox 구성요소에 포커스가 위치해 있으면 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

Shift + Tab 이전 객체로 포커스를 이동합니다.Space 체크박스를 선택하거나 선택을 해제하고 change 이벤트를 트리거 합니다.Tab 다음 객체로 포커스를 이동합니다.

B. 접근성 활성화,

CheckBox 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면 다음의 접근성 활성화 코드를 추가합니다.import fl.accessibility.CheckBoxAccImpl; CheckBoxAccImpl.enableAccessibility();

CheckBox 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 CheckBox 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

1.37.3 ComboBox 구성 요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키ComboBox 구성요소에 포커스가 위치해 있으면 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

287 / 307

6. 참고 자료

Shift + Tab 이전 항목으로 포커스를 이동합니다. 새 항목이 선택된 경우에는 change 이벤트를 전달합니다.

Tab 다음 항목으로 포커스를 이동합니다. 새 항목이 선택된 경우에는 change 이벤트를 전달합니다.

아래쪽 화살표 아래쪽 항목으로 선택영역을 이동합니다.End 목록의 가장 마지막 항목으로 선택영역을 이동합니다.Esc 드롭다운 목록을 닫고 ComboBox 로 포커스를 이동합니다.Enter 드롭다운 목록을 닫고 ComboBox 로 포커스를 이동합니다. ComboBox 가 편집할 수 있는

상태일 경우, 사용자가 텍스트를 입력하고 Enter 키를 누르면 해당 값을 입력한 텍스트로 설정합니다.

Home 목록의 가장 위 항목으로 선택영역을 이동합니다.Page Up 목록에서 한 페이지 위로 선택영역을 이동합니다.Page Down 목록에서 한 페이지 아래로 선택영역을 이동합니다.

B. 접근성 활성화ComboBox 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면, 다음의 접근성 활성화 코드를 추가합니다.import fl.accessibility.ComboBoxAccImpl; ComboBoxAccImpl.enableAccessibility();

ComboBox 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 ComboBox 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

1.37.4 DataGrid 구성 요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키DataGrid 구성요소에 포커스가 위치해 있으면 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

아래쪽 화살표 편집중인 셀의 경우 삽입점(캐롯)이 셀 안의 텍스트 끝으로 이동합니다. 셀을 편집할 수 없는 경우에 아래쪽 화살표 키를 누르면, List 구성 요소와 같이 한 줄 아래로 선택 영역이 이동합니다.

위쪽 화살표 편집중인 셀의 경우 삽입점(캐롯)이 셀 안의 텍스트 처음으로 이동합니다. 셀을 편집할 수 없는 경우에 위쪽 화살표 키를 누르면, List 구성 요소와 같이 한 줄 위로 선택 영역이 이동합니다.

Shift+위쪽 화살표/아래쪽 화살표

DataGrid 가 편집할 수 없고, allowMultipleSelection 속성이 true 라면 연속된 행이 선택됩니다. 화살표 키의 방향을 바꾸면, 선택이 시작된 행에 도달할 때까지 선택한 행의 선택이 해제되고 선택을 시작한 행부터 반대 방향의 행으로 선택을 합니다.

Shift + Click allowMultipleSelection 속성이 true 이면, 이미 선택된 행과 현재 선택한 행 사이의 모든 행이 선택됩니다.

Ctrl + Click allowMultipleSelection 속성이 true 이면, 이미 선택되어 있는 행들에 선택한 행을 추가합니다. 선택영역은 비 연속식입니다.

오른쪽 화살표 편집중인 셀의 경우 삽입점(캐롯)이 한 글자 오른쪽으로 이동합니다. 셀을 편집할 수 없는 경우에는 아무런 작동을 하지 않습니다.

왼쪽 화살표 편집중인 셀의 경우 삽입점(캐롯)을 한 글자 왼쪽으로 이동합니다. 셀을 편집할 수 없는 경우에는 아무런 작동을 하지 않습니다.

Home DataGrid 에서 첫 번째 행을 선택합니다.

288 / 307

6. 참고 자료

End DataGrid 에서 마지막 행을 선택합니다.Page Up DataGrid 에의 한 페이지 내에서 첫 번째 행을 선택합니다.Page Down DataGrid 에의 한 페이지 내에서 마지막 행을 선택합니다.Return/Enter/Shift+Enter 편집중인 셀의 경우 편집한 내용으로 셀을 갱신하고 동일한 열의 다음 행(Shift+Enter 의 경우

이전 행)의 셀로 이동합니다.Shift+Tab/Tab 편집 가능한 DataGrid 의 경우 현재 셀의 이전/다음 셀로 이동합니다. 마지막 열의 마지막 셀에

포커스가 위치할 경우에는 다음 행의 첫 번째 셀로 포커스를 이동합니다. 첫 번째 셀이 선택된 상태에서 Shift+Tab 을 누르면 이전 객체로 포커스를 이동하고, 마지막 셀이 선택된 상태에서 Tab 을 누르면 다음 객체로 포커스를 이동합니다.DataGrid 가 편집할 수 없는 상태일 경우에는 이전/다음 객체로 포커스를 바로 이동합니다.

B. 접근성 활성화DataGrid 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면, 다음의 접근성 활성화 코드를 추가합니다.import fl.accessibility.DataGridAccImpl; DataGridAccImpl.enableAccessibility();

DataGrid 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 DataGrid 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

1.37.5 List 구성요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키List 구성요소에 포커스가 위치해 있으면 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

일반 키(영어/숫자) 리스트 목록에 표기된 텍스트의 첫 문자에 해당하는 항목으로 이동합니다.Ctrl 인접하지 않은 여러 항목을 선택하거나 선택을 해제합니다.Shift 연속적으로 항목을 선택합니다.아래쪽 화살표 한 항목 아래를 선택합니다.위쪽 화살표 한 항목 위를 선택합니다.Home 목록의 가장 위의 항목을 선택합니다.Page Up 한 페이지 위의 항목을 선택합니다.Page Down 한 페이지 아래의 항목을 선택합니다.

B. 접근성 활성화List 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면, 다음의 접근성 활성화 코드를 추가합니다.import fl.accessibility.ListAccImpl; ListAccImpl.enableAccessibility();

List 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 List 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

289 / 307

6. 참고 자료

1.37.6 RadioButton 구성요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키RadioButton 구성요소 그룹에 포커스가 위치해 있으면 선택된 라디오 버튼만 포커스를 받습니다. 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

위쪽/왼쪽 화살표 라디오 버튼 그룹 안에서 이전 라디오 버튼을 선택합니다.아래쪽/오른쪽 화살표 라디오 버튼 그룹 안에서 다음 라디오 버튼을 선택합니다.Tab 라디오 버튼 그룹에서 다음 구성 요소로 포커스를 이동합니다.

B. 접근성 활성화RadioButton 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면, 다음의 접근성 활성화 코드를 추가합니다.import fl.accessibility.RadioButtonAccImpl; RadioButtonAccImpl.enableAccessibility();

RadioButton 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 RadioButton 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

1.37.7 TileList 구성요소의 상호작용과 접근성 활성화A. 상호작용을 위한 키보드 단축키TileList 구성요소에 포커스가 위치해 있으면 다음 단축키를 사용하여 구성요소와 상호작용 할 수 있습니다.키 설명

위쪽/아래쪽 화살표 위 또는 아래 행으로 이동합니다. allowMultipleSelection 속성이 true 이면, Shift 키와 조합하여 여러 셀을 선택할 수 있습니다.

왼쪽/오른쪽 화살표 왼쪽 또는 오른쪽 열로 이동합니다. allowMultipleSelection 속성이 true 이면, Shift 키와 조합하여 여러 셀을 선택할 수 있습니다.

Home TileList 에서 첫 번째 셀을 선택합니다. allowMultipleSelection 속성이 true 인 경우, Shift 키를 누른 상태에서 Home 키를 누르면 현재 선택한 셀부터 첫 번째 셀까지 모두 선택합니다.

End TileList 에서 마지막 셀을 선택합니다. allowMultipleSelection 속성이 true 인 경우, Shift 키를 누른 상태에서 End 키를 누르면 현재 선택한 셀부터 마지막 셀까지 모두 선택합니다.

Ctrl allowMultipleSelection 속성이 true 인 경우 비연속적으로 셀을 선택할 수 있습니다.

B. 접근성 활성화TileList 구성 요소의 접근성을 활성화 하여 스크린 리더기가 판독할 수 있게 하려면, 다음의 접근성 활성화 코드를 추가합니다.import fl.accessibility.TileListAccImpl; TileListAccImpl.enableAccessibility();

TileList 구성 요소의 인스턴스의 개수에 상관없이 enableAccessibility() 메소드를 한 번만 호출하면 모든 TileList 구성 요소에 대하여 스크린 리더기가 판독할 수 있습니다.

290 / 307

6. 참고 자료

1.38 Flex 4 의 접근성 있는 구성 요소(Component)와 컨테이너(Container)Flex 4 는 접근성을 지원하는 다양한 컴포넌트와 컨테이너를 내장하고 있습니다. 이 컴포넌트와 컨테이너들은 자체적으로 키보드 접근, 대체 텍스트 등의 접근성 지원을 위한 기능들을 자동화 합니다. 그렇기 때문에 Flex 의 내장된 컴포넌트들의 사용으로 접근성 있는 Flex 어플리케이션의 개발을 가속화 할 수 있습니다.

Flex 4 의 컴포넌트는 mx 패키지와 spark 패키지로 구분되어 있습니다.

1.38.1 Spark 컴포넌트컴포넌트 설명

ButtonBar 컨트롤 위, 왼쪽/아래, 오른쪽 화살표키를 사용하여 ButtonBar 컨트롤 안의 버튼들의 포커스를 이동합니다. 스페이스 키를 누르면 포커스가 위치한 버튼의 액션을 트리거 합니다. Tab/Shift+Tab 키를 누르면 다음/이전 컴포넌트로 포커스를 이동합니다.

Button 컨트롤 Button 컨트롤에 포커스가 위치했을 때 Space 키를 누르면 버튼의 액션을 트리거 합니다.Tab/Shift+Tab 키를 누르면 다음/이전 컴포넌트로 포커스를 이동합니다.

CheckBox 컨트롤 Space 키를 눌러 CheckBox 컨트롤의 선택/선택 해제의 액션을 반복하여 수행합니다.ComboBox 컨트롤 ComboBox 구성요소의 상호작용을 참고하세요.DropDownList 컨트롤 DropDownList 구성요소의 상호작용을 참고하세요.List 컨트롤 스크린 리더기의 내비게이션은 키보드의 내비게이션과 동일합니다. List 구성요소의

상호작용을 참고하세요.showDataTip 속성을 true 로 설정하면, 리스트의 각각의 항목에 대한 데이터 정보를 데이터 팁을 통해 노출시킬 수 있습니다.

NumericStepper 컨트롤 기본적으로 NumericStepper 의 이름은 빈 스트링 값입니다. NumericStepper 가 FormItem 안에 있을 때, NumericStepper 의 이름은 FormItem 의 레이블을 따릅니다. 이 기능을 오버라이드(재정의) 하려면 NumericStepper 의 accessibilityName 속성을 설정합니다.위/아래의 용도로 사용되는 각각의 자식 버튼의 이름은 “이상(More)”, “이하(Less)”입니다.NumericStepper 구성요소의 상호작용을 참고하세요.

Panel 컨테이너 스크린 리더기의 폼 모드가 활성화 되었을 때에만 패널의 타이틀을 읽을 수 있습니다.RadioButton 컨트롤 그룹 안에서 한 개의 라디오 버튼을 선택하려면, 그룹 안으로 들어가기 위해 Enter 키를

누릅니다. 그룹 안에서 아이템 사이를 이동하려면 화살표 키를 사용합니다. 그룹 안에서 다음 아이템으로 이동하려면 아래쪽이나 오른쪽 화살표 키를 누릅니다. 그룹 안에서 이전 아이템으로 이동을 하려면 위쪽이나 왼쪽 화살표 키를 누릅니다.스크린 리더기를 사용하고 있을 때에는 스페이스 바 키를 눌러서 라디오 버튼을 선택합니다.RadioButton 구성요소의 상호작용을 참고하세요.

RadioButtonGroup 컨트롤 스크린 리더기의 탐색 방법은 RadioButton 컨트롤과 동일합니다.RichEditableText 컨트롤 라인의 첫 부분으로 이동하려면 Home 키를 사용합니다. 라인의 마지막 부분으로 이동하려면

End 키를 사용합니다. 텍스트의 첫 부분으로 이동하려면 Control+Home 키를 사용합니다. 텍스트의 마지막 부분으로 이동하려면 Control+End 키를 사용합니다.

Slider 컨트롤 기본적으로 HSlider 또는 VSlider 의 이름은 빈 문자열입니다. 슬라이더가 FormItem 안에서 사용된다면, 슬라이더의 이름은 FormItem 의 레이블을 사용합니다. 이 기능을 오버라이드(재정의) 하려면, 슬라이더의 accessibilityName 속성을 설정해줍니다.Slider 컨트롤의 각각의 자식 객체의 이름은 다음과 같습니다. HSlider 에서는 “Page left”, VSlider 에서는 “Page up” “Position” HSlider 에서는 “Page right”, VSlider 에서는 “Page down”키보드 사용에 대한 정보는 Slider 구성요소의 상호작용을 참고하세요.

291 / 307

6. 참고 자료

Spinner 컨트롤 기본적으로 Spinner 컨트롤의 이름은 빈 문자열입니다. Spinner 가 FormItem 안에 있을 때, Spinner 의 이름은 FormItem 의 레이블을 사용합니다. 이 기능을 오버라이드(재정의) 하려면 Spinner 의 accessibilityName 속성을 설정합니다.각각의 자식 버튼의 이름은 “이상(More)”과 “이하(Less)”입니다.키보드 사용에 대한 정보는 Spinner 구성요소의 상호작용을 참고하세요.

TabBar 컨트롤 기본적으로 TabBar 의 이름은 빈 문자열입니다. TabBar 가 FormItem 안에 있을 때, TabBar 의 이름은 FormItem 의 레이블을 사용합니다. 이 기능을 오버라이드(재정의) 하려면, TabBar 의 accessibilityName 속성을 사용합니다. TabBar 안의 각각의 탭들은 탭의 레이블을 이름으로 사용합니다.TabBar 와 TabBar 의 각각의 탭들은 포커스를 받아들입니다. 화살표 키를 사용하여 포커스를 변경했을 때에는 자동으로 탭이 눌려지지는 않습니다. 스페이스 바를 사용하여 포커스를 받은 탭을 선택합니다.

TextArea 컨트롤 라인의 첫 부분으로 이동하려면 Home 키를 사용합니다. 라인의 마지막 부분으로 이동하려면 End 키를 사용합니다. 텍스트의 첫 부분으로 이동하려면 Control+Home 키를 사용합니다. 텍스트의 마지막 부분으로 이동하려면 Control+End 키를 사용합니다.

TextInput 컨트롤 라인의 첫 부분으로 이동하려면 Home 키를 사용합니다. 라인의 마지막 부분으로 이동하려면 End 키를 사용합니다.

TitleWindow 컨테이너 기본적으로 TitleWindow 의 이름은 TitleWindow 에 표시된 타이틀입니다. 이 기능을 오버라이드(재정의) 하려면 TitleWindow 의 accessibilityName 속성을 사용합니다.TitleWindow 는 포커스의 접근을 받아들이지 않습니다.스크린 리더기는 폼 모드가 해제 되었을 때에만 TitleWindow 컨트롤을 읽게 됩니다..

ToggleButton 컨트롤 컨트롤을 활성화 하려면 스페이스 바를 누릅니다. 버튼의 활성화를 취소하려면 스페이스 바를 눌렀다가 떼기 전에 컨트롤 밖으로 포커스를 이동하기 위해 Tab 키를 누릅니다.기본적으로 ToggleButton 의 이름은 ToggleButton 에 표시된 레이블입니다. ToggleButton 이 FormItem 에 있다면 레이블은 FormItems 의 레이블과 함께 사용될 것입니다. 이 기능을 오버라이드(재정의) 하려면 ToggleButton 의 accessibilityName 속성을 설정합니다.ToggleButton 을 기반으로 하는 아이콘의 각각의 다른 상태에 대한 두 개의 구분된 이름을 제공하려면, accessibilityName 속성에 콤마(,)를 사용하여 구분을 합니다. 예를 들자면, accessibilityName=”Mute,Unmute”의 형태로 구분을 합니다. 이처럼 상태에 대한 명시된 이름을 사용할 때, 버튼이 눌려졌을 때 “pressed”라는 상태를 노출하지 않습니다.

VideoPlayer 컨트롤 기본적으로 VideoPlayer 의 이름은 “VideoPlayer”입니다. FormItem 요소의 안에 VideoPlayer 가 있을 때, VideoPlayer 의 이름은 FormItem 의 레이블을 따릅니다. 이 기능을 오버라이드(재정의) 하려면 VideoPlayer 컨트롤의 accessibilityName 속성을 설정합니다.VideoPlayer 의 각각의 자식 컨트롤의 이름입니다. Play/Pause 컨트롤 : “Play” 또는 “Pause” 스크럽 컨트롤 : “Scrub Bar” 재생 시간 표시 영역 : 표시되어 있는 텍스트

뮤트 컨트롤 : “Muted” 또는 “Not muted” 볼륨 컨트롤 : “Volume Bar” 풀 스크린 컨트롤 : “Full Screen”이러한 자식 컨트롤의 이름을 오버라이드(재정의) 하려면 VideoPlayer 의 스킨을 다시 입히고 컨트롤의 accessibilityName 속성을 설정합니다.자식 컨트롤들 사이로 포커스를 이동하려면 Tab 키를 사용합니다. Play/Pause 컨트롤과 풀 스크린 컨트롤을 실행시키려면 스페이스 바를 사용합니다. 스크럽 바와 볼륨 바 컨트롤을 변경하려면 화살표 키를 사용합니다.

A. ComboBox 구성요소의 상호작용ComboBox 가 닫힌 상태일 경우

292 / 307

6. 참고 자료

키 설명

알파벳/숫자 키 드롭 다운 리스트를 엽니다. 드롭 다운 리스트의 항목을 스크롤 하여 가장 가까운 목록에 강조 표시를 합니다.

Enter 강조 표시가 된 목록이 한 개 있다면, 표시된 목록을 ComboBox 에 표시합니다. 만약 강조 표시가 된 목록이 없다면, 입력 창 안의 값을 ComboBox 에 표시합니다.

위쪽 화살표 한 항목 위를 선택합니다.아래쪽 화살표 한 항목 아래를 선택합니다.Ctrl + 아래쪽 화살표 드롭 다운 리스트를 엽니다.Page Up 한 페이지 위를 선택합니다. 만약 selectedIndex 의 값이 -1 이라면, 아무것도 하지 않습니다..Page Down 한 페이지 아래를 선택합니다. 만약 리스트의 끝이라면, 아무것도 하지 않습니다.Home 드롭 다운 리스트의 가장 첫 항목으로 이동합니다.End 드롭 다운 리스트의 가장 마지막 항목으로 이동합니다.ComboBox 가 열린 상태일 경우

키 설명

알파벳/숫자 키 아이템 항목 안에서 가장 가까운 아이템으로 스크롤하고 강조 표시를 합니다.Enter 드롭 다운 리스트를 닫습니다. 강조 표시된 한 개의 항목이 있다면, 강조 표시된 아이템을

ComboBox 에 표시합니다. 강조 표시된 항목이 없다면, ComboBox 의 입력 칸에 입력한 값을 ComboBox 에 표시합니다.

위쪽 화살표 한 항목 위를 선택합니다. 그러나 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox 에 표시하지 않습니다.

아래쪽 화살표 한 항목 아래를 선택합니다. 그러나 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox에 표시하지 않습니다.

Ctrl + 위쪽 화살표 드롭 다운 리스트를 닫고 선택한 항목을 ComboBox 에 표시합니다.ESC 드롭 다운 리스트를 닫습니다. 그러나 선택한 항목을 ComboBox 에 표시하지 않습니다.Page Up 현재 표시되어 있는 데이터 목록의 가장 위를 선택합니다. 그러나 드롭 다운 리스트가 닫힐

때까지 선택한 값을 ComboBox 에 표시하지 않습니다.Page Down 현재 표시되어 있는 데이터 목록의 가장 아래를 선택합니다. 그러나 드롭 다운 리스트가 닫힐

때까지 선택한 값을 ComboBox 에 표시하지 않습니다.Home selectedIndex 의 값이 -1 이라면, 현재 선택한 데이터 목록이 변경되지 않습니다. 그렇지

않다면, 드롭 다운 리스트의 첫 번째 데이터 아이템으로 선택영역을 이동합니다. 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox 에 표시하지 않습니다.

End 드롭 다운 리스트의 가장 마지막 아이템으로 선택 영역을 이동합니다. 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox 에 표시하지 않습니다.

B. DropDownList 구성요소의 상호작용DropDownList 가 닫힌 상태일 경우

키 설명

알파벳/숫자 키 리스트 항목에서 가장 가깝게 매칭된 아이템을 표시합니다. 드롭 다운 리스트를 열지 않습니다.위쪽 화살표 한 항목 위를 선택합니다.아래쪽 화살표 한 항목 아래를 선택합니다.Ctrl + 아래쪽 화살표 드롭 다운 리스트를 엽니다.

293 / 307

6. 참고 자료

Page Up 한 페이지 위를 선택합니다. 만약 selectedIndex 의 값이 -1 이라면, 아무것도 하지 않습니다..Page Down 한 페이지 아래를 선택합니다. 만약 리스트의 끝이라면, 아무것도 하지 않습니다.Home 드롭 다운 리스트의 가장 첫 항목으로 이동합니다.End 드롭 다운 리스트의 가장 마지막 항목으로 이동합니다.DropDownList 가 열린 상태일 경우

키 설명

알파벳/숫자 키 아이템 항목 안에서 가장 가까운 아이템으로 스크롤하고 강조 표시를 합니다.위쪽 화살표 한 항목 위를 선택합니다. 그러나 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox 에

표시하지 않습니다.아래쪽 화살표 한 항목 아래를 선택합니다. 그러나 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox

에 표시하지 않습니다.Ctrl + 위쪽 화살표 드롭 다운 리스트를 닫고 선택한 항목을 ComboBox 에 표시합니다.ESC 드롭 다운 리스트를 닫습니다. 그러나 선택한 항목을 ComboBox 에 표시하지 않습니다.Page Up 현재 표시되어 있는 데이터 목록의 가장 위를 선택합니다. 그러나 드롭 다운 리스트가 닫힐

때까지 선택한 값을 ComboBox 에 표시하지 않습니다.Page Down 현재 표시되어 있는 데이터 목록의 가장 아래를 선택합니다. 그러나 드롭 다운 리스트가 닫힐

때까지 선택한 값을 ComboBox 에 표시하지 않습니다.Home selectedIndex 의 값이 -1 이라면, 현재 선택한 데이터 목록이 변경되지 않습니다. 그렇지

않다면, 드롭 다운 리스트의 첫 번째 데이터 아이템으로 선택영역을 이동합니다. 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox 에 표시하지 않습니다.

End 드롭 다운 리스트의 가장 마지막 아이템으로 선택 영역을 이동합니다. 드롭 다운 리스트가 닫힐 때까지 선택한 값을 ComboBox 에 표시하지 않습니다.

C. List 구성요소의 상호작용키 설명

Page Up 한 페이지 이전(위/왼쪽)으로 선택 영역을 이동합니다.Page Down 한 페이지 다음(아래/오른쪽)으로 선택 영역을 이동합니다.왼쪽/위쪽 화살표 한 항목의 이전(위/왼쪽) 항목으로 선택 영역을 이동합니다.오른쪽/아래쪽 화살표 한 항목의 다음(아래/오른쪽) 항목으로 선택 영역을 이동합니다.Home 리스트의 첫 번째 항목으로 선택 영역을 이동합니다.End 리스트의 마지막 항목으로 선택 영역을 이동합니다.Control 토글 키입니다. allowMultipleSelection 속성이 true 로 설정되어 있을 때, 여러 항목을

선택하거나 선택 해제를 할 수 있습니다. Shift 연속된 선택을 하기 위한 키입니다. allowMultipleSelection 속성이 true 로 설정되어 있을 때

연속적으로 항목을 선택합니다.

D. NumericStepper 구성요소의 상호작용키 설명

위쪽 화살표 1 단위 값을 증가시킵니다.아래쪽 화살표 1 단위 값을 감소시킵니다.왼쪽 화살표 NumericStepper 컨트롤의 텍스트 필드 안의 삽입점을 왼쪽으로 한 칸 이동합니다.

294 / 307

6. 참고 자료

오른쪽 화살표 NumericStepper 컨트롤의 텍스트 필드 안의 삽입점을 오른쪽으로 한 칸 이동합니다.

E. RadioButton 구성요소의 상호작용키 설명

Control+화살표키 라디오 버튼을 선택하지 않고 그룹 안의 버튼을 따라 포커스를 이동합니다.스페이스 바 버튼을 선택합니다.

F. Slider 구성요소의 상호작용키 설명

위쪽/오른쪽 화살표 1 단위(인터벌)의 값을 증가시킵니다. 만약 값의 인터벌이 명시되어 있지 않다면 1픽셀 단위를 사용하여 값을 증가시킵니다.

아래쪽/왼쪽 화살표 1 단위(인터벌)의 값을 감소시킵니다. 만약 값의 인터벌이 명시되어 있지 않다면 1픽셀 단위를 사용하여 값을 감소시킵니다.

Home 슬라이더의 최소 값으로 썸(슬라이더 핸들)을 이동합니다.End 슬라이더의 최대 값으로 썸(슬라이더 핸들)을 이동합니다.

G. Spinner 구성요소의 상호작용키 설명

위쪽 화살표 1 단위 값을 증가시킵니다.아래쪽 화살표 1 단위 값을 감소시킵니다.왼쪽 화살표 NumericStepper 컨트롤의 텍스트 필드 안의 삽입점을 왼쪽으로 한 칸 이동합니다.오른쪽 화살표 NumericStepper 컨트롤의 텍스트 필드 안의 삽입점을 오른쪽으로 한 칸 이동합니다.

1.38.2 MX 컴포넌트컴포넌트 설명

Accordion 컨테이너 다른 패널로 포커스를 이동하려면 화살표 키를 누릅니다. 그리고 나서 스페이스 바 또는 엔터키를 눌러 패널을 선택합니다. 컨테이너 안의 각각의 패널 사이로 이동하려면 Page Up 과 Page Down 키를 사용합니다.스크린 리더기가 Accordion 컨테이너를 만나게 되면, tab 이라는 단어로 패널을 나타내고, active 라는 단어를 사용하여 현재의 탭을 나타냅니다.Accordion 컨테이너에 대한 상호작용에 대해서는 Accordion 구성요소의 상호작용을 참고하시기 바랍니다..

AdvancedDataGrid 컨트롤 AdvancedDataGrid 컨트롤은 DataGrid 와 Tree 컨트롤의 접근성 기능을 지원하고 추가적인 기능을 제공합니다. 보다 자세한 정보는 AdvancedDataGrid 컨트롤의 접근성을 참고하세요.AdvancedDataGrid 컨트롤의 상호작용에 대해서는 AdvancedDataGrid 구성요소의 상호작용을 참고하시기 바랍니다.

Alert 컨트롤 폼 모드에서는, Alert 컨트롤 안의 텍스트와 Alert 의 기본 버튼의 레이블이 낭독됩니다. 폼 모드가 아닐 때에는 Alert 컨트롤 내부의 텍스트가 아래쪽 화살표를 눌렸을 때 두 번 낭독 됩니다.

Button 컨트롤 Button 컨트롤의 기능을 실행하려면 스페이스 바 키를 누릅니다. 버튼의 실행을 취소하려면, 스페이스 바를 눌렀다가 떼기 전에 Button 컨트롤의 밖으로 포커스를 이동시키기 위해서 Tab키를 누릅니다.

295 / 307

6. 참고 자료

스크린 리더기가 Button 컨트롤을 만나게 되면, 스크린 리더기에 의존하여 Button 컨트롤의 행동의 변화가 생깁니다. JAWS 6.10 의 경우에는, 폼 모드일 때 스페이스 바가 버튼을 실행시킵니다. 폼 모드가 비활성화 된 상태일 때에는 스페이스 바 또는 Enter 키가 Button 컨트롤을 실행시킬 수 있습니다.

CheckBox 컨트롤 체크 박스 아이템을 실행시키려면 스페이스 바 키를 누릅니다.CheckBox 컨트롤의 상호작용에 대해서는 CheckBox 구성요소의 상호작용을 참고하기 바랍니다.

ColorPicker 컨트롤 스크린 리더기는 “Color picker combo box”라고 낭독합니다.Control+아래쪽 화살표 키로 열고 Control+위쪽 화살표키를 사용하여 닫습니다. ColorPicker가 열린 상태에서, 4 개의 화살표 키를 사용하여 컬러들 사이를 이동할 수 있습니다.ColorPicker 가 열린 상태에서 Enter 키를 사용하여 현재 선택한 색상 값을 설정합니다. Control+위쪽 화살표도 동일한 기능을 합니다.ColorPicker 가 열린 상태에서 ESC 키를 사용하면 드롭 다운 영역은 닫히고 이전에 선택한 컬러 값으로 재설정 됩니다.

ComboBox 컨트롤 ComboBox 구성요소의 상호작용을 참고하세요.DataGrid 컨트롤 콘텐츠를 강조하기 위해 화살표 키를 누릅니다. 그리고 나서 필드 안의 각각의 글자 사이를

이동합니다.폼 모드에서 스크린 리더기를 사용할 때, DataGrid 컨트롤 안의 편집할 수 있는 TextInput 필드 사이를 이동하려면 Tab 키를 사용합니다. DataGrid 컨트롤의 상호작용에 대해서는 DataGrid 구성요소의 상호작용을 참고하기 바랍니다.

DateChooser 컨트롤 상, 하, 좌, 우 키를 눌러 선택한 날짜를 변경합니다. 월 안에서 사용할 수 있는 첫 번째 날짜로 위치하려면 Home 키를 사용하고 마지막 날짜로 위치하려면 End 키를 사용합니다. 이전 또는 다음 달로 이동하려면 Page Up 또는 Page Down 키를 사용합니다. DateChooser 컨트롤의 상호작용에 대해서는 DateChooser 와 DateField 구성요소의 상호작용을 참고하기 바랍니다.

DateField 컨트롤 DateChooser 컨트롤을 열려면 Control+아래쪽 화살표 키를 사용하고, 적당한 날짜를 선택합니다. 폼 모드에서 스크린 리더기를 사용할 때, 컨트롤에 할당된 키보드 키와 동일한 키 스트로크를 사용합니다.폼 모드에서 스크린 리더기가 DateChooser 컨트롤을 만나게 될 때, 스크린 리더기는 “DropDown Calendar currentDate, to open press Control Down, ComboBox.” 라고 낭독하게 될 것입니다. 여기서 currentDate 는 현재 선택된 날짜입니다.DateField 컨트롤의 상호작용에 대해서는 DateChooser 와 DateField 구성요소의 상호작용을 참고하기 바랍니다.

Form 컨테이너 디폴트 버튼을 정의하여 액션 수행에 대한 기본 값을 정의합니다.Image 컨트롤 툴팁이 정의된 Image 컨트롤은 폼 모드가 활성화 되었을 때에만 스크린 리더기를 통해 읽을 수

있습니다. Image 컨트롤은 폼 모드 또는 키보드를 통해 포커스를 받을 수 없습니다..Label 컨트롤 Label 컨트롤은 다른 연관된 컨트롤이 있거나 폼 모드가 활성화 되었을 때에 스크린 리더기가

읽을 수 있습니다. Label 컨트롤은 폼 모드 또는 키보드를 통해 포커스를 받을 수 없습니다.LinkButton 컨트롤 LinkButton 컨트롤은 스크린 리더기에 따라 다르게 사용됩니다. JAWS 6.10 에서, 폼 모드일 때

LinkButton 컨트롤을 실행하기 위해 스페이스 키를 누릅니다. 폼 모드가 비활성화 된 상태일 때에는 컨트롤을 실행하기 위해 스페이스 또는 엔터키를 사용합니다.LinkButton 컨트롤의 상호작용에 대해서는 LinkButton 구성요소의 상호작용을 참고하기 바랍니다.

Menu 컨트롤 스크린 리더기에서의 내비게이션 방법은 키보드 내비게이션과 동일합니다.Menu 컨트롤의 상호작용에 대해서는 Menu 구성요소의 상호작용을 참고하기 바랍니다.

MenuBar 컨트롤 스크린 리더기에서의 내비게이션 방법은 키보드 내비게이션과 동일합니다.

296 / 307

6. 참고 자료

MenuBar 컨트롤의 상호작용에 대해서는 Menu 구성요소의 상호작용을 참고하기 바랍니다.Panel 컨테이너 스크린 리더기는 폼 모드가 활성화 되었을 때에만 패널의 제목을 읽습니다.RadioButton 컨트롤 그룹 안에서 하나의 라디오 버튼이 선택된 상태로 그룹 안으로 들어가려면 Enter 키를

누릅니다. 그룹 안에서 아이템 사이를 이동하려면 화살표 키를 사용합니다. 그룹 안에서 다음 아이템으로 이동하려면 아래쪽 또는 오른쪽 화살표 키를 사용합니다. 그룹 안에서 이전 아이템으로 이동하려면 위쪽 또는 왼쪽 화살표 키를 사용합니다.스크린 리더기를 사용할 때, 스페이스 바 키를 사용하여 라디오 버튼을 선택합니다.RadioButton 컨트롤의 상호작용에 대해서는 RadioButton 구성요소의 상호작용을 참고하기 바랍니다.

RadioButtonGroup 컨트롤 스크린 리더기는 RadioButton 컨트롤에서와 동일한 방식으로 내비게이션을 합니다.Slider 컨트롤 폼 모드에서 이 컨트롤은 컨트롤의 방향(왼쪽-오른쪽 또는 위-아래)를 따라 낭독을 하고 현재의

값을 읽습니다. 이 컨트롤은 가로방향의 슬라이더에서 다음의 키를 사용합니다. 왼쪽/오른쪽 화살표키 – 좀더 낮은 값/좀더 높은 값의 방향으로 슬라이더를 이동합니다. Page Up/Page Down – 슬라이더 범위의 최상위/최하위로 슬라이더를 이동합니다. 아래쪽/위쪽 화살표키 – 좀더 낮은 값/좀더 높은 값의 방향으로 슬라이더를 이동합니다. Home/End – 슬라이더 범위의 최상위/최하위로 슬라이더를 이동합니다.이 컨트롤은 세로방향의 슬라이더에서 다음의 키를 사용합니다. 아래쪽/위쪽 화살표키 – 좀더 낮은 값/좀더 높은 값의 방향으로 슬라이더를 이동합니다. Home/End – 슬라이더 범위의 최상위/최하위로 슬라이더를 이동합니다.

TabNavigator 컨테이너 스크린 리더기가 TabNavigator 컨테이너 패널을 만나게 될 때, 스크린 리더기는 tab 이라는 단어로 각각의 패널을 표시합니다. active 라는 단어를 사용하여 현재의 패널을 나타냅니다. 패널이 선택될 때, 사용자는 Enter 키를 사용하여 패널로 이동합니다.다른 패널로의 포커스를 이동하려면 화살표 키를 사용합니다. 그리고 나서 패널을 선택하기 위해 스페이스 바 또는 Enter 키를 사용합니다. 컨테이너의 각각의 패널 사이를 이동하려면 Page Up 과 Page Down 키를 사용합니다.TabNavigator 컨테이너의 상호작용에 대해서는 TabNavigator 구성요소의 상호작용을 참고하기 바랍니다.

Text 컨트롤 Text 컨트롤은 포커스를 받을 수 없습니다. 그리고 폼 모드가 활성화 되었을 때에만 스크린 리더기가 읽을 수 있습니다.

TextArea 컨트롤 라인의 처음으로 이동하려면 Home 키를 사용합니다. 라인의 마지막으로 이동하려면 End 키를 사용합니다. 텍스트의 처음으로 이동하려면 PageUp 키를 사용합니다. 텍스트의 마지막으로 이동하려면 PageDown 키를 사용합니다.

TextInput 컨트롤 라인의 처음으로 이동하려면 Home 또는 Page Up 키를 사용합니다. 라인의 마지막으로 이동하려면 End 또는 Page Down 키를 사용합니다.

TitleWindow 컨테이너 폼 모드가 활성화 되어 있을 때에만, 스크린 리더기가 TitleWindow 컨트롤을 읽습니다.ToolTipManager 스크린 리더기가 사용 중이라면, 툴 팁을 포함하고 있는 아이템의 포커스가 갔을 때 아이템을

읽은 후 툴 팁의 콘텐츠를 읽습니다. Image 컨트롤과 같이 접근 불가능한 컴포넌트에 포함된 툴 팁을 읽을 수 없습니다.

Tree 컨트롤 Tree 컨트롤 안에서 아이템 사이를 이동하려면 위/아래쪽 화살표 키를 사용합니다. 그룹을 열려면 오른쪽 화살표 키 또는 스페이스 바를 사용합니다. 그룹을 닫으려면, 왼쪽 화살표 키 또는 스페이스 바를 사용합니다. Tree 컨트롤의 상호작용에 대해서는 Tree 구성요소의 상호작용을 참고하시기 바랍니다.

A. Accordion 구성요소의 상호작용키 설명

297 / 307

6. 참고 자료

오른쪽/아래쪽 화살표 선택된 자식의 변화 없이 마지막부터 처음까지 순환을 하며 다음 버튼으로 포커스를 줍니다.왼쪽/위쪽 화살표 선택된 자식의 변화 없이 처음부터 마지막까지 이전의 버튼으로 포커스를 줍니다.Page Up 처음부터 마지막까지 순환하며 이전의 패널로 이동합니다.Page Down 마지막부터 처음까지 순환하며 다음의 패널로 이동합니다.Home 첫 번째 자식 패널로 이동합니다.End 마지막 자식 패널로 이동합니다.Enter/Space 포커스가 표시된 탭과 연관된 자식을 선택합니다.

B. AdvancedDataGrid 구성요소의 상호작용상태 할당된 키 설명

표준 한 개의 행 단위로 세로 방향으로 스크롤을 하려면 위쪽과 아래쪽 화살표 키를 사용합니다.

첫 번째 칼럼에서 문자를 앞쪽에서부터 타이핑을 하여 찾고자 하는 문자를 입력합니다. 첫 번째와 마지막 행으로 이동하려면 Home 과 End 키를 사용합니다. 끝에 보여진 행으로 이동하려면 Page Up 과 Page Down 키를 사용합니다. 그리고 나서

rowCount 속성에 의해 명시된 행의 수만큼 세로 방향으로 스크롤 합니다.편집 모드 다음과 이전의 셀로 이동하기 위해서 Tab 과 Shift+Tab 을 사용합니다. 그리고 편집을

시작합니다. 편집을 취소하려면 ESC 나 Control+마침표 키를 사용합니다. AdvancedDataGridColumn.editorUsesEnterKey 속성 값에 기반하여 Enter 키를

사용합니다. 만약 editorUsesEnter 속성이 true 라면, Enter 키는 입력 텍스트의 일부분으로

여겨집니다. 만약 editorUsesEnter 속성이 false 이고, 한 줄 편집이라면, Enter 키는 아이템을

저장하고 아래의 행으로 이동합니다. 만약 AdvancedDataGrid 컨트롤에 포커스를 이동하기 위해 Tab 키를 사용한다면,

포커스는 마지막의 편집한 아이템의 위치에 놓여집니다. 인접하지 않은 여러 아이템을 선택하려면 Control+클릭을 사용합니다.

확장할 수 있는 트리 애니메이션이 없이 현재 노드 아래에 있는 모든 노드를 열거나 닫으려면 숫자 패드에 있는 곱하기 키(* 키)를 사용합니다.

애니메이션이 있는 상태로 노드를 열려면 숫자 패드의 더하기 키(+) 또는 Space 키를 사용합니다.

애니메이션이 있는 상태로 노드를 닫으려면 숫자 패드의 빼기 키(-)를 사용합니다. 닫힌 노드를 열거나 열린 노드를 닫으려면 Control+Shift+Space 를 사용합니다. 닫힌 노드를 열거나 상위 노드를 선택하려면 Control+Shift+오른쪽 화살표 키를

사용합니다. 열린 노드를 닫으려면 Control+Shift+왼쪽 화살표 키를 사용합니다. 위 또는 아래로 한 행 이동하려면 위쪽 또는 아래쪽 화살표키를 사용합니다.

칼럼 헤더 칼럼의 헤더로 포커스를 이동하려면 화살표 키를 사용합니다. 처음 칼럼 헤더에 포커스가 있을 때 Space 키를 누르면 내림차순으로 정렬을 합니다.

오름차순과 내림차순 사이의 정렬 순서를 Space 키를 눌러 토글 방식으로 정렬할 수 있습니다.

여러 칼럼을 정렬하려면 헤더에 포커스가 있을 때 Control+Space 키를 사용합니다. 칼럼의 순환 없이 이전 또는 다음 헤더로 이동을 하려면 왼쪽 또는 오른쪽 화살표 키를

사용합니다.

298 / 307

6. 참고 자료

페이지 내에서의 가로/세로 방향으로의 스크롤

처음 Page Up 또는 Page Down 키를 눌러서 현재 보이는 행의 처음 또는 마지막 행으로 이동합니다. 그 다음 Page Up 또는 Page Down 키를 누르면, 보이는 행의 숫자에 일치한 채로 페이지 단위의 세로방향으로 위 또는 아래로 스크롤이 됩니다.

보이는 칼럼의 처음 또는 마지막으로 이동하려면 Shift+Page Up 또는 Shift+Page Down 키를 사용합니다.

편집하는 동안 AdvancedDataGrid 에서 포커스 이동

AdvancedDataGrid.editable=true 또는 AdvancedDataGridColumn=true 로 설정했을 때

AdvancedDataGrid 컨트롤로 포커스를 이동하려면 Tab 키를 사용합니다. 다음의 컴포넌트로 포커스를 이동하려면 다시 Tab 키를 사용합니다. 셀 사이를 이동하려면 상, 하, 좌, 우 화살표 키를 사용합니다. 현재의 행에서 처음 또는 마지막 칼럼으로 이동하려면 Shift+Home 또는 Shift+End

키를 사용합니다. 기본적으로 셀은 편집할 수 없을 때에만 선택됩니다. 셀을 편집하려면 F2 를 누릅니다. 편집 영역 내에서 커서를 이동하려면 화살표 키를 사용합니다. 편집을 취소하려면 ESC 키를 사용합니다. 편집한 내용을 적용하려면 Enter 키를 사용합니다. 첫 번째와 마지막 행으로 이동하려면 Home 과 End 키를 사용합니다. 이전 또는 다음 페이지로 이동하려면 Page Up 또는 Page Down 키를 사용합니다.

AdvancedDataGrid 컨트롤에 포커스가 위치했을 때

셀 사이를 이동하려면 상, 하, 좌, 우 화살표 키를 사용합니다. 현재 행에서 처음과 마지막 칼럼으로 이동하려면 Shift+Home 과 Shift+End 키를

사용합니다. 기본적으로 편집할 수 없는 상태에만 셀을 선택할 수 있습니다. 셀을 편집 상태로 만들려면 F2 키를 누릅니다. 편집 영역 내에서 커서를 이동하려면 화살표 키를 사용합니다. 편집을 취소하려면 ESC 키를 사용합니다. 편집한 내용을 적용하려면 Enter 키를 사용합니다. 첫 번째와 마지막 행으로 이동하려면 Home 과 End 키를 사용합니다. 이전 또는 다음 페이지로 이동하려면 Page Up 또는 Page Down 키를 사용합니다.

셀을 편집할 때

편집 영역 내에서 커서를 이동하려면 화살표 키를 사용합니다. 편집을 취소하려면 ESC 키를 사용합니다. 변경한 편집 내용을 적용하려면 Enter 키를 사용합니다. 첫 번째와 마지막 행으로 이동하려면 Home 과 End 키를 사용합니다. 이전 또는 다음 페이지로 이동하려면 Page Up 또는 Page Down 키를 사용합니다.

AdvancedDataGrid.editable = false 또는 AdvancedDataGridColumn=false 일 때

첫 번째와 마지막 행으로 이동하려면 Home 과 End 키를 사용합니다. 이전 또는 다음 페이지로 이동하려면 Page Up 또는 Page Down 키를 사용합니다.

C. CheckBox 구성요소의 상호작용CheckBox 컨트롤이 사용 가능하고 사용자가 클릭을 했을 때, 컨트롤은 포커스를 받습니다. CheckBox 컨트롤은 초기화 상태에 설정한 값에 의존하여 체크 또는 체크 해제된 상태를 나타냅니다. CheckBox 컨트롤 전체 영역은 클릭이 가능한 영역입니다. 만약 CheckBox 컨트롤의 텍스트가 아이콘보다도 훨씬 크다면, 클릭 가능한 영역은 아이콘의 위와 아래 모두 포함할 수 있습니다.

299 / 307

6. 참고 자료

만약 사용자가 CheckBox 컨트롤의 외부 영역으로 포인터를 움직이거나 마우스로 버튼을 누르는 동안 레이블을 움직인다면 CheckBox 컨트롤의 외형은 원래의 상태로 되돌아 온 상태로 포커스를 계속 유지합니다. CheckBox 컨트롤의 상태는 컨트롤 위에서 마우스 버튼을 눌렀다가 뗄 때까지 변하지 않습니다.

비활성화 된 CheckBox 로는 상호작용을 할 수 없습니다.

D. ComboBox 구성요소의 상호작용ComboBox 가 닫힌 상태일 경우

키 설명

Control+아래쪽 화살표 드롭 다운 리스트를 열고 드롭 다운 리스트에 포커스를 줍니다.아래쪽 화살표 한 항목 아래로 선택 영역을 이동합니다.End 항목들 아래로 선택 영역을 이동합니다.Home 항목들 위로 선택 영역을 이동합니다.Page Down 드롭 다운 리스트의 마지막 가장 아래에 있는 아이템을 표시합니다. 만약 현재 선택 영역이

rowCount 값의 여러 곳에 있다면, 리스트의 rowCount -1 아래의 위치한 항목 또는 가장 마지막 항목을 표시합니다. 만약 현재 선택한 항목이 데이터 제공자의 마지막 항목이라면, 아무런 일도 일어나지 않습니다.

Page Up 드롭 다운 리스트의 위의 아이템을 표시합니다. 만약 현재 선택 영역이 rowCount 값의 여러 곳에 있다면, rowCount-1 위에 위치한 항목 또는 가장 처음 항목을 표시합니다. 만약 현재 선택한 항목이 데이터 제공자의 첫 번째 항목이라면, 아무런 일도 일어나지 않습니다.

위쪽 화살표 한 항목 위로 선택 영역을 이동합니다.ComboBox 가 열린 상태일 경우

키 설명

Control+위쪽 화살표 드롭 다운 리스트를 닫고 ComboBox 컨트롤로 포커스를 되돌려줍니다.아래쪽 화살표 한 항목 아래로 선택 영역을 이동합니다.End 항목들 아래로 선택 영역을 이동합니다.Enter 드롭 다운 리스트를 닫고 ComboBox 컨트롤로 포커스를 되돌려줍니다. ComboBox

컨트롤에는 선택한 항목이 적용됩니다.ESC 드롭 다운 리스트를 닫고 ComboBox 컨트롤로 포커스를 되돌려줍니다. ComboBox

컨트롤에는 이전에 선택된 항목이 유지됩니다.Home 항목들 위로 선택 영역을 이동합니다.Page Down 보여지고 있는 리스트의 아래로 이동합니다. 만약 현재 선택 영역이 리스트의 아래에 있다면,

표시되는 리스트의 가장 위로 선택 영역을 이동하고 다음의 rowCount -1 에 해당하는 아이템을 표시합니다. 현재 선택 영역이 데이터 제공자의 마지막 항목이라면 아무런 일도 일어나지 않습니다.

Page Up 보여지고 있는 리스트의 위로 이동합니다. 만약 현재 선택 영역이 리스트의 위에 있다면, 표시되는 리스트의 가장 아래로 선택 영역을 이동하고 이전의 rowCount-1 에 해당하는 아이템을 표시합니다. 현재 선택 영역이 데이터 제공자의 첫 번째 항목이라면 아무런 일도 일어나지 않습니다.

Shift+Tab 드롭 다운 리스트를 닫고 이전 컴포넌트로 포커스를 이동합니다.Tab 드롭 다운 리스트를 닫고 다음 컴포넌트로 포커스를 이동합니다.위쪽 화살표 한 항목 위로 선택 영역을 이동합니다.

300 / 307

6. 참고 자료

E. DataGrid 구성요소의 상호작용키 설명

Enter / Shift+Enter 셀이 편집 가능한 상태일 때, 변화된 값을 셀에 적용하고, 동일한 칼럼의 셀을 편집하기 위해 이동합니다. 그리고 Shift 키의 눌려진 여부에 따라 위 또는 아래의 행의 셀로 이동합니다.

Tab 행 순서 안에 있는 편집 가능한 셀로 포커스를 이동합니다. 만약 마지막 행의 마지막에 위치했다면, 포커스를 받을 수 있는 부모 컨테이너 내의 다음 컨트롤로 포커스를 이동합니다.

Shift+Tab 이전의 편집 가능한 셀로 포커스를 이동합니다. 만약 행의 시작 부분에 위치해 있다면, 이전 행의 마지막 셀로 이동합니다. 만약 첫 번째 행의 시작 부분에 위치해 있다면, 포커스를 받을 수 있는 부모 컨테이너 내의 이전 컨트롤로 포커스를 이동합니다.

위쪽 화살표 / Home / Page Up 만약 편집할 수 있는 셀이라면 셀의 텍스트의 앞쪽으로 커서를 이동합니다. 만약 편집할 수 없는 셀이라면 한 아이템 위로 선택 영역을 이동합니다.

아래쪽 화살표 / End / Page Down

만약 편집할 수 있는 셀이라면, 셀의 텍스트의 끝 쪽으로 커서를 이동합니다. 만약 편집할 수 없는 셀이라면, 한 아이템 아래로 선택 영역을 이동합니다.

Control 토글 키입니다. 만약 DataGrid 컨트롤의 allowMultipleSelection 속성이 true 로 설정되어 있다면, 연속하지 않은 셀들을 여러 개 선택하거나 또는 선택을 해제할 수 있습니다.

Shift 연속적으로 선택할 때 사용하는 키입니다. 만약 DataGrid 컨트롤의 allowMultipleSelection 속성이 true 로 설정되어 있다면, 연속된 셀을 선택할 수 있게 해줍니다.

F. DateChooser 와 DateField 구성요소의 상호작용키 설명

왼쪽 화살표 월 내에서 사용 가능한 이전 날로 선택한 날짜를 이동합니다. 이전 달로는 이동할 수 없습니다. 사용 할 수 없는 날짜에도 접근을 하려면 Shift 키와 왼쪽 화살표키를 함께 사용합니다.

오른쪽 화살표 월 내에서 사용 가능한 다음 날로 선택 날짜를 이동합니다. 다음 달로는 이동할 수 없습니다. 사용할 수 없는 날짜에도 접근을 하려면 Shift 키와 오른쪽 화살표키를 함께 사용합니다.

위쪽 화살표 사용 가능한 이전날 중 7 일 이전 날로 선택한 날짜를 이동합니다. 이전 달로는 이동할 수 없습니다. 사용할 수 없는 날짜에도 접근을 하려면 Shift 키와 위쪽 화살표키를 함께 사용합니다.

아래쪽 화살표 사용 가능한 다음날 중 7 일 이후 날로 선택한 날짜를 이동합니다. 다음 달로는 이동할 수 없습니다. 사용할 수 없는 날짜에도 접근을 하려면 Shift 키와 아래쪽 화살표키를 함께 사용합니다.

Page Up 이전 달 달력을 표시합니다.Page Down 다음 달 달력을 표시합니다.Home 월 안에서 사용 가능한 첫 번째 날로 선택한 날짜를 이동합니다.End 월 안에서 사용 가능한 마지막 날로 선택한 날짜를 이동합니다.+ 다음 년으로 이동합니다.- 이전 년으로 이동합니다.Control+아래쪽 화살표 DateField 컨트롤에서만 사용 가능합니다. DateChooser 컨트롤을 엽니다.Control+위쪽 화살표 DateField 컨트롤에서만 사용 가능합니다. DateChooser 컨트롤을 닫습니다.ESC DateField 컨트롤에서만 사용 가능합니다. 기능을 취소합니다.Enter DateField 컨트롤에서만 사용 가능합니다. 날짜를 선택하고 DateChooser 컨트롤을 닫습니다.

301 / 307

6. 참고 자료

G. LinkButton 구성요소의 상호작용사용자가 LinkButton 컨트롤을 클릭할 때, LinkButton 컨트롤은 클릭 이벤트를 디스패치 합니다. 만약, LinkButton 컨트롤을 사용할 수 있는 상태라면 다음과 같은 일이 발생합니다.• 사용자가 LinkButton 컨트롤 위에서 마우스 포인터를 이동할 때, LinkButton 컨트롤은 롤 오버 상태로 외형을 변경합니다.• 사용자가 LinkButton 컨트롤을 클릭할 때, 입력 포커스는 컨트롤로 이동하고 LinkButton 컨트롤을 Press 상태의 외형으로

표시합니다. 사용자가 마우스 버튼을 눌렀다가 뗄 때, LinkButton 컨트롤은 컨트롤의 외형을 RollOver 상태로 되돌립니다.• 만약 사용자가 마우스 버튼을 누르고 있는 상태로 LinkButton 컨트롤의 밖으로 마우스 포인터를 이동시킨다면, 컨트롤의

외형은 원래의 상태로 되돌아 오고 입력 포커스를 받게 됩니다.• 만약 토글 속성이 true 로 설정된다면, LinkButton 컨트롤의 상태는 마우스 버튼이 컨트롤의 위에서 눌려졌다 뗄 때까지

변경되지 않습니다.

만약 LinkButton 컨트롤이 사용 불가능한 상태라면, 사용 불가능한 상태의 외형으로 나타날 것이고 사용자의 상호작용을 받지 않습니다. 사용 불가능한 상태에서 컨트롤은 모든 마우스 또는 키보드 인터렉션을 무시합니다.

H. Menu 구성요소의 상호작용키 설명

위/아래 화살표 메뉴의 행으로 위/아래 방향으로 선택 영역을 이동합니다. 선택 영역은 위 또는 아래의 행 순서로 순환을 합니다.

오른쪽 화살표 서브 메뉴를 열거나 메뉴 바에서 다음 메뉴로 선택 영역을 이동합니다.왼쪽 화살표 서브 메뉴를 닫고 상위 메뉴가 존재한다면, 상위 메뉴로 포커스를 돌려줍니다. 또는 메뉴 바가

존재한다면 메뉴 바에서 이전 메뉴로 선택 영역을 이동합니다.Enter 서브 메뉴를 엽니다. 만약 서브 메뉴가 존재하지 않는다면 행에서 마우스를 클릭하거나 눌렀다

떼었을 때의 기능을 실행합니다.ESC 메뉴를 닫습니다.

I. RadioButton 구성요소의 상호작용키 설명

Control+화살표키 버튼의 선택 없이 버튼들 사이로 포커스를 이동합니다.스페이스 바 버튼을 선택합니다.

J. TabNavigator 구성요소의 상호작용키 설명

아래쪽/오른쪽 화살표 다음 탭으로 포커스를 줍니다. 마지막 탭에 도달하면 첫 번째 탭으로 포커스를 이동합니다. 선택한 자식 콘텐츠의 변화는 없습니다.

위쪽/왼쪽 화살표 이전 탭으로 포커스를 줍니다. 첫 번째 탭에 도달하면 마지막 탭으로 포커스를 이동합니다. 선택한 자식 콘텐츠의 변화는 없습니다.

Page Down 다음의 자식을 선택합니다. 마지막에 도달하면 처음으로 이동합니다.Page Up 이전의 자식을 선택합니다. 처음에 도달하면 마지막으로 이동합니다.Home 첫 번째 자식을 선택합니다.End 마지막 자식을 선택합니다.Enter/Space 탭에 포커스를 둔 상태에서 연관된 자식을 선택합니다.

302 / 307

6. 참고 자료

K. Tree 구성요소의 상호작용노드의 편집 가능한 상태

키 설명

아래쪽 화살표 / Page Down / End

레이블의 끝으로 키보드 캐럿을 이동합니다.

위쪽 화살표 / Page Up / Home 레이블의 앞으로 키보드 캐럿을 이동합니다.오른쪽 화살표 한 글자 단위로 글자의 뒤쪽으로 캐럿을 이동합니다.왼쪽 화살표 한 글자 단위로 글자의 앞쪽으로 캐럿을 이동합니다.Enter 편집을 마치고 다음에 위치한 노드로 선택 영역을 이동한 후 편집 상태로 둡니다. 마지막

노드일 경우에는 레이블을 선택합니다.Shift+Enter 편집을 마치고 이전에 위치한 노드로 선택 영역을 이동한 후 편집 상태로 둡니다. 첫 번째

노드일 경우에는 레이블을 선택합니다.ESC 편집을 취소하고 텍스트를 되돌립니다. 그리고 행의 상태를 편집과 선택한 상태로 변경합니다.Tab 편집 모드일 경우, 현재의 변경 내용을 적용하고 아래에 위치한 행을 선택합니다. 그리고

레이블의 텍스트를 선택한 상태로 편집 모드로 들어섭니다. 만약 트리의 마지막 노드이거나 편집 모드가 아니라면, 다음 컨트롤로 포커스를 이동합니다.

Shift+Tab 편집 모드일 경우, 현재의 변경 내용을 적용하고 위에 위치한 행을 선택합니다. 그리고 레이블의 텍스트를 선택한 상태로 편집 모드로 들어섭니다. 만약 트리의 첫 번째 노드이거나 편집 모드가 아니라면, 이전 컨트롤로 포커스를 이동합니다.

키보드 내비게이션

키 설명

아래쪽 화살표 한 항목 아래로 선택 영역을 이동합니다. Tree 컨트롤이 포커스를 받았을 때, 첫 번째 노드에 포커스를 이동하기 위해 아래쪽 화살표 키를 사용합니다.

위쪽 화살표 한 항목 위로 선택 영역을 이동합니다.오른쪽 화살표 선택한 브랜치 노드를 엽니다. 만약 노드가 이미 열려 있다면, 첫 번째 자식 노드로 이동합니다.왼쪽 화살표 선택한 브랜치 노드를 닫습니다. 만약 자식 노드를 선택하거나 브랜치 노드가 닫혀진 상태로

선택되어 있다면, 상위 노드를 선택합니다.스페이스 바 또는 숫자패드의 별표(*)

선택한 브랜치 노드를 열거나 닫습니다. 토글 방식으로 사용합니다.

+(숫자 패드의 플러스) 선택한 브랜치 노드를 엽니다.-(숫자 패드의 마이너스) 선택한 브랜치 노드를 닫습니다.Control+화살표키 포커스를 이동합니다. 하지만 노드를 선택하지 않습니다. 노드를 선택하려면 스페이스 바를

사용합니다.End 리스트의 아래로 선택 영역을 이동합니다.Home 리스트의 위로 선택 영역을 이동합니다.Page Down 한 페이지 아래로 선택 영역을 이동합니다.Page Up 한 페이지 위로 선택 영역을 이동합니다.Control allowMultipleSelection 속성이 true 로 설정되어 있다면, 비연속식으로 여러 개의 노드를

선택할 수 있도록 합니다.Shift allowMultipleSelection 속성이 true 로 설정되어 있다면, 연속식으로 여러 개의 노드를 선택할

수 있도록 합니다.

303 / 307

6. 참고 자료

1.38.3 AdvancedDataGrid 의 접근성 사용AdvancedDataGrid 컨트롤은 DataGrid 와 Tree 컨트롤의 접근성 기능을 그대로 지원을 합니다. 그리고 접근성 지원을 위한 다른 기능이 추가되었습니다.

A. 셀과 헤더의 탐색AdvancedDataGrid 헤더의 셀에 대해서, 각각의 헤더 셀은 선택할 수 있고 개별적으로 보고 됩니다. 컨트롤의 첫 번째 행에 있을 때 위쪽 화살표 키를 누르면 헤더의 셀로 포커스가 이동합니다.

포커스가 헤더 셀로 이동될 때, 스크린 리더기는 다음과 같이 읽습니다. “From:Column 1 press space to sort ascending on this field. Press Control+Space to add this field to sort.”

다음 그림은 Revenues 칼럼에 대한 칼럼 그룹을 사용하는 AdvancedDataGrid 컨트롤을 보여줍니다 만약 이 컨트롤이 칼럼 그룹으로 정의되어 있다면 스크린 리더기는 다음과 같이 헤더 정보를 읽습니다. “Revenues : Column 1 spans 2 columns.”

데이터들은 AdvancedDataGrid 컨트롤의 selectionMode 속성의 설정 값에 의해 다음의 표와 같이 설명됩니다.Selection Mode 스크린 리더기 출력 내용

singleRow 행 전체에 대해 일치하는 정보

singleCell 선택한 셀에 대해서만 일치하는 정보

B. 플랫 데이터에 대한 탐색 예제다음 그림은 AdvancedDataGrid 컨트롤에 표시되는 플랫 데이터입니다.

304 / 307

6. 참고 자료

• 컨트롤로 포커스를 이동하기 위해 Tab 키를 누를 때, 스크린 리더기는 “ListBox”로 읽습니다.• 아래쪽 화살표키와 위쪽 화살표 키를 누르면 컨트롤의 행을 탐색합니다.

∘ selectionMode 속성이 singleRow 로 설정 되어 있다면, 스크린 리더기는 행 안의 모든 데이터를 “Artist: Grateful Dead, Album: Shakedown Street, Price: 11.99.” 와 같이 읽습니다.

∘ selectionMode 속성이 singleCell 로 설정 되어 있다면, 스크린 리더기는 선택한 셀의 데이터만 읽습니다. 행의 첫 번째 칼럼 안의 셀에 대해서는 스크린 리더기는 “Artist: Grateful Dead. Row 1.” 이라고 읽습니다. 행의 정보는 첫 번째 칼럼에 포커스가 있을 때에만 읽습니다. 하지만 행의 다른 칼럼에 있을 때에는 읽지 않습니다. 그러므로, 두 번째 셀에서 스크린 리더기는 “Album: ShakeDown Street.”라고 읽게 됩니다.

• 컨트롤의 첫 번 째 줄에 포커스가 있을 때 위쪽 화살표 키를 누르면 헤더 셀로 포커스가 이동합니다. 스크린 리더기는

“From: Column 1 press space to sort ascending on this field. Press control space to add this field to sort.” 라고

읽습니다.∘ 칼럼을 정렬 하려면 스페이스 바를 누릅니다.∘ 여러 칼럼에 대한 정렬도 가능합니다. 정렬 순서가 멀티 칼럼 정렬의 경우로 보고됩니다.예를 들어, 만약 Album 칼럼이 정렬이 되었고 정렬 순서가 2번이라면, 스크린 리더기는 “Album: Column 2 sorted ascending, sort order 2. Press space to sort descending on this field. Press Control+space to add this field to sort.” 라고 읽습니다.

C. 계층 데이터에 대한 탐색 예제다음 이미지는 계층 데이터를 표시하는 AdvancedDataGrid 컨트롤 입니다.

305 / 307

6. 참고 자료

• 컨트롤로 포커스를 이동하게 위해 Tab 키를 누르면, 스크린 리더기는 “Treeview”로 읽게 됩니다.• 노드를 열려면 Shift+Control+오른쪽 화살표 키를 누릅니다.• 다음 행으로 포커스를 이동하려면 아래쪽 화살표키를 누릅니다.

만약 Arizona 아래의 첫 번째 행으로 포커스를 이동한다면, 스크린 리더기는 “Level2. Regoin:Southwest, Territory:Arizona, Territory Rep: Barbara Jennings, Actual: 38865 Estimate: 40001, 1 of 2. Press Control+Shift+Right Arrow to open. Control+Shift+Left Arrow to close. Open.” 이라고 읽습니다.

1.39 ActionScript 3.0 이전 버전에서의 접근성 지원ActionScript 3.0 의 이전 버전인 ActionScript 1.0 과 ActionScript 2.0(이하 ActionScript 2.0 으로 통칭함)에서도 접근성을 지원하기 위한 클래스와 전역 속성을 지원합니다.

ActionScript 2.0 에서는 액세스 가능성 패널과 ActionScript 3.0 의 flash.accessibility.AccessibilityProperties 클래스에 대응하는 전역 속성으로 _accProps 라는 속성을 제공하며, 이 속성을 통해 스크린 리더기의 화면 판독에 대한 옵션들을 제공합니다.

1.39.1 _accProps 전역 속성_accProps 속성은 런타임 상에서 SWF 파일, 무비 클립, 버튼, 동적 텍스트 필드 및 입력 텍스트 필드에 대한 스크린 리더기가 접근할 수 있는 옵션들을 제공합니다. _accProps 전역 속성은 ActionScript 3.0 의 AccessibilityProperties 클래스와 유사하며, 데이터 타입이 Object 라는 차이점이 있습니다.

_accProps 속성은 Object 형의 객체로 약속된 내부 속성으로는 다음 표와 같이 AccessibilityProperties 클래스의 속성과 동일합니다.

속성 데이터타입 액세스 가능성 패널에서의 설정 적용 대상 AccessibilityProperties 클래스와 대응하는 속성

silent Boolean 동영상을 액세스 가능하게 만들기/객체를 액세스 가능하게 만들기

전체 SWF 파일, 무비 클립, 버튼, 동적 텍스트필드, 입력 텍스트 필드

silent

forceSimple Boolean 자식 객체 액세스 가능 전체 SWF 파일, 무비 클립 forceSimple

name String 이름 전체 SWF 파일, 무비 클립, 버튼, 입력 텍스트 필드

name

description String 설명 전체 SWF 파일, 무비 클립, 버튼, 입력 텍스트 필드

description

306 / 307

6. 참고 자료

shortcut String 단축키 무비 클립, 버튼, 입력 텍스트 필드

shortcut

_accProps 속성은 다음과 같은 방법으로 사용합니다.submitButton._accProps = new Object();submitButton._accProps.name = "확인";submitButton._accProps.shortcut = "CTRL + ALT + O";

또는 다음과 같은 방법으로 사용할 수 있습니다.var accProp:Object = new Object();accProp.name = "확인";accProp.shortcut = "CTRL + ALT + O";submitButton._accProps = accProp;

1.39.2 Accessibility 클래스ActionScript 2.0 의 Accessibility 클래스는 ActionScript 3.0 의 Accessibility 클래스와 거의 동일한 역할을 합니다. Accessibility 클래스는 Flash Player 와 스크린 리더기와의 통신을 관리하는 역할을 합니다.

ActionScript 2.0 의 Accessibility 클래스에서는 다음 2 개의 메소드를 제공합니다.메소드 설명 AS3.0 의 Accessibility 클래스와

대응 관계

isActive() 스크린 리더기와 같은 보조 도구가 현재 Flash Player와 통신이 가능한 상태 또는 통신 중인지의 여부를 나타냅니다. true 값을 반환하면 Flash Player가 보조 도구와 통신중임을 나타냅니다. 이 메소드를 사용하여 사용자가 현재 보조 도구를 사용중인 지의 여부를 확인할 수 있습니다.

Accessibility.active 속성

updateProperties()

변경된 _accProps 속성 값들을 일괄적으로 스크린 리더기와 같은 보조 도구에 통지하여 변경된 내용을 반영할 수 있도록 합니다.

Accessibility.updateProperties() 메소드

Accessibility 클래스는 주로 현재 사용자가 보조 도구를 사용 중인지를 감지하고, 변경된 접근성 정보를 보조 도구에 통지하기 위해 사용합니다.

Accessibility 클래스로 사용자가 보조 도구를 사용 중인지의 여부를 판단하기 위해서는 다음과 같이 사용합니다.// 사용자의 보조 도구 사용 여부를 판단합니다.if (Accessibility.isActive()){// 사용자가 보조 도구를 사용하고 있을 때의 코드를 작성합니다.}else{// 사용자가 보조 도구를 사용하고 있지 않을 때의 코드를 작성합니다.}

여러 개의 객체에 대한 접근성 정보가 변경이 되었을 때 변경된 정보들을 보조 도구로 통지하여 업데이트 할 때에는 다음과 같이 사용합니다.

이 예제에서는 재생 버튼은 재생과 일시 정지 두 가지의 역할을 하는 토글 버튼이 있다고 가정합니다. 재생 상태일 때 버튼을 클릭하면, 재생 상태일 버튼의 접근성 정보의 이름 속성은 “일시 정지”로 변경이 되고, 일시 정지 상태일 때 버튼을 클릭하면 버튼의 접근성 정보의 이름 속성을 “재생”으로 변경합니다. 접근성 정보가 되면 Aceessibility.updateProperties() 메소드를 호출하여 변경된 접근성 정보를 스크린 리더기와 같은 보조 도구로 통지합니다.

307 / 307

6. 참고 자료

var isPlaying:Boolean = true;

playButton._accProps.name = "재생";

playButton.onRelease = function(){isPlaying = !isPlaying;

if (isPlaying){

playButton._accProps.name = "재생";}else{

playButton._accProps.name = "일시 정지";}


1.39.3 hasAccessibility 속성이 속성은 System.capabilities 객체의 속성으로 시스템이 스크린 리더기와 같은 보조 도구 사용이 가능한지에 대한 여부를 판단합니다. 시스템이 보조 도구 사용이 가능하다면 true 를, 사용 불가능하다면 false 를 반환합니다.

Documents

0을 위한 Flash 제… · Web view2012/01/31 · Flash 콘텐츠 접근성 제작 기법 . 한국형 웹 콘텐츠 접근성 지침 2.0(KICS.OT-10.0003/RI, 2010년 12월 31일