접근성 있는 리치 인터넷 애플리케이션 제작기법

Presentation on theme: "접근성 있는 리치 인터넷 애플리케이션 제작기법"— Presentation transcript:

1 접근성 있는 리치 인터넷 애플리케이션 제작기법
접근성 있는 리치 인터넷 애플리케이션 제작기법 충북대학교 김석일 mobiz.lab

2 목차 1 RIA(리치 인터넷 애플리케이션) 2 RIA의 접근성 체크리스트 3 콘텐츠 구현 예 4 RIA의 응용방법 요약 5
Q & A

3 RIA(리치 인터넷 애플리케이션) RIA란?
전통적인 데스크톱 애플리케이션의 기능과 특징을 구현한 웹 애플리케이션 (Wikipedia) 웹 콘텐츠와 S/W의 중간형태? 웹을 통해 제공되는 콘텐츠를 다루는 S/W? 웹 프로토콜(http)을 통하여 제공되는 콘텐츠 & user agent S/W?

4 RIA(리치 인터넷 애플리케이션) 관련 지침
인터넷 웹 콘텐츠 접근성 지침(Internet Web Contents Accessibility Guideline) 화면에 Rendering할 콘텐츠를 제작하는 방법에 관한 지침 소프트웨어 접근성 지침 Section 508 § 특별한 기능을 수행하는 S/W에 관한 접근성 지침 WAI-ARIA(Accessible RIA) Suits WAI-ARIA 1.0 Tech. Spec. WD ( ) WAI-ARIA Best Practices WD ( ) WAI-ARIA 1.0 User Agent Implementation Guide

5 RIA(리치 인터넷 애플리케이션) 보조기술이 서비스하지 못하는 사항 고려사항 웹 콘텐츠 웹 애플리케이션 Desktop S/W
웹 콘텐츠/애플리케이션 개발 시 보조기술이 제공하지 못하는 기능 동일한 기능/콘텐츠에 대하여 (동일한 부류의) 보조기술 별로 반응이 다른 경우

6 RIA 접근성 체크리스트 대체 텍스트  검사항목 JS FS Fl 국가 표준
(1) ‘텍스트가 아닌 콘텐츠’에 대해서는 적절한 대체 텍스트를 제공하고 있는가?  1.1 (2) 동적으로 교체된 이미지는 이미지에 알맞게 대체 텍스트도 교체하고 있는가? ※ JavaScript는 콘텐츠 표현 수단이 아님

7 RIA 접근성 체크리스트 자막  검사항목 JS FS Fl 국가 표준
(3) 멀티미디어 콘텐츠는 동기화된 자막을 제공하고 있는가?  1.2

8 RIA 접근성 체크리스트 색상  검사항목 JS FS Fl 국가 표준
(4) 색상 이외에도 명암이나 패턴으로 콘텐츠 구분이 가능한가?  1.3 (5) 흰 바탕에 밝은 회색글자처럼 판독이 어려운 색조합을 피하고, 흰 바탕에 검정 글자처럼 대비 차이가 큰 색조합을 사용하고 있는가? (6) 저시력자나 다양한 환경의 사용자도 텍스트를 쉽게 읽을 수 있도록 적절한 크기로 텍스트를 제공하고 있는가?

9 RIA 접근성 체크리스트 깜빡거리는 객체  검사항목 JS FS Fl 국가 표준
(7) 깜빡이는 콘텐츠가 있을 경우 사전 경고를 제공하고 있는가?  2.3

10 RIA 접근성 체크리스트 키보드  검사항목 JS FS Fl 국가 표준
(8) 키보드만으로 콘텐츠가 제공하는 모든 기능에 대한 제어가 가능한가?  2.4 (9) 초점이 주어지는 것만으로 상황이 바뀌지 않는가? (10) 하위 메뉴를 제공하는 주 메뉴의 경우, 키보드만으로도 하위 메뉴를 이용할 수 있는가?

11 RIA 접근성 체크리스트 반응시간/애니메이션  검사항목 JS FS Fl 국가 표준
(11) 열리지 않는 팝업창을 ‘새 창열기’로 알려주지 않는가?  2.6 (12) 사용자의 입력 없이 창의 크기를 변경하거나 이동시키지 않는가? (13) 사용자의 입력 없이 자동으로 발생하는 팝업창을 사용하는 경우는 없는가? (14) 사용자의 입력에 의해서 발생하는 팝업창은 미리 팝업창임을 알리고 있는가? (15) 무비의 움직임이 웹 페이지의 갱신을 유발하지 않는 가?

