[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​

[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​

[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​ from Nts Nuli

[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​

1. 모바일 인앱 실무에 활용한 접근성 해결 방안 2018 제 6회 널리 세미나 NTS 4차 산업혁명과 정보 접근성 모바일 인앱 실무에 활용한 접근성 해결 방안 2018 제 6회 널리 세미나 NTS 4차 산업혁명과 정보 접근성

2. 개요 Overview 사례 Reference 해결방안 Measures 결론 Result Session8. Contents

3. 개요 OverviewSession8. Contents

4. 4차 산업혁명과 정보 접근성 4 [Overview 1/4] 배경 실무에서는 접근성 실태조사, 사용자 편의제공 등 다양한 배경의 접근성을 대응 그 중에서 개발에 미치는 영향을 최소화 하면서 접근성을 포함하는 방법과 접근성 사양을 구현하기 위해서 안정적이고 세부적인 가이드가 필요 NWARS모니터링지침 오류 유형 W3C명세

5. 4차 산업혁명과 정보 접근성 5 [Overview 2/4] 실무 가이드 진행 프로세스 체크리스트 지침 중 우선 순이거나 반복되는 높은 유형을 선정하여 해결을 위한 기술 검수 및 세부 내용을 정리하여 배포

6. 4차 산업혁명과 정보 접근성 6 [Overview 3/4] 환경분석 보이스 오버 톡 백 - 다이렉트 실행 - 로터(rotor) – 빠른 탐색 옵션 - 음성 출력 표시 - iOS VoiceOver - Android TalkBack 기능(▶) 화면 내용을 음성으로 알려주는 접근성 기능

7. 4차 산업혁명과 정보 접근성 7 [Overview 4/4] 환경분석 사용자 환경 다양한 도구를 복합적으로 사용하는 사용자의 다양성 이해 점자 단말기 화면 자막 고대비 모드 안구 추적 기 기

8. 사례 ReferenceSession8. Contents

9. 4차 산업혁명과 정보 접근성 9 [Reference 1/4] 네이버 및 타사 서비스의 사례 소개 콘텐츠와 초점 위치가 다름 콘텐츠와 초점 크기가 불일치 네이버 다음

10. 4차 산업혁명과 정보 접근성 10 [Reference 2/4] 네이버 및 타사 서비스의 사례 소개 선택된 메뉴 “선택됨” 상태 값 없음 구글 선택된 메뉴 “선택됨” 상태 값 없음 야후

11. 4차 산업혁명과 정보 접근성 11 동일 링크 여러 초점 이 동 불필요한 중복 적용 [Reference 3/4] 네이버 및 타사 서비스의 사례 소개 뉴욕타임즈 적절하지 않은 대체 텍스 트 “발음 할 수 없음＂ IBM(▶)

12. 4차 산업혁명과 정보 접근성 12 [Reference 4/4] 네이버 및 타사 서비스의 사례 소개 페이스북 입력 메시지 도움말이 입력 시 음성 지원 안됨 유투브 “선택됨 인기” 선택 메뉴 상태 값 탭 메뉴 순서, 개수 정보 제공

13. 해결방안 MeasuresSession8. Contents

14. 4차 산업혁명과 정보 접근성 14 [Measures 1/16] 대체 텍스트 (텍스트가 아닌 콘텐츠에 대체 텍스트를 제공하는가) - 적절하지 않은 대체 텍스트를 제공하는 것도 오류 - 섬네일(thumbnail)이미지 정보와 대체 텍스트를 동등하게 제공 적절하지 않는 대체 텍스트 “mnate_ad” 적절하지 않은 경 우 동등한 대체 텍스 트 이미지 정보와 다른 대체 텍스트 “다음 초기 광고”

15. 4차 산업혁명과 정보 접근성 15 [Measures 2/16] 대체 텍스트 - 영어를 모르는 사용자를 배려한 한글로 제공 - 영어 콘텐츠는 영어로 제공 사용자 배려한 한글로 제 공 영어 오류 아닌 경우 영어 콘텐츠는 영어로 제공하여도 오류 아님

16. 4차 산업혁명과 정보 접근성 16 [Measures 3/16] 대체 텍스트 기법 Alt Aria-label <img> <area>에 alt 요소로 이미지가 포함한 정보를 대체 텍스트로 제공 role=“img”를 선언한 경우, aria-label을 함께 제공 - Alt, ARIA를 통해 도움말이나 설명을 추가하거나 별도 텍스트가 있는 경유 alt속성은 빈 값으로 제공 빈 값

17. 4차 산업혁명과 정보 접근성 17 [Measures 4/16] 대체 텍스트 기법 Aria-labelledby 사용자에게 추가적인 설명이 필요할 때 유용한 기법 Aria-describedby (▶) DOM에 있는 다른 요소 ID를 지정할 수 있는 관계 속성 관련 정보를 여러 개로 제공 가능 (aria-labelledby="name1 name2") - Alt, ARIA를 통해 도움말이나 설명 텍스트를 추가

18. 4차 산업혁명과 정보 접근성 18 의미(영어) 대체 텍스트 의미(영어) 대체 텍스트 ad 광고 live 실시간 alert 경고 movie 영화 back 뒤로 가기 new 신규 calendar 달력 prev / next 이전 / 다음 delete 삭제 play 재생 etc 기타 search 검색 hot 인기 top 맨 위로, 위로 [Measures 5/16] 영어 대체 텍스트 - 한글 서비스 콘텐츠는 한글로 제공을 권장

19. 4차 산업혁명과 정보 접근성 19 [Measures 6/16] 외래어 대체 텍스트 - 상용화된 외래어로 인한 한글 오류 발생을 대응 의미(외래어) 대체 텍스트 의미(외래어) 대체 텍스트 app 앱 id 아이디 capture 캡쳐 music 뮤직 / 음악 category 카테고리 open 오픈 / 열림, 펼침, 열기 click 클릭 password 패스워드 / 비밀번호 email 이메일 review 리뷰 event 이벤트 toolbar 툴바 home 홈 update 업데이트

20. 4차 산업혁명과 정보 접근성 20 [Measures 7/16] 초점 - 정보를 전달하는 모든 콘텐츠에 초점을 적용 - 하나의 링크 요소에 여러 번 초점이 이동하지 않도록 한다 (불필요한 초점) 초점의 분리형 <a>요소 초점의 일체형 - 동일 링크 불필요한 초점(중 복) - block, br 요소가 초점을 분리 - Inline이 2개 이상일 때 일체화 - before나 after의 content: ‘00a0’; font-size:0; 적용 시 일체화※ 00a0란 non-breaking-space로 빈공백 유니코드

21. 4차 산업혁명과 정보 접근성 21 [Measures 8/16] 초점 - 초점의 표시가 콘텐츠 위치와 크기와 일치 초점과 콘텐츠 크기 불일 치 - 초점 표시와 콘텐츠 크기가 다름 - 터치 기반 디바이스는 최소 9mm 이상 적용 초점과 콘텐츠 크기 일치 iOS는 텍스트, 이미지 기준으로 초점 크기를 갖지만 Android는 크기 관련 CSS값 만큼 갖는다.

22. 4차 산업혁명과 정보 접근성 22 [Measures 9/16] 초점 - 초점이 이동하지 않게 하는 방법 (CSS, WAI-ARIA 사용 : display:none; visibility: hidden; 등) WAI-ARIA 사용한 방법 레이아웃에 영향을 주지 않고, 스크린리더의 초점이 이동하지 않음 aria-hidden=“true” 의미 없는 콘텐츠로 초점 이 적용되지 않음

23. 4차 산업혁명과 정보 접근성 23 [Measures 10/16] 초점 - 초점 표시가 시각적으로 나타나야 한다(초점의 크기, 위치, 시각화) 삭제 버튼 초점이 이동하고 음성 출력은 되지만 초점 표시가 없음 보이지 않는 초점 숨김텍스트를 VIEWPORT 밖으로 위치할 때 초점이 보이지 않게 된다. 시각적 오류를 발생시키는 CSS - text-indent, line-height, position 등 - 성능 최적화 영향 줌 (렌더레이어(Graphic Layer) 크기에 주의) 초점의 시각화

24. 4차 산업혁명과 정보 접근성 24 [Measures 11/16] 초점 - 초점의 논리적 순서 이동 (왼쪽에서 오른쪽으로, 위에서 아래로) 초점의 논리적 순서(▶) - 버튼 선택 후 팝업의 첫 요소로 초점 이동 - Tabindex는 모바일에서 초점 순서에 영향을 주지 않음 - 초점 순서는 Html 코드 순서 선형화 대로 이동 1 2 7 9 10 3 4 5 6 8 11 12 〓

25. 4차 산업혁명과 정보 접근성 25 [Measures 12/16] 보조 기술의 호환성 : 가이드 구성 - 네이버에서 제공하는 UI에 WAI-ARIA 적용 시 동일한 코드 제공을 목적으로 함 - WAI-ARIA 1.1 권장 사용 패턴 기준 (W3C 스펙을 참고)으로 모바일 가이드를 정의 네이버 모바일 앱(웹) 보조 기술의 호환성 가이드 구성 개요 구성 요소와 코드 동영상 보기 - HTML 자체 기능을 우선 함(중복 역할 지양) - 접근성만의 네이밍 제시, ARIA와 연결된 ID에 “wa_” 식의 접두사 적용 - 구성요소를 표로 제시, 필수 유무를 두어 선택 적용하도록 가이드 함 패턴

26. 4차 산업혁명과 정보 접근성 26 필수 유무 Role Property State 필수 role=“checkbox” 필수 aria-checked - 여러 항목 중 한 개 이상 선택할 때 사용하며 용도와 상태 및 유형 정보를 제공 - 선택 정보를 제공하는 경우, 유형 정보와 함께 '선택됨' 등의 상태 정보를 제공 [Measures 13/16] 보조 기술의 호환성 : CheckBox CheckBox (▶) CheckBox 구성요소 클릭 시 선택/해제 동작이 반복되는 토글 형태, 여러 값을 동시에 받을 수 있는 요소

27. 4차 산업혁명과 정보 접근성 27 필수 유무 Role Property State 필수 role=“combobox” aria-haspopup=“ listbox” aria-expanded 선택 aria-owns, aria-controls 선택 aria-autocomplete 필수 role=“listbox” 필수 role=“option” 필수 aria-selected - 사용자가 자동 선택 목록이 있는 컨트롤 임을 알 수 있도록 '콤보상자' 유형 정보와 옵션 '선택됨' 상태 정보 를 제공 - 인라인 텍스트 박스와 리스트 박스 2가지 요소의 조합으로 구성 [Measures 14/16] 보조 기술의 호환성 : ComboBox 인라인 텍스트 박스에 문자를 입력하면 동일한 조건의 리스트 박스 값을 팝업 형태로 제시 ComboBox 구성요소ComboBox(▶)

28. 4차 산업혁명과 정보 접근성 28 필수 유무 Role Property State 필수 role=“menu” 필수 role=“menubar” 필수 role=“presentation” 필수 role=“menuitem” 필수 aria-current 필수 aria-haspopup=“ menu” 필수 aria-expanded - 같은 기능의 집합으로 사용자에게 선택 목록을 제시, 메뉴 유형 정보와 현재위치 상태 정보를 제공 - 메뉴는 aria-selected 상태를 갖지 않으므로 aria-current를 통해 시각적으로 활성화된 상태 정보 제공 [Measures 15/16] 보조 기술의 호환성 : Menu or Menubar 하위 메뉴가 선택 형 메뉴 아이템을 제공하는 경우 menuitemcheckbox또는 menuitemradio를 제공 Menu(▶) Menu or Menubar 구성요소

29. 4차 산업혁명과 정보 접근성 29 [Measures 16/16] 보조 기술의 호환성 : Menu or Menubar Menu or Menubar 구성요소 - 일반적으로 Menu는 세로 형태, menubar는 가로 형태를 지칭

30. 결론 ResultSession8. Contents

31. 4차 산업혁명과 정보 접근성 31 [Result] 업무 효율을 위한 실무 가이드 사용자와 그들의 환 경 디바이스 별 도구 활용 가능한 코드 전맹 사용자, 저시력자, 색맹, 청각, 고령층 등 이미지를 제거하고 글만 읽는 경우 동일한 코드 적용 시 도구 별 다른 결과 브라우저 별 다른 결과 HTML자체 기능, WAI-ARIA, 스크립트 등

32. 4차 산업혁명과 정보 접근성 32 개성 강한 서비스들 수 많은 예제들과 산재된 조금씩 다른 인터렉티브들 [Result]

33. 4차 산업혁명과 정보 접근성 33 WAI-ARIA가 해결? 복잡해진 HTML [Result]

34. 4차 산업혁명과 정보 접근성 34 HTML 표준 및 자체 기능을 우선하며 WAI-ARIA를 활용 개발에 미치는 영향을 최소화 하면서 접근성을 포함하는 방법 브라우저 및 스크린리더를 지원하는 가이드

35. 4차 산업혁명과 정보 접근성 35 대상 범위를 확장하여 개선하고 해결방안을 제시한 가이드를 통해 반영

36. 감사합니다.