PPTX, PDF3,857 views

[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자

제목 : 모바일애플리케이션 접근성 #이것만 알아두자. 발표자 : 네이버 접근성팀 서미연 1. 모바일 애플리케이션 접근성 이것만 알아두자 2. 지금은 스마트폰 시대. 스마트폰 많이 사용하시죠? 3. 스마트폰 보유율 추이. 스마트폰 보율을 추이만 봐도 2010년 부터 계속 증가하고 있습니다. 4. 모바일 사용하실 때 가장 기본적으로 많이 사용하는 신체기관 5. 눈과 관련 있는 지침. 명도대비를 4.5:1 이상으로 적용하면 저시력, 약시 사용자가 잘 사용할 수 있게 됩니다. 6. 저시력 사용자의 스마트폰 사용 자세. 스마트폰을 눈에 아주 가까이 대고 콘텐츠를 파악합니다. 7. 잘못된 사례. 입력전 입력을 유도하는 텍스트의 명도대비가 너무 낮아. 11. 좋은 사례. 입력전 입력을 유도하는 텍스트 명도대비 5.7:1 13. 명도대비. 텍스트 명도대비는 글자와 배경 간의 명도대비를 측정합니다. 17. 명도대비 #텍스트에 윤곽선이 있을 경우. 텍스트&배경 , 텍스트&윤곽선 중 명도대비가 큰 값으로 결정 19. 명도대비 #텍스트에 후광이 있을 경우. 텍스트&배경 , 텍스트&후광 중 명도대비가 큰 값으로 결정 21. 명도대비 #텍스트 또는 배경에 그러데이션이 적용된 경우. 시작점 명도 + 끝점 명도 / 2 = 평균명도 22. 귀와 관련 있는 지침. 음성으로 들을 수 있도록 대체 텍스트를 넣어주면 전맹 사용자가 사용할 수 있어요. 23. 전맹 사용자의 스마트폰 사용 자세 24. 모바일 스크린리더. iOS의 VoiceOver와 안드로이드의 TalkBack 또는 Voice Assistant. 26. 스크린리더 사용 동영상 #아이폰 보이스오버 30. 주로 대체텍스트가 많이 누락되는 부분은 이렇게 이미지 또는 아이콘형태로 제공되는 버튼들에서 볼 수 있습니다. 31. 대체텍스트 넣기 #iOS. 엑스코드 인터페이스 빌더에서 접근성을 설정할수 있는데요. 33. 대체텍스트 넣기 #Android. xml코드 android:contentDescription = "text" / JAVA 코드 void setContentDescription("text") 34. 대체텍스트 넣기 #팝업, 알림 #iOS. UIAccessibilityPostNotification(UIAccessibilityNotification, UIObject); 35. 대체텍스트 넣기 #팝업, 알림 #Android. View.announceForAccessibility("text") 36. 개선 사례. 네이버 뮤직 iOS 앱이 최근 대체텍스트를 대거 추가하였는데요. 40. 뮤직앱 스크린리더 사용 동영상 #아이폰 보이스오버 41. 손과 관련된 지침. 복잡한 누르기 동작을 대체할 대체 수단을 제공해주면 누르기 동작만으로도 접근할수 있어요. 42. 제스처에는 다양한 종류들이 있는데요. 모든사용자가 사용할수 있을까요? 43. Carousel UI 모바일 스크린리더를 만난다면 어떻게 될까요. 44. 모바일 스크린리더 기본동작 45. Carousel UI 모바일 스크린리더를 만난다면 기존 제스처는사용할수 없기때문에 좌우 페이지 이동이 어렵습니다. 46. 개선. 어떻게 개선해야 할까요? 48. 좋은 사례 동영상 49. 좋은 사례 2. 미리 이 페이지가 좌우 이동하는 콘테츠임을 알림. 50. 모바일 스위치 접근성 51. 스위치란 보조기기는 일반적으로 누를수 있는 버튼 하나로 구성되어 있는데요. 미세한 손가락 움직임이 힘든 사용자이니 현란한 제스처를 사용하는 것은 불가능이겠죠. 52. 스위치 제어 사용 동영상 #아이폰 53. 잘못된 사례. 볼륨컨트롤러 애플리케이션 볼륨조절을 드래그 또는 좌우 스와이프제스춰로만 조절가능하도록 설계되어 있어. 54. 잘못된 사례. 개선. 음량 조절이 가능한 버튼을 플러스, 마이너스로 추가했는데요. 이렇게 단순히 누르기 또는 탭을 통해 기능을 대체해서 수행할수 있도록 해주는것이 좋겠지요. 55. 좋은 사례. 지도 애플리케이션 확대 축소 버튼을 통해 사용할 수 있도록 되어 있습니다. 이렇게 멀티드래그랄지 스와이프랄지 복잡한 제스춰를 통해 동작하는 UI에는 그 기능을 단순하게 누르기 또는 탭을 통해 수행할수 있도록 해주어야 합니다. 56. 마치며..

Internet◦

스마트폰 보유율 추이
출처- 미래창조과학부, 한국정보화진흥원 2014년도 정보격차 실태조사 결과
비장애인
장애인
2010 2011 2012 2013 2014
1.6
15.6
8.6
39.6
23.1
61.5
39.9
74.3
51.3
78.3

명도대비를 4.5:1 이상으로
적용하면 저시력, 약시 사용자가
잘 사용할 수 있어요.

저시력 사용자의 스마트폰 사용 자세
출처- (사)한국인터넷전문가협회 블로그"장애인과 UX＂기사

명도대비 #텍스트에 윤곽선이 있을 경우
텍스트&배경 , 텍스트&윤곽선 중 명도대비가 큰 값으로 결정
#CCCCCC
#000000
#CCCCCC
#FFFFFF

13:11.6:1
명도대비 #텍스트에 윤곽선이 있을 경우
텍스트&배경 , 텍스트&윤곽선 중 명도대비가 큰 값으로 결정

명도대비 #텍스트에 후광이 있을 경우
텍스트&배경 , 텍스트&후광 중 명도대비가 큰 값으로 결정
#CCCCCC
#4F4F4F
#CCCCCC
#FFFFFF

명도대비 #텍스트에 후광이 있을 경우
텍스트&배경 , 텍스트&후광 중 명도대비가 큰 값으로 결정
5.1:11.6:1

명도대비 #텍스트 또는 배경에 그러데이션이 적용된 경우
시작점 명도 + 끝점 명도 / 2 = 평균명도
#FFFFFF
#CCCCCC
#000000
#FFFFFF
21:1
1.6:1
11.3:1

음성으로 들을 수 있도록
대체 텍스트를 넣어주면 전맹
사용자가 사용할 수 있어요.

전맹 사용자의 스마트폰 사용 자세
출처- (사)한국인터넷전문가협회 블로그"장애인과 UX＂기사

모바일 스크린리더
VoiceOver
iOS
TalkBack
Android

모바일 스크린리더
iOS
Voice Assistant
Android
(삼성)
VoiceOver

대체텍스트 넣기 #iOS
[{contentType}
setIsAccessibilityElement:YES];
//Accessibility속성 Enabled로 활성화
[{contentType}
setAccessibilityLabel:@"text"];
//Label속성 값 입력
[{contentType}
setAccessibilityHint:@"text"];
//Hint속성 값 입력

대체텍스트 넣기 #Android
android:contentDescription = "text"
void setContentDescription("text")
xmll
JAVAl

대체텍스트 넣기 #iOS #팝업, 알림
UIAccessibilityAnnouncementNotification
UIAccessibilityLayoutChangedNotification
UIAccessibilityScreenChangedNotification
UIAccessibilityPostNotification(UIAccessib
ilityNotification, UIObject);

대체텍스트 넣기 #Android #팝업, 알림
View.announceForAccessibility("text")
JAVAl

복잡한 누르기 동작을 대체할
대체 수단을 제공해주면 누르기
동작만으로도 접근할 수 있어요.

애플리케이션 소개화면 Carousel UI
다음 페이지 이동이전 페이지 이동

모바일 스크린리더 기본동작
다음 콘텐츠 탐색 이전 콘텐츠 탐색포커스 포커스 실행

Carousel UI + 스크린리더 기능
다음 콘텐츠 탐색이전 콘텐츠 탐색

스위치 제어 사용 동영상 #아이폰
https://www.youtube.com/watch?v=mcqv7wwjAcE