모바일 앱 접근성 견고성 - by. UXKM

A11Y
접근성 체크리스트
모바일 앱 접근성 견고성

요약 설명
모바일 애플리케이션 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로 모바일 전화기, 태블릿기기 등 모바일 기기에서 실행되는 모든 애플리케이션 및 콘텐츠를 WCAG 2.0(Web Content Accessibility Guidelines 2.0)에서 제시하고 있는 접근성 설계의 4가지 원칙 기준으로, 모바일 애플리케이션 콘텐츠의 설계 및 개발을 위한 지침을 제시하고 있습니다.

폰트 관련 기능의 활용

요약 설명
텍스트 콘텐츠는 운영체제에서 제공하는 폰트 관련 기능을 활용할 수 있는 방법을 제공해야 합니다.
모바일 운영체제는 사용자가 텍스트 크기, 글꼴, 대비 등을 조정할 수 있는 기능을 제공하므로, 앱 내에서도 이를 지원하여 사용자가 적합한 텍스트 환경을 설정할 수 있도록 해야 합니다. 이를 통해 접근성을 높여 다양한 사용자가 앱을 편리하게 사용할 수 있게 도와줍니다.
또한, 일관성 있는 UI는 사용자가 각 요소의 위치와 동작을 예측할 수 있게 해주며, 특히 장애를 가진 사용자들에게 중요한 역할을 합니다.

WCAG 2.2 Guidelines : 1.4.3 Contrast (Minimum)
WCAG 2.2 Guidelines : 1.4.4 Resize Text

필요성

사용자 맞춤화 보장
각 사용자는 텍스트를 읽는 데 필요한 요구사항이 다르기 때문에, 운영체제의 폰트 설정을 따르는 앱은 이러한 개인 맞춤화를 지원해야 합니다.
가독성 향상
텍스트 크기나 대비를 조절할 수 있으면 사용자는 자신의 시력에 맞게 텍스트를 쉽게 읽을 수 있습니다.
접근성 보장
시각 장애나 저시력을 가진 사용자가 텍스트를 더 쉽게 읽을 수 있도록 폰트 관련 기능을 지원하면 접근성을 높일 수 있습니다.

제공 방법

운영체제 폰트 설정 준수
앱의 텍스트 콘텐츠는 운영체제의 텍스트 크기, 글꼴, 대비 설정을 자동으로 따라야 합니다. 사용자가 설정한 텍스트 크기와 스타일이 앱 내에서도 동일하게 적용되도록 해야 합니다.
동적 텍스트 크기 지원
사용자가 텍스트 크기를 조절할 수 있는 기능을 제공합니다. 예를 들어, Android의 sp 단위나 iOS의 Dynamic Type을 사용하여 텍스트 크기를 설정할 수 있도록 합니다.
사용자 정의 설정 제공
앱 내에서 추가적인 폰트 크기 조절 기능이나 고대비 모드를 제공하여 사용자가 텍스트를 더 쉽게 읽을 수 있도록 합니다.

예시

네이티브 앱 예시 (Android)

운영체제의 폰트 설정을 따르는 텍스트

									<TextView
										android:id="@+id/sampleText"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="여기에 텍스트를 입력하세요"
										android:textSize="18sp" // 운영체제의 텍스트 크기 설정에 따라 크기가 조정됨
										android:fontFamily="sans-serif" />

네이티브(잘못된 / 올바른 예시)

									<!-- 잘못된 예시 (네이티브) - 텍스트 크기를 고정값으로 설정하여 운영체제의 텍스트 크기 설정을 따르지 않음 -->
									<TextView
										android:id="@+id/sampleText"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="여기에 텍스트를 입력하세요"
										android:textSize="14dp" // 고정된 텍스트 크기
										android:fontFamily="sans-serif" />

									<!-- 올바른 예시 (네이티브) - 운영체제의 텍스트 크기 설정을 따르고, 폰트 크기가 조정 가능하도록 설정함 -->
									<TextView
										android:id="@+id/sampleText"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="여기에 텍스트를 입력하세요"
										android:textSize="18sp" // 운영체제의 설정을 따름
										android:fontFamily="sans-serif" />

하이브리드 앱 예시 (HTML/JavaScript)

운영체제의 폰트 설정을 따르는 텍스트