12 RIA 접근성 체크리스트 오디오/비디오 컨트롤  검사항목 JS FS Fl 국가 표준
(16) 키보드만으로 비디오 또는 오디오 재생 컨트롤을 사용할 수 있는 가?  2.3 (17) 배경음악의 크기를 사용자가 조절할 수 있는가?

13 RIA 접근성 체크리스트 논리적 구조  검사항목 JS FS Fl 국가 표준
(18) 키보드로 폼 컨트롤, 링크, 객체 사이를 이동할 때 논리적 이동 순서가 적절한가?  3.2 (19) 복잡한 RIA는 사용법, 구도, 레이아웃에 대한 정보를 충분히 제공하고 있는가?

14 RIA 접근성 체크리스트 신기술의 사용  검사항목 JS FS Fl 국가 표준
4.1 (21) 대체 페이지(콘텐츠)는 간단명료하면서 원본과 동일한 기능을 수행하고 있는가? (22) Flash/Flex에서 불필요한 콘텐츠는 초점이 주어지지 않도록 하였는가? (23) 플러그인은 사용자가 설치하여 사용할 수 있는 가? 플러그인의 설치가 불가능하다면 설치방법을 제시하고 있는가? (24) JavaScript를 지원하지 않더라도 온라인 summit 기능은 정상적으로 동작하는가? (25) JavaScript코드는 표준을 준수하고 있는가?

15 RIA의 접근성 체크리스트 읽는 순서의 조절

16 RIA의 접근성 체크리스트 읽는 순서 <Tabindex에 따른 초점 이동 변화>

17 콘텐츠 구현 예 가로 1단 메뉴 Tab Shift+Tab JavaScript Flex Flash SRP O DV X J4W

18 콘텐츠 구현 예 가로 2단 메뉴 가로 2단 메뉴 JavaScript Flex Flash SRP X
Tab Shift+Tab JavaScript Flex Flash SRP X ※역방향 이동시 초점 이동의 오류 - O DV ※초점이 주어진 요소를 읽지 못함 J4W

19 콘텐츠 구현 예 드롭다운 메뉴 Tab Shift+Tab JavaScript Flex Flash SRP X
※마지막 하위메뉴에서 메뉴를 빠져나가지 못함 - DV O J4W

20 콘텐츠 구현 예 가로탭 메뉴(Enter키의 조합) Tab Enter Shift+Tab JavaScript Flex Flash
SRP X ※역방향 이동시, 탭이 아닌 하위 메뉴를 역순으로 내비게이션 함 - O DV ※초점이 주어지는 요소를 읽어주지 않음. 주 메뉴에서 Enter 키를 누르면 하위 메뉴가 아닌 연결된 링크로 이동함 J4W Shift+Tab

21 콘텐츠 구현 예 가로탭 메뉴(롤오버 기능의 조합) Tab JavaScript Flex Flash SRP x
※초점이 주어지는 부분이 화면에 보인 초점의 위치를 벗어남 - DV O J4W

22 콘텐츠 구현 예 로그인 기능 JavaScript Flex Flash SRP O - DV X J4W

23 콘텐츠 구현 예 우편번호 검색 버튼을 회원가입 기능 JavaScript Flex Flash SRP O - DV X J4W

24 콘텐츠 구현 예 게시판 기능 JavaScript Flex Flash SRP O X ※초점이 주어지는 요소를 읽어주지 않음 -
DV ※초점이 주어지는 요소를 읽어주지 않음. 콤보박스 내 항목간 이동이 불가능함 J4W

25 콘텐츠 구현 예 롤링 배너 Tab Shift+Tab JavaScript Flex Flash SRP O DV X J4W

26 콘텐츠 구현 예 롤링 배너

27 콘텐츠 구현 예 스크롤 배너 Tab Shift+Tab JavaScript Flex Flash SRP O - DV J4W

28 콘텐츠 구현 예 버튼 스크롤 배너 Shift+Tab Tab JavaScript Flex Flash SRP - O DV J4W

29 콘텐츠 구현 예 차트 JavaScript Flex Flash SRP - O DV X ※초점이 주어지는 요소를 읽어주지 않음
J4W

30 콘텐츠 구현 예 콘텐츠의 축소/확대 JavaScript Flex Flash SRP - O DV J4W
※초점이 주어지는 요소를 읽어주지 않음 J4W

31 RIA의 응용방법 요약 현황 추가적인 사항은 웹 접근성 포털을 참고요망 Flex는 화면 낭독 프로그램의 지원이 미흡
JavaScript, Flash는 부분적으로 사용할 수 있음 JavaScript, Flash 접근성 제공 방법은 제작기법 참고요망 추가적인 사항은 웹 접근성 포털을 참고요망

32 Q & A

33 Thank You !