자막 또는 수어 | 모바일 접근성 콘텐츠 제작 기법(인식의 용이성(Perceivable))

필요성

소리를 듣지 못하는 사용자
멀티미디어 콘텐츠의 음성 정보(내레이션 등)를 인식할 수 없기 때문에 이와 동등한 대체 콘텐츠(자막, 대본 또는 수화 등)를 함께 제공하지 않으면 멀티미디어 콘텐츠에서 정보를 인식할 수 없습니다.
멀티미디어 콘텐츠의 음성 정보의 문맥과 동등한 수준의 자막, 대본 및 수화를 함께 제공해야 합니다.
영상을 보지 못하는 사용자
멀티미디어 콘텐츠의 영상 정보(텍스트 등)를 인식할 수 없기 때문에 이와 동등한 대체 (콘텐츠 원고 또는 내레이션 등)를 함께 제공하지 않으면 멀티미디어 콘텐츠에서 정보를 인식할 수 없습니다. 그러므로 멀티미디어 콘텐츠의 영상 정보의 문맥과 동등한 수준의 대체 콘텐츠(콘텐츠 원고 또는 내레이션 등)를 함께 제공해야 합니다.
소리를 들을 수 없는 환경
해당 언어를 모국어로 사용하지 않은 비장애인에게도 도움을 줄 수 있으며 자막 및 대본은 동영상 검색 시에도 도움을 줄 수 있습니다.

대상

청각 장애인
음성 콘텐츠를 접근할 수 없는 사용자.
난청 사용자
음성 콘텐츠를 충분히 이해하기 어려운 사용자.
언어 비숙련자
자막을 통해 콘텐츠를 더 쉽게 이해하는 사용자.
고령자
청력 저하로 인해 음성 콘텐츠 접근에 어려움을 겪는 사용자.
다양한 언어를 사용하는 사용자
자막은 여러 언어로 제공될 수 있어 언어 장벽을 극복할 수 있습니다.

체크리스트

자막 관련 항목

대사와 일치하는가: 자막이 음성 대사와 정확하게 일치하는지 확인합니다.
동작, 소리 설명: 대사 외에도 중요한 배경 소리(문 두드리는 소리, 음악 등)나 동작에 대한 설명을 포함하는지 확인합니다.
적절한 동기화: 자막이 화면에 표시되는 시간이 음성 콘텐츠와 일치하는지 확인합니다.
자막이 음성 콘텐츠와 정확하게 일치하는가?
자막에 중요한 배경 소리나 소리 효과가 포함되어 있는가?
자막이 음성과 동기화되어 적절한 타이밍에 표시되는가?
자막의 폰트 크기와 색상 대비가 적절한가?

수화 관련 항목

화면에서 잘 보이는 위치 제공: 수화 영상이 화면에서 가려지지 않고 명확하게 표시되는지 확인합니다.
콘텐츠 전체 제공 여부: 수화가 콘텐츠 전체를 충분히 설명하는지 확인합니다.
수화 영상이 화면에서 명확하게 보이는가?
수화가 음성 콘텐츠와 동기화되어 있는가?
수화가 중요한 정보를 빠뜨리지 않고 제공하는가?

기기별 테스트 방법

iOS

VoiceOver 활성화
설정 > 접근성 > VoiceOver를 활성화하여 자막 및 수화가 올바르게 제공되는지 확인합니다.
자막 및 SDH 설정
설정 > 접근성 > 자막 및 SDH 설정을 통해 자막이 제대로 활성화되는지 테스트합니다.
비디오 재생
비디오 재생 시 자막이 적절하게 표시되고 동기화되는지 확인합니다.
상세 가이드
iPhone 사용 설명서 - VoiceOver

Android

TalkBack 활성화
설정 > 접근성 > TalkBack을 활성화한 후, 콘텐츠에서 자막이 정확하게 동기화되고 있는지 확인합니다.
Accessibility Scanner 사용
Google Play의 'Accessibility Scanner' 앱을 사용하여 자막과 수화가 적절히 제공되는지 자동으로 테스트합니다.
자막 활성화
설정 > 접근성 > 자막 옵션을 사용해 자막이 정상적으로 작동하는지 확인합니다.
상세 가이드
Android 접근성 고객센터 - TalkBack 및 Android

