인식의 용이성(Perceivable)
모바일 접근성 제작 기법 요약 설명
- 접근성 콘텐츠 제작 기법은 모든 사용자, 특히 장애가 있는 사용자가 웹과 모바일 콘텐츠에 접근하고 사용할 수 있도록 보장하는 방법이며, 웹 접근성 지침(WCAG: Web Content Accessibility Guidelines)과 모바일 접근성 표준을 따르는 것이 중요합니다.
- 모바일 앱 접근성 콘텐츠 제작 기법이란, 사용자가 장애를 갖고 있거나 특정 기능에 제약이 있어도 모바일 앱을 원활하게 이용할 수 있도록 지원하는 방법을 말합니다. 접근성을 고려한 콘텐츠 제작은 다양한 사용자들의 요구를 반영해 앱의 전반적인 사용성을 크게 향상시킵니다.
요약 설명
- 관련 지침
- 영상이나 음성 콘텐츠 내 제공되는 모든 음성정보는 동등한 내용의 자막, 원고, 수화 중 적어도 하나 이상을 제공해야 한다.
- 영상이나 음성 콘텐츠에서 화면에 문자정보가 의미를 가지고 있는 경우 이를 설명하는 별도의 음성 콘텐츠나 원고를 제공해야 한다.
- 자막, 원고 또는 수화는 재생되고 있는 영상이나 음성 콘텐츠와 동기화하여 제공한다. 단, 실시간으로 제공되는 영상이나 음성 콘텐츠의 경우는 실시간 자막 또는 수화로 제공할 수 있다.
- 음성이나 문자정보 없이 제공되는 영상이나 음성 콘텐츠는 이를 설명하는 화면해설을 제공하는 것이 바람직하다.
자막과 수화는 청각 장애인을 포함한 다양한 사용자들이 동영상, 강의, 프레젠테이션과 같은 멀티미디어 콘텐츠의 모든 정보를 얻을 수 있도록 하는 필수적인 접근성 요소입니다.
자막은 청각 장애인에게 음성 정보를 텍스트로 전달하고, 수화는 청각 장애인에게 시각적 의사소통 수단을 제공합니다.WCAG 2.2 Quick Reference - Non-text Content
W3C - 자막 및 수화 관련 지침
Microsoft Support - 비디오에 대한 선택 자막 만들기
WebVTT란?
멀티미디어 콘텐츠의 음성 정보(내레이션 등)를 인식할 수 없기 때문에
이와 동등한 대체 콘텐츠(자막, 대본 또는 수화 등)를 함께 제공하지 않으면
멀티미디어 콘텐츠에서 정보를 인식할 수 없습니다.
멀티미디어 콘텐츠의 음성 정보의 문맥과 동등한 수준의 자막, 대본 및 수화를 함께 제공해야 합니다.
멀티미디어 콘텐츠의 영상 정보(텍스트 등)를 인식할 수 없기 때문에 이와 동등한 대체 (콘텐츠 원고 또는 내레이션 등)를 함께 제공하지 않으면 멀티미디어 콘텐츠에서 정보를 인식할 수 없습니다. 그러므로 멀티미디어 콘텐츠의 영상 정보의 문맥과 동등한 수준의 대체 콘텐츠(콘텐츠 원고 또는 내레이션 등)를 함께 제공해야 합니다.
해당 언어를 모국어로 사용하지 않은 비장애인에게도 도움을 줄 수 있으며 자막 및 대본은 동영상 검색 시에도 도움을 줄 수 있습니다.
음성 콘텐츠를 접근할 수 없는 사용자.
음성 콘텐츠를 충분히 이해하기 어려운 사용자.
자막을 통해 콘텐츠를 더 쉽게 이해하는 사용자.
청력 저하로 인해 음성 콘텐츠 접근에 어려움을 겪는 사용자.
자막은 여러 언어로 제공될 수 있어 언어 장벽을 극복할 수 있습니다.
설정 > 접근성 > VoiceOver를 활성화하여 자막 및 수화가 올바르게 제공되는지 확인합니다.
설정 > 접근성 > 자막 및 SDH 설정을 통해 자막이 제대로 활성화되는지 테스트합니다.
비디오 재생 시 자막이 적절하게 표시되고 동기화되는지 확인합니다.
설정 > 접근성 > TalkBack을 활성화한 후, 콘텐츠에서 자막이 정확하게 동기화되고 있는지 확인합니다.
Google Play의 'Accessibility Scanner' 앱을 사용하여 자막과 수화가 적절히 제공되는지 자동으로 테스트합니다.
설정 > 접근성 > 자막 옵션을 사용해 자막이 정상적으로 작동하는지 확인합니다.
자막이 음성과 일치하는지 확인하는 비율.
수화가 음성 콘텐츠와 일치하는지 확인하는 비율.
자막과 수화가 음성과 적절하게 동기화되어 있는지 여부.
실제 사용자 테스트 후 자막 및 수화 기능에 대한 만족도를 피드백으로 수집.
멀티미디어 콘텐츠를 동등하게 인식할 수 있도록 자막이나 원고, 수화 등 대체정보를 제공합니다.
멀티미디어 콘텐츠 등에 음성정보를 대체할 수 있는 수단(자막, 원고, 수화 등)을 제공하고 있는 지, 유의미한 음성정보 없이 화면으로만 정보를 제공하는 경우 화면정보를 인지할 수 있도록 대체정보를 제공하는 지를 점검합니다.
유튜브 크리에이터 스튜디오의 '동영상 관리자 메뉴'에서 자막을 수정하거나 삽입하고 싶은 동영상을 선택하고 '자막' 탭을 살펴보면 새 자막을 추가하거나 이미 삽입된 자막을 수정할 수 있습니다.
요약 설명웹 및 모바일 애플리케이션의 접근성을 평가하고 개선하기 위한 다양한 도구와 방법을 소개합니다.
Lighthouse와 WAVE와 같은 웹 접근성 분석 도구를 사용하면 웹 페이지의 접근성을 점검할 수 있고, Android와 iOS에서 활용되는 접근성 도구를 통해 앱의 접근성을 테스트하고 개선할 수 있습니다.
여러 접근성 테스트 도구를 활용하고 웹 및 앱을 지속적으로 개선함으로써, 장애인을 포함한 모든 사용자에게 보다 편리한 환경을 제공할 수 있습니다.
Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스로 자동화 도구입니다.
Lighthouse는 사이트의 성능, 접근성, SEO 등에 대한 전반적인 진단을 해줍니다.
상세 설명 :
Lighthouse Overview 공식 문서 참조
웹 페이지의 로딩 속도 등 실제 성능을 측정. 성능의 측정항목은 6가지 Metric으로 정의되며,
각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.
상세 설명 :
Lighthouse Performance Audits.
Best practices를 따라 개발되었는지 확인
접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정
웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정
WAVE는 WebAIM에서 만든 확장 프로그램으로 현재 화면의 각 요소가 접근성을 준수하는지 평가합니다. 각 요소가 위반한 내용에 대한 이유와 해결 방법을 제시하여 접근성을 준수하는 개발을 쉽게 할 수 있도록 돕습니다.
Accessibility Scanner는 Android 기기에서 접근성 문제를 탐지하는 Google Play의 앱입니다.
스크린 리더와 같은 보조 기술은 크로미움의 접근성 API를 사용해 웹콘텐츠와 상호 작용합니다.
접근성 API의 기본 모델은 접근성 트리입니다. 접근성 객체의 트리를 통해 보조 기술은 각 속성과 실제 속성값을 탐색하고 필요한 작업을 수행할 수 있습니다.
웹 개발자는 주로 HTML에서 ARIA 속성과 같은 DOM 속성값을 통해 접근성 트리를 만들고 이를 다룹니다.
크롬 개발자 도구에서는 개발자에게 콘텐츠가 보조 기술에 어떤 식으로 전달되는지 이해할 수 있게 접근성 창을 제공하고 있습니다.
DOM 트리 뷰어에서 노드를 선택하면 해당하는 접근성 노드의 속성 정보가 상위 노드, 직계 자식 노드와 함께 창에 표시됩니다.
VSCode 사용 시 별도 확장 설치 후 소스 코드에서 잘못 작성된 부분을 사전에 감지하여 수정할 수 있습니다.
접근성 오류 부분이 있는지 분석해 주는 플러그인이며 서비스 개발 환경이 React라면
실시간으로 JSX 요소에 대한 접근성 규칙을 확인하고 준수할 수 있도록 돕는 패키지를 설치해 개발할 수 있습니다.
기본적으로 추천되는 규칙 외에 예외로 사용하고 싶은 부분이 있다면 같이 서비스를 개발하는 개발자들과 협의하면서
lint 규칙을 만들어가다 보면 접근성을 준수하는 서비스 개발에 도움이 될 것입니다.
상세 설명 :
jsx-eslint/eslint-plugin-jsx-a11y
iOS 앱 개발도구인 xcode에는 Accessibility Inspector 툴을 통해 접근성을 수동 검사할 수 있습니다.
현재 초점이 위치한 요소의 정보를 VoiceOver 음성으로 들려줍니다.
현재 초점이 위치한 곳에서 이전 요소의 정보를 VoiceOver 음성으로 들려줍니다.
현재 초점이 위치한 곳에서 모든 요소를 자동으로 탐색하며 요소의 정보를 VoiceOver 음성으로 들려줍니다.
현재 초점이 위치한 곳에서 다음 요소의 정보를 VoiceOver 음성으로 들려줍니다.
마우스로 요소를 직접 선택하여 탐색합니다.
항목은 Label(대체 텍스트), Value(값), Traits(유형 정보), Identifier(식별자), Hint(힌트 정보), User Input Labels(사용자 입력 텍스트 정보)입니다.
Android 앱 개발도구인 Android Studio 의 Lint를 통해 개발과정에서 접근성을 수동 검사할 수 있습니다.
접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다.
모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다.
무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.