하이브리드(잘못된 / 올바른 예시)

									<!-- 잘못된 예시 (하이브리드) - 폰트 크기가 고정되어 있으며, 사용자가 텍스트 크기를 조절할 수 있는 옵션이 제공되지 않음 -->
									<style>
										body {
											font-size: 14px; /* 고정된 텍스트 크기 */
											font-family: Arial, sans-serif; /* 시스템 폰트가 아닌 고정 폰트 사용 */
										}
									</style>
									<p>이 텍스트는 고정된 크기와 폰트로 설정되어 있습니다.</p>

									<!-- 올바른 예시 (하이브리드) - 반응형 텍스트 크기와 시스템 폰트를 사용하여 운영체제의 폰트 설정을 따름 -->
									<style>
										body {
											font-size: calc(1em + 1vw); /* 반응형 텍스트 크기 */
											font-family: system-ui, sans-serif; /* 시스템 폰트 사용 */
										}
									</style>
									<p>운영체제의 폰트 설정을 따르는 텍스트 예시입니다.</p>

검수 방법

운영체제의 텍스트 크기나 폰트 설정을 변경한 후, 앱의 텍스트가 이에 따라 적절히 조정되는지 확인하였는가?
텍스트가 모든 사용자에게 가독성이 높고, 다양한 텍스트 크기에서 읽기 쉽게 표시되는지 테스트하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 텍스트 관련 접근성 문제를 점검하였는가?

보조 기술과의 호환성

요약 설명
사용자 인터페이스 컴포넌트는 보조 기술을 이용하여 사용할 수 있도록 해야 합니다.
보조 기술은 시각, 청각, 신체적 장애가 있는 사용자들이 컴퓨터와 모바일 기기를 사용할 수 있도록 도와주는 장치나 소프트웨어입니다. 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)

보조 기술을 위한 접근성 속성 설정

									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="제출"
										android:contentDescription="폼 제출 버튼" // 스크린 리더에 의해 읽혀질 텍스트
										android:importantForAccessibility="yes" />

									Button submitButton = findViewById(R.id.submitButton); // 특정 동작에 대한 피드백 제공
									submitButton.setOnClickListener(v -> {
										submitButton.setContentDescription("폼이 제출되었습니다."); // 버튼 클릭 시 스크린 리더에 읽힐 메시지 설정
										submitForm(); // 폼 제출 로직 수행
									});

네이티브(잘못된 / 올바른 예시)

									<!-- 잘못된 예시 (네이티브) - 버튼에 접근성 속성이 없어서 스크린 리더가 버튼의 역할을 알 수 없음 -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="제출" />

									<!-- 올바른 예시 (네이티브) - 버튼에 contentDescription을 설정하여 스크린 리더가 버튼의 역할을 읽을 수 있도록 함 -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="제출"
										android:contentDescription="폼 제출 버튼"
										android:importantForAccessibility="yes" />

하이브리드 앱 예시 (HTML/JavaScript)

ARIA 속성을 사용하여 보조 기술 호환성 보장

									<button id="submitButton" aria-label="폼 제출">제출</button>

									<script>
										document.getElementById('submitButton').addEventListener('click', function() {
											this.setAttribute('aria-label', '폼이 제출되었습니다');// 폼 제출 후 상태를 업데이트하여 스크린 리더에 읽히도록 함
										});
									</script>

하이브리드(잘못된 / 올바른 예시)

									<!-- 잘못된 예시 (하이브리드) - 버튼에 aria-label이 없어서 스크린 리더가 버튼의 기능을 읽을 수 없음 -->
									<button id="submitButton">제출</button>

									<!-- 올바른 예시 (하이브리드) - aria-label 속성을 사용하여 보조 기술이 버튼의 기능을 인식할 수 있도록 설정 -->
									<button id="submitButton" aria-label="폼 제출">제출</button>

검수 방법

스크린 리더(예: Android의 TalkBack, iOS의 VoiceOver)나 음성 인식 소프트웨어를 사용하여 앱을 테스트하고, 모든 UI 컴포넌트가 올바르게 인식되고 작동하는지 확인하였는가?
키보드나 보조 기술을 통해 포커스를 이동시키며, 모든 인터랙티브 요소가 논리적 순서로 탐색되는지 확인하였는가?
Google Accessibility Scanner, WAVE 등의 도구를 사용하여 UI 컴포넌트의 접근성 문제를 점검하고 수정하였는가?

폰트 관련 기능의 활용

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

네이티브(잘못된 / 올바른 예시)

하이브리드 앱 예시 (HTML/JavaScript)

하이브리드(잘못된 / 올바른 예시)

검수 방법

보조 기술과의 호환성

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

네이티브(잘못된 / 올바른 예시)

하이브리드 앱 예시 (HTML/JavaScript)

하이브리드(잘못된 / 올바른 예시)

검수 방법

모바일 앱 접근성 요약 보고서