QA 지표

자막 정확성
자막이 음성과 일치하는지 확인하는 비율.
수화 정확성
수화가 음성 콘텐츠와 일치하는지 확인하는 비율.
동기화 정확성
자막과 수화가 음성과 적절하게 동기화되어 있는지 여부.
사용자 피드백
실제 사용자 테스트 후 자막 및 수화 기능에 대한 만족도를 피드백으로 수집.

개발방법

네이티브 (iOS) - 자막 적용

							let videoPlayer = AVPlayer(url: videoURL)
							let captions = AVMediaSelectionGroup()
							videoPlayer.add(captions)

네이티브 (Android) - 자막 파일과 함께 비디오 재생

							videoView.addSubtitleSource(new FileInputStream(subtitleFile), MediaFormat.createSubtitleFormat("text/vtt", Locale.getDefault().getLanguage()));

하이브리드(html)

							<video controls>
								<source src="video.mp4" type="video/mp4">
								<track kind="captions" src="subtitles_en.vtt" srclang="en" label="English">
							</video>

하이브리드(Vue)

							<template>
								<video controls>
									<source src="video.mp4" type="video/mp4" />
									<track kind="captions" src="subtitles_en.vtt" srclang="en" label="English" />
								</video>
							</template>

하이브리드(React)

							function VideoComponent() {
								return (
									<video controls>
										<source src="video.mp4" type="video/mp4" />
										<track kind="captions" src="subtitles_en.vtt" srclang="en" label="English" />
									</video>
								);
							}

점검 기준

멀티미디어 콘텐츠를 동등하게 인식할 수 있도록 자막이나 원고, 수화 등 대체정보를 제공합니다.

자막 점검 기준

자막이 정확하게 음성과 일치하는가?
중요한 배경 소리나 음악 설명이 포함되어 있는가?
자막의 폰트 크기와 색상 대비가 적절한가?

수화 점검 기준

수화가 모든 중요한 음성 정보를 전달하는가?
수화가 명확하게 표시되고 콘텐츠에 방해가 되지 않는가?

오류 유형

음성정보에 대체수단을 제공하지 않는 경우
음성정보 전체가 아닌 일부정보나 요약정보만을 제공하는 경우
음성 정보 없는 동영상에 대체수단을 제공하지 않는 경우

주의사항

파일로 제공되는 영상, 음성 콘텐츠도 평가대상에 포함합니다.
유의미한 음성정보 없이 화면에 텍스트로만 정보를 제공하거나, 영상스케치 등의 동영상의 경우 화면에 제공되는 정보를 화면밖에 시각장애인이 확인할 수 있도록 대체정보를 제공하여야 합니다.(스케치의 경우 대략적인 요약정보 제공 인정)
동영상과 대체 정보를 한 화면에서 함께 볼 수 있도록 구현하는 것이 권장됩니다.

점검 방법

멀티미디어 콘텐츠 등에 음성정보를 대체할 수 있는 수단(자막, 원고, 수화 등)을 제공하고 있는 지, 유의미한 음성정보 없이 화면으로만 정보를 제공하는 경우 화면정보를 인지할 수 있도록 대체정보를 제공하는 지를 점검합니다.

점검사항

동영상 실행 후 Caption 기능이 있는지 확인합니다.
콘텐츠 내 원고, 수화 기능을 제공하는지 확인합니다.

주의사항

개발방법에 따라 연관된 타 UI 객체에 대체텍스트를 적용하고 있는경우가 있다. 이런경우엔 오류항목으로 볼 수 없습니다.
UIAutoMatorViewe를 활용한 대체텍스트 확인은 다른 점검기법과 병행되어 사용하는 것이 바람직합니다.

준수 사례

사례 1) 음성정보에 대체수단(자막)을 제공한 경우

사례 2) 음성정보에 대체수단(수화)를 제공한 경우

사례 3) 문자정보에 대체수단(원고)를 제공한 경우

사례 4) 비디오 관리자의 자막 설정에서 적절한 내용으로 자막을 수정한 경우

