실무에서는 실태조사, 편의제공 등 다양한 현황에 맞춰 접근성에 대응해야 합니다. 접근성을 포함하는 방법과 그 사양을 구현하기 위한 세부적인 가이드가 필요하게 되었습니다. 수행은 접근성팀과 실무자들로 구성된 TF팀이 진행하였습니다. 지침과 체크리스트를 확인하고 우선 순, 반복되는 유형을 선정하여 오류사항 등을 목록화 합니다. 그에 맞는 서비스 사례를 조사하고 W3C명세나, 지침 등의 내용과 대조하여 확인합니다. 테스트를 통해 코드화를 진행하여 샘플 작업을 합니다. 어떤 기능들을 어떻게 사용하는지 IOS는 보이스오버, 안드로이드는 톡백이라는 프로그램을 사용합니다. 이중 IOS는 빠른 탐색을 할 수 있는 로터 기능을 제공합니다. 안드로이드는 음성 안내를 출력 표시해주는 기능을 제공하고 있습니다. 점자 단말기나 화면 자막 등 다양한 도구를 복합적으로 사용하고 있는 것을 알 수 있었습니다. 좌측은 실시간 급상승 화살표의 초점이 콘텐츠 크기와 일치하지 않는 볼 수 있습니다. 우측은 “러시아2018”의 초점의 위치가 다르고 크기도 다릅니다. 구글과 야후 검색에서는 선택된 “상태 값”을 제공하지 않고 있습니다. 선택된 것인지 현재위치인지 구분이 어렵습니다. 좌측은 동일 링크에 초점이 여러 번 이동하여 불필요하게 중복 적용이 된 경우입니다. 우측은 적절하지 않은 대체 텍스트를 제공하고 있습니다. 유투브는 선택된 상태값과 전체 탭의 개수 정보 3개중에 2번째라고 제공하고 있어, 탭이라는 유형과 상태정보를 알 수 있는 경우입니다. 대체 텍스트를 제공하지 않아도 오류이지만, 적절하지 않은 텍스트를 제공하거나 동등한 정보를 제공하지 않아도 오류입니다. 두 배너 모두 적절하지 않으며, 이미지와 동일하지 않는 텍스트를 제공하고 있습니다. 다음은 영어 대체 텍스트입니다. 한글 서비스 경우, 영어를 모르는 사용자들을 배려해서 한글로 제공해주는 것이 좋겠습니다. ‘Delete버튼’이 아니라 ‘삭제버튼’으로 제공합니다. 그러나 영어 콘텐츠 경우는 영어로 제공해도 오류는 아닙니다. 대체 텍스트는 alt, aria를 통해 도움말이나 설명을 추가할 수 있습니다. 좌측 첫번째 조석 예시는 이미지와 텍스트가 동등한 정보를 제공해주고 있지요. 좌측 두번째 별도 예시 경우 이렇게 별도의 텍스트가 있다면 alt는 빈 값으로 제공해도 오류가 아닙니다. 우측은 Aria-label을 통해서도 제공하는 방법입니다. 예시 이미지에 role을 선언하고 Aria-label에 텍스트를 제공한 경우 인데요. 단, 저희가 테스트할 때 클릭 커블한 요소에서만 음성이 지원되는 것을 확인 할 수 있었습니다. Aria-labelledby(아리아레이블드바이)는 DOM에 있는 다른 요소 ID를 지정해서 관련정보를 제공할 수 있는 관계 속성입니다. back보다는 뒤로가기, hot보다는 인기, new보다는 신규로 하는 것이 좋겠습니다. App은 앱으로, id는 아이디로, open은 오픈, 열림으로 password는 패스워드, 비밀번호로 제공해주면 좋겠습니다. 하나의 링크 요소에 여러 번 초점이 이동하는 것은 중복 적용으로 오류이기 때문에 블럭된 형태로 묶어서 제공해주는 것이 좋습니다. Block, br요소는 초점을 분리합니다. 일체화를 위해서는 인라인 요소가 2개 이상일 때나, 가상요소(before, after) content에 non-breaking-space(논브레이킹스페이스=\00a0) 유니코드를 적용하면 블럭 형태가 됩니다. 좌측을 보시면 화살 모양에 초점이 매우 작게 잡힌 것을 볼 수 있습니다. 이때 터치 기반 디바이스는 최소 9mm이상이 되로독 적용해야 합니다. IOS는 텍스트, 이미지 기준으로 초점이 크기를 갖지만, 안드로이드는 크기 관련 CSS값으로 적용해주면 됩니다. 초점은 모든 콘텐츠에 적용해야 하지만 “의미가 없는 콘텐츠” 경우는 초점이 이동하지 않도록 하는 것이 좋습니다. 레이아웃에 영향을 주지 않고 Aria-hidden=“true” 로 초점이 이동하지 않도록 한 경우 입니다. 이 외 Display:none;이나 visibility: hidden; 백그라운드를 적용하는 방법 등도 있습니다. 음성으로는 들리는데, 초점이 보이지 않는 경우가 있습니다. 숨김텍스트를 Viewport(뷰포트) 밖으로 위치시켜서 초점이 보이지 않는 것인데요. text-indent, line-height, position 등의 값을 적용한 경우며, 이는 성능 최적화에도 영향을 주기 때문에 지양하는 것이 좋습니다 초점이 순서적으로 이동하는 것을 확인하였습니다. 모바일은 tabindex가 초점 순서에 영향을 주지 않기 때문에 되도록 HTML 코드 순서에 맞게 구성하는 것이 좋겠습니다. HTML 자체 기능을 우선으로 하며, 개발과의 혼선을 주지 않기 위해 ARIA와 연결된 ID에 "00_" 형식의 접두사를 적용하는 ARIA만의 네이밍을 제시합니다. ARIA의 (Role), 속성(Property), 상태(State)를 구성요소 표로 제시하여 필수유무에 따라 선택 적용할 수 있도록 하였습니다. 체크박스는 여러 항목 중 한 개 이상 선택할 때 사용하며 용도, 상태값, 유형 정보를 제공합니다. 구성요소는 role=“checkbox” 상태는 aria-checked로 선택됨을 확인하도록 합니다. 콤보박스는 인라인 텍스트 박스와 리스트 박스 2가지 요소의 조합으로 구성합니다. 자동 선택 목록이 있는 리스트임을 알 수 있도록 유형정보와 “옵션”의 선택된 상태 정보를 제공합니다. 구성요소는 role=“combobox”이며, 하위 콘텐츠가 있을 때 aria-haspopup은 “listbox”라는 명시적인 값을 주어야 합니다. aria-owns와 aria-autocomplete는 선택사항입니다. 리스트에 role=“listbox’를 aria-selected로 선택된 상태값을 제공합니다.

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. 감사합니다.