모바일 앱 접근성 견고성 - by. UXKM
- A11Y
- 접근성 체크리스트
- 모바일 앱 접근성 견고성
요약 설명
모바일 애플리케이션 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로 모바일 전화기,
태블릿기기 등 모바일 기기에서 실행되는 모든 애플리케이션 및 콘텐츠를
WCAG 2.0(Web Content Accessibility Guidelines 2.0)에서 제시하고 있는 접근성 설계의 4가지 원칙 기준으로,
모바일 애플리케이션 콘텐츠의 설계 및 개발을 위한 지침을 제시하고 있습니다.
사용자 인터페이스 컴포넌트 [강화]
요약 설명
사용자 인터페이스 컴포넌트는 보조기술을 이용하여 사용할 수 있도록 해야 합니다.
보조기술은 시각, 청각, 신체적 장애가 있는 사용자들이 컴퓨터와 모바일 기기를 사용할 수 있도록 도와주는 장치나 소프트웨어입니다.
UI 컴포넌트가 이러한 보조기술과 호환되도록 설계되면, 모든 사용자가 앱을 접근 가능하게 이용할 수 있습니다.
이 호환성을 보장하기 위해, UI 컴포넌트에는 적절한 접근성 속성이 적용되어야 합니다.
WCAG 2.2 Guidelines :
2.1.1 Keyboard
WCAG 2.2 Guidelines :
4.1.2 Name, Role, Value
필요성
-
접근성 보장
시각, 청각, 신체적 장애를 가진 사용자들이 보조기술을 통해 앱을 원활하게 사용할 수 있도록 보장해야 합니다.
-
법적 요구사항 준수
많은 국가에서는 웹 및 모바일 앱의 접근성을 보장하는 법적 요구사항이 있으며, 이를 준수하면 법적 문제를 피할 수 있습니다.
-
포용적 사용자 경험 제공
보조기술 사용자가 비장애인과 동일하게 앱의 모든 기능을 활용할 수 있어야 합니다.
제공 방법
-
적절한 접근성 속성 사용
UI 컴포넌트에는 ARIA 속성, role 속성, label 등을 사용하여 보조기술이 각 요소를 올바르게 인식하고 접근할 수 있도록 해야 합니다.
-
포커스 관리
모든 인터랙티브 요소는 포커스를 받을 수 있어야 하며,
포커스는 논리적인 순서로 이동하도록 설정하여 사용자가 키보드나 보조기술을 통해 앱을 원활하게 탐색할 수 있도록 해야 합니다.
-
텍스트 대체 제공
이미지, 버튼, 링크 등의 비텍스트 요소에 대해 스크린 리더가 읽을 수 있는 텍스트 대체(예: alt 텍스트, aria-label 등)를 제공하여 접근성을 높여야 합니다.
-
동작 피드백 제공
사용자가 UI 컴포넌트와 상호작용할 때, 시각적 피드백과 함께 보조기술을 통한 피드백도 제공하여 현재 상태를 명확하게 전달해야 합니다.
-
보조기술과의 테스트
앱이 주요 보조기술(스크린 리더, 음성 인식 소프트웨어 등)과 호환되는지 정기적으로 테스트하고, 발견된 문제를 신속하게 수정해야 합니다.
예시
네이티브 앱 예시 (Android)
보조기술을 위한 접근성 속성 설정
하이브리드 앱 예시 (HTML/JavaScript)
ARIA 속성을 사용하여 보조기술 호환성 보장
검수 방법
- 스크린 리더(예: Android의 TalkBack, iOS의 VoiceOver)나 음성 인식 소프트웨어를 사용하여 앱을 테스트하고, 모든 UI 컴포넌트가 올바르게 인식되고 작동하는지 확인하였는가?
- 키보드나 보조기술을 통해 포커스를 이동시키며, 모든 인터랙티브 요소가 논리적 순서로 탐색되는지 확인하였는가?
- Google Accessibility Scanner, WAVE 등의 도구를 사용하여 UI 컴포넌트의 접근성 문제를 점검하고 수정하였는가?
상태 메시지 [신규]
요약 설명
중요한 상태 메시지는 보조기술 사용자에게도 전달되어야 합니다.
조회 결과, 폼 오류, 로딩 완료, 장바구니 변경 등 사용자에게 꼭 알려야 하는 상태 변화는
시각적 표시만으로 끝내지 않고, 스크린 리더 등 보조기술이 초점을 옮기지 않아도 인지할 수 있게 전달해야 합니다.
WCAG 2.2 Guidelines :
4.1.3 Status Messages
필요성
-
동등한 피드백
시각적으로만 표시된 알림은 스크린 리더 사용자가 놓칠 수 있으므로, 보조기술로도 동일한 정보가 전달되어야 합니다.
-
맥락 유지
초점을 강제로 이동시키지 않고도 상태 변화를 알릴 수 있어, 입력 흐름이 끊기지 않습니다.
제공 방법
예시
네이티브 앱 예시 (Android)
접근성 이벤트로 상태 알림
하이브리드 앱 예시 (HTML)
라이브 영역에 결과 메시지 표시
검수 방법
- 스크린 리더를 켠 상태에서 폼 전송·검색·저장 등을 수행했을 때, 결과·오류·로딩 완료 등이 음성으로 안내되는가?
- 중요 알림이 시각적 배너만으로 끝나지 않고, 라이브 영역 또는 OS 접근성 API로도 전달되는가?
모바일 앱 접근성 요약 보고서
모바일 앱 접근성 요약 보고서 예시로, 체크박스의 체크 여부가 저장되지 않습니다.
-
1. 텍스트 아닌 콘텐츠 [유지]
(KS X 3253:2016 대체텍스트)
-
-
2. 자막 또는 수어 [강화]
(KS X 3253:2016 자막, 수화 등의 제공)
-
-
6. 다양한 감각 지원 [통합]
(KS X 3253:2016 명확한 지시사항)
-
-
9. 색에 무관한 콘텐츠 [유지]
(KS X 3253:2016 색에 무관한 인식)
-
-
10. 소리 자동 재생 [유지]
(KS X 3253:2016 자동재생 금지)
-
-
11. 콘텐츠의 명도대비 [강화]
(KS X 3253:2016 명도대비)
-
-
13. 텍스트 크기 조정 [강화]
(KS X 3253:2016 폰트기능의 활용)
-
-
17. 초점 이동과 표시 [유지]
(KS X 3253:2016 초점)
-
-
18. 조작 가능한 크기 [현행화]
(KS X 3253:2016 컨트롤의 크기와 간격)
-
-
20. 응답시간 조절 [유지]
(KS X 3253:2016 응답 시간 조절)
-
-
21. 움직임 제어 [유지]
(KS X 3253:2016 정지 기능 제공)
-
-
22. 깜빡임과 번쩍임 [유지]
(KS X 3253:2016 깜박거림의 사용 제한)
-
-
26. 단일 포인터 입력 [유지]
(KS X 3253:2016 누르기 동작 지원)
-
-
32. 사용자 요구에 따른 실행 [유지]
(KS X 3253:2016 예측가능성)
-
-
33. 사용자 인터페이스 컴포넌트의 일관성 [강화]
(KS X 3253:2016 사용자 인터페이스의 일관성)
-
-
35. 오류 정정 [분리]
(KS X 3253:2016 입력도움)
-
-
36. 레이블 [분리]
(KS X 3253:2016 입력도움)
-
-
40. 사용자 인터페이스 컴포넌트 [강화]
(KS X 3253:2016 보조기술과의 호환성)
-