유튜브 크리에이터 스튜디오의 '동영상 관리자 메뉴'에서 자막을 수정하거나 삽입하고 싶은 동영상을 선택하고 '자막' 탭을 살펴보면 새 자막을 추가하거나 이미 삽입된 자막을 수정할 수 있습니다.

미준수 사례

사례 1) 이미지 요소가 제공하는 정보와 동일한 정보가 음성으로 출력되지 않는 경우

사례 2) 음성정보 전체가 아닌 일부정보나 요약정보만을 제공하는 경우

접근성 테스트 도구 활용 점검방법

Lighthouse

Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스로 자동화 도구입니다. Lighthouse는 사이트의 성능, 접근성, SEO 등에 대한 전반적인 진단을 해줍니다.
상세 설명 : Lighthouse Overview 공식 문서 참조

참고

Lighthouse 모바일의 경우 네트워크 속도를 최대 4배정도 느리게 측정하기 때문에 모바일 Performance가 비교적 낮게 나옵니다.
Metric 별로 어떤 성능 점수가 나는지 Lighthouse 계산기를 통해서 자세히 확인할 수 있습니다.

카테고리가 측정하는 내용

Performance
웹 페이지의 로딩 속도 등 실제 성능을 측정. 성능의 측정항목은 6가지 Metric으로 정의되며, 각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.
상세 설명 : Lighthouse Performance Audits.
Best practices
Best practices를 따라 개발되었는지 확인
Accessibility
접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정
Progressive Web App (PWA)
웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
SEO
Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정

사용법

Google Chrome에서 웹 페이지를 엽니다.
DevTools (F12)를 열고 ‘Lighthouse’ 탭을 선택합니다. (단축키 맥:Cmd⌘+Option⌥+I / 윈도우:Ctrl+Shift+I)
‘Accessibility’ 항목을 선택하고 우측 상단의 ‘Analyze page load’를 클릭하여 보고서를 생성합니다.

[Lighthouse를 활용한 검사]
Lighthouse는 접근성 점수와 함께 개선이 필요한 부분을 제시합니다.

[Lighthouse를 활용한 검사]

iOS : Accessibility Inspector

iOS 앱 개발도구인 xcode에는 Accessibility Inspector 툴을 통해 접근성을 수동 검사할 수 있습니다.

사용법

Xcode에서 Accessibility Inspector 툴을 실행합니다. (Xcode > Open Developer Tool > Accessibility Inspector)

[출처 : NULI]
테스트할 장치를 선택합니다. 개발 중인 앱을 Simulator로 빌드 하셨다면 Simulator를 선택하여 진단하실 수 있습니다.

[출처 : NULI]
Accessibility Inspector 툴 오른쪽 상단에서 audit 버튼을 선택합니다. Run Audit 버튼을 선택합니다.

[출처 : NULI]
결과 이슈 목록을 선택하거나 눈 버튼을 선택하시면 해당 항목을 보여줍니다. 장치를 보면 노란색으로 표시되고, 물음표 버튼를 선택하면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

[출처 : NULI]
물음표 버튼를 선택하면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

[출처 : NULI]
목록에서 주의 깊게 봐야 할 이슈는 description에 대한 이슈입니다. 대체 텍스트 이슈는 접근성 사용자에게 매우 크리티컬한 이슈이면서 해결 방법이 매우 수월한 이슈입니다.

[출처 : NULI]
Xcode의 Identity Inspector 탭의 Accessibility 패널에 대체 텍스트를 넣어주세요.
대체 텍스트 외에도 명도대비, 작은 터치영역등 다양한 접근성 이슈를 체크해주고 있습니다.

[출처 : NULI]
각 요소별 접근성 항목을 확인할 수 있고, iOS 스크린리더인 VoiceOver 음성으로 들어볼 수 있습니다.
1. 스피커
  현재 초점이 위치한 요소의 정보를 VoiceOver 음성으로 들려줍니다.
2. 이전 요소 탐색
  현재 초점이 위치한 곳에서 이전 요소의 정보를 VoiceOver 음성으로 들려줍니다.
3. 자동 탐색
  현재 초점이 위치한 곳에서 모든 요소를 자동으로 탐색하며 요소의 정보를 VoiceOver 음성으로 들려줍니다.
4. 다음 요소 탐색
  현재 초점이 위치한 곳에서 다음 요소의 정보를 VoiceOver 음성으로 들려줍니다.
5. 직접 탐색
  마우스로 요소를 직접 선택하여 탐색합니다.
6. 현재 초점이 위치한 요소의 접근성 항목을 나타냅니다.
  항목은 Label(대체 텍스트), Value(값), Traits(유형 정보), Identifier(식별자), Hint(힌트 정보), User Input Labels(사용자 입력 텍스트 정보)입니다.
[출처 : NULI]

Android : Lint

Android 앱 개발도구인 Android Studio 의 Lint를 통해 개발과정에서 접근성을 수동 검사할 수 있습니다.

사용법

Analyze > Inspect Code를 실행합니다.

[출처 : NULI]
Android Studio 4.1.1. 버전을 사용합니다. Android Studio Electric Eel 2022.1.1 Patch 2버전이면 Code 메뉴에 inspect Code가 보입니다.

[출처 : NULI]
Inspection profile에서 더보기 버튼을 실행합니다.

[출처 : NULI]
Inspections 창에서 Lint > Accessibility 항목 중 “Image without contentDescription” 항목과 “Missing accessibility label”을 체크합니다.
Android에서 Accessibility 항목 중 주의 깊게 봐야 할 이슈는 바로 이미지 대체 텍스트와 입력 서식 라벨에 대한 이슈입니다.
Severity를 Error로 체크해 주세요. Error 이슈를 해결하기 전까지는 빌드 성공을 할 수 없습니다.

[출처 : NULI]
진단 범위도 설정해야 합니다. 모든 범위 [In All Sccopes]

[출처 : NULI]
OK를 누르고 코드를 확인합니다. contentDescription 이 없는 ImageView 또는 ImageButton에 빨간색으로 표시된 것을 확인할 수가 있습니다. labelFor 또는 hint가 없는 EditText 역시 빨간색으로 표시된 것을 볼 수 있습니다.

[출처 : NULI]
이슈 해결 : ImageView 클래스에 contentDescription을 코드에서 추가합니다. 빨간색으로 표시되었던 코드가 노란색 코드로 변경됩니다.

[출처 : NULI]
이슈 해결 : EditText 역시 hint 코드를 추가합니다. 빨간색으로 표시되었던 코드가 노란색 코드로 변경됩니다.

[출처 : NULI]

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
접근성 체크리스트 작성
접근성 자동 및 수동 검사(스크린리더) 진행
접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
접근성 사용자 테스트
접근성 정기적인 모니터링

필요성

대상

체크리스트

자막 관련 항목

수화 관련 항목

기기별 테스트 방법

iOS

Android

QA 지표

개발방법

네이티브 (iOS) - 자막 적용

네이티브 (Android) - 자막 파일과 함께 비디오 재생

하이브리드(html)

하이브리드(Vue)

하이브리드(React)

점검 기준

자막 점검 기준

수화 점검 기준

오류 유형

주의사항

점검 방법

점검사항

주의사항

준수 사례

사례 1) 음성정보에 대체수단(자막)을 제공한 경우

사례 2) 음성정보에 대체수단(수화)를 제공한 경우

사례 3) 문자정보에 대체수단(원고)를 제공한 경우

사례 4) 비디오 관리자의 자막 설정에서 적절한 내용으로 자막을 수정한 경우

미준수 사례

사례 1) 이미지 요소가 제공하는 정보와 동일한 정보가 음성으로 출력되지 않는 경우

사례 2) 음성정보 전체가 아닌 일부정보나 요약정보만을 제공하는 경우

관련 영상

접근성 테스트 도구 활용 점검방법 자세히 보기

Lighthouse

참고

카테고리가 측정하는 내용

사용법

WAVE

사용법

Accessibility Scanner (Android)

사용법

접근성 트리 뷰(Accessibility Tree)

사용법

VSCode 확장 접근성 검사(axe Accessibility Linter)

eslint-plugin-jsx-a11y(ReactJS + ESLint)

사용법

iOS : Accessibility Inspector

사용법

Android : Lint

사용법

결론

접근성 작업 시 점검 필수사항

접근성 테스트 도구 활용 점검방법