운용의 용이성 | 접근성 체크리스트(모바일 앱 접근성)

초점

요약 설명
의미나 기능을 갖는 모든 사용자 인터페이스 컴포넌트에는 초점(focus)이 적용되고, 초점은 논리적인 순서로 이동되어야 합니다.
의미나 기능을 갖는 모든 사용자 인터페이스 컴포넌트에는 초점이 적용되어야 하며, 초점은 논리적인 순서로 이동해야 합니다. 이는 터치 스크린을 사용하는 모바일 기기에서 접근성을 높이기 위한 중요한 원칙입니다.

WCAG 2.2 Guidelines : 2.4.3 Focus Order
WCAG 2.2 Guidelines : 2.4.7 Focus Visible

필요성

키보드 및 스위치 장치 사용자
물리적 키보드, 스위치 장치, 스크린 리더 등을 사용하는 사용자들도 있습니다.
접근성
시각 장애 사용자나 기타 접근성 도구를 사용하는 사용자가 앱을 논리적인 순서로 탐색할 수 있도록 해야 합니다.
사용 편의성
명확한 초점 표시와 논리적인 초점 이동 순서는 사용 편의성을 크게 향상시킵니다.

제공 방법

초점 가능한 요소 식별
- 버튼, 링크, 입력 필드 등 모든 상호작용 가능한 요소에는 초점이 적용되도록 합니다.
- 예: Button, TextView, EditText, ImageButton 등.
명확한 초점 스타일 제공
- 초점이 위치한 요소는 시각적으로 구별될 수 있도록 명확한 스타일을 제공 합니다.
- 예: 초점이 있는 요소에 테두리, 배경색 등을 적용하여 시각적으로 구별
논리적인 초점 이동 순서
앱의 UI 요소를 논리적인 순서로 배치하여 사용자가 탐색할 때 초점이 자연스럽게 이동하도록 하며, 필요시 android:nextFocusDown, android:nextFocusUp, android:nextFocusLeft, android:nextFocusRight 속성을 사용하여 초점 순서를 제어합니다.
접근성 속성 사용
- 화면 표시, 소리, 진동 등 여러 가지 방법을 조합하여 사용자가 알림을 놓치지 않도록 하며, contentDescription> 속성을 사용하여 초점이 있는 요소의 의미와 기능을 명확히 전달 합니다.

예시

네이티브 방식의 예시

									<!-- 초점 가능한 요소 설정 -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="제출"
										android:contentDescription="제출 버튼" />

									<!-- 명확한 초점 스타일 제공 -->
									<EditText
										android:id="@+id/nameInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이름 입력"
										android:background="@drawable/focused_background" />

									<!-- 논리적인 초점 이동 순서 설정 -->
									<LinearLayout
										android:orientation="vertical"
										android:layout_width="match_parent"
										android:layout_height="match_parent">

										<EditText
											android:id="@+id/nameInput"
											android:layout_width="match_parent"
											android:layout_height="wrap_content"
											android:hint="이름 입력"
											android:nextFocusDown="@id/emailInput" />

										<EditText
											android:id="@+id/emailInput"
											android:layout_width="match_parent"
											android:layout_height="wrap_content"
											android:hint="이메일 입력"
											android:nextFocusDown="@id/submitButton" />

										<Button
											android:id="@+id/submitButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="제출" />
									</LinearLayout>

하이브리드 방식의 예시

									<!-- 잘못된 예시 1 : 초점이 적용되지 않은 경우 -->
									<div>클릭하세요</div>

									<!-- 올바른 예시 1 : 초점이 적용된 경우 -->
									<button>클릭하세요</button>

									<!-- 잘못된 예시 2 : 초점 스타일이 명확하지 않은 경우 -->
									<a href="page.html" style="outline: none;">링크</a>

									<!-- 올바른 예시 2 : 명확한 초점 스타일을 제공한 경우 -->
									<a href="page.html" style="outline: 2px solid #00f;">링크</a>

									<!-- 올바른 예시 3 : 논리적인 초점 이동 순서를 설정한 경우 -->
									<nav>
										<a href="#content">본문으로 이동</a>
										<a href="#menu">메뉴로 이동</a>
									</nav>
									<main id="content">
										<h1>메인 콘텐츠</h1>
										<p>여기에 주요 내용이 있습니다.</p>
									</main>
									<aside id="menu">
										<h2>메뉴</h2>
										<ul>
											<li><a href="page1.html">페이지 1</a></li>
											<li><a href="page2.html">페이지 2</a></li>
										</ul>
									</aside>

검수 방법

키보드나 스위치 장치를 사용하여 앱을 탐색하면서 모든 상호작용 요소에 초점이 제대로 적용되는지 확인하였는가?
초점이 적용된 요소가 시각적으로 명확히 구별되는지 확인하였는가?
키보드로 앱을 탐색할 때 초점 이동 순서가 논리적이고 직관적인지 확인하였는가?
Axe, WAVE, Google Accessibility Scanner, TalkBack 등의 접근성 검사 도구를 사용하여 초점 관련 문제를 자동으로 검출하였는가?

누르기 동작 지원

요약 설명
터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 합니다.
터치 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 합니다. 이는 모바일 앱의 접근성을 높이기 위한 기본적인 원칙으로, 다양한 사용자들이 직관적이고 쉽게 인터페이스를 조작할 수 있도록 보장합니다.

WCAG 2.2 Guidelines : 2.5.1 Pointer Gestures

필요성

터치스크린 사용자를 위한 접근성
모바일 기기를 사용하는 대부분의 사용자들이 터치스크린을 통해 앱을 조작하기 때문에, 모든 기능은 누르기 동작으로 접근 가능해야 합니다.
직관적 조작
다양한 사용자들이 직관적으로 컨트롤을 사용할 수 있도록 보장하여, 앱 사용 경험을 개선합니다.
보조 기기 사용자 고려
터치 외에 스위치, 스타일러스 등 다른 입력 장치를 사용하는 사용자들도 있습니다. 이러한 장치들도 기본적으로 누르기 동작을 지원해야 합니다.

제공 방법

모든 인터랙티브 요소의 터치 가능성 보장
- 버튼, 링크, 메뉴 항목 등 모든 상호작용 가능한 요소는 터치로 쉽게 누를 수 있어야 합니다.
- 예: 작은 터치 영역은 확대하거나 요소 간 충분한 간격을 두어 실수로 누르는 것을 방지합니다.
표준 터치 제스처 사용
- 사용자들이 익숙한 터치 제스처(단일 탭, 더블 탭 등)를 사용하여 조작할 수 있도록 합니다.
- 예: 커스텀 제스처를 사용하는 경우, 그 사용 방법을 명확하게 안내해야 합니다.
시각적 피드백 제공
- 사용자가 터치했을 때 즉각적인 시각적 피드백을 제공하여 동작이 인식되었음을 알려줍니다.
- 예: 버튼을 터치했을 때 색상이 변하거나 눌린 효과가 나타나는 등의 즉각적인 시각적 피드백을 제공합니다.
중복된 제어 방식 제공
- 제스처만으로 접근할 수 있는 기능에는 누르기 동작을 통한 대체 접근 방법을 제공합니다.
- 예: 스와이프 제스처로만 열 수 있는 메뉴는 누르기 동작을 통해서도 열 수 있도록 추가 버튼을 제공합니다.

예시

네이티브 방식의 예시

									<!-- 터치 가능한 버튼 (네이티브) -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="제출"
										android:contentDescription="제출 버튼" />

									<!-- 시각적 피드백 적용 (네이티브) -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="제출"
										android:background="?android:attr/selectableItemBackground" />

									<!-- 터치 영역 확대 (네이티브) -->
									<Button
										android:id="@+id/smallButton"
										android:layout_width="64dp"
										android:layout_height="64dp"
										android:text="작은 버튼"
										android:padding="16dp" />

하이브리드 방식의 예시

버큰을 클릭해서 시각적인 변화를 확인하세요.

검수 방법

(네이티브)Android Studio나 Xcode를 통해 앱을 실제 디바이스에서 테스트하여 터치가 제대로 인식되는지 확인하였는가?
(하이브리드)React Native 앱을 에뮬레이터나 실제 디바이스에서 테스트하여 모든 터치 인터랙션이 예상대로 동작하는지 확인하였는가?
스타일, 기타 입력 장치를 사용하여 앱을 테스트하고, 터치 가능한 모든 요소가 제대로 작동하는지 확인하였는가?
터치 동작 시 시각적 피드백(예: 색상 변화, 투명도 변화 등)이 있는지 확인하였는가?
Axe, WAVE, Google Google Accessibility Scanner 또는 React Native용 접근성 검사 도구를 사용하여 앱의 접근성을 확인하였는가?

응답 시간 조절

요약 설명
시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 합니다.
시간 제한이 있는 콘텐츠(예: 자동 로그아웃, 타임아웃 폼 제출 등)는 사용자가 응답 시간을 조절할 수 있어야 합니다. 모바일 앱에서 장애를 가진 사용자를 포함한 모든 사용자가 충분한 시간을 가지고 콘텐츠를 이용할 수 있도록 보장하는 중요한 접근성 원칙입니다.

WCAG 2.2 Guidelines : 2.2.1 Timing Adjustable

필요성

장애 사용자 보호
장애를 가진 사용자들은 콘텐츠를 이해하고 반응하는 데 더 많은 시간이 필요할 수 있습니다. 시간 제한을 조절할 수 없다면, 장애를 가진 사용자들이 중요한 작업을 완료하지 못할 위험이 있습니다.
사용자 편의성
시간 제한을 연장하거나 비활성화할 수 있는 기능은 사용자가 보다 편안하게 앱을 사용할 수 있도록 도와줍니다. 특히 느린 인터넷 연결을 사용하거나 복잡한 양식을 작성해야 하는 사용자들에게 유용합니다.
다양한 환경 대응
사용자는 이동 중이거나 여러 작업을 동시에 수행하는 경우가 많습니다. 이런 상황에서 시간 제한을 조절할 수 있는 기능은 중요한 역할을 합니다.

제공 방법

시간 연장 기능 제공
사용자에게 시간이 만료되기 전에 경고 메시지를 띄우고, 시간을 연장할 수 있는 옵션을 제공합니다.
시간 제한 비활성화 옵션 제공
사용자가 특정 작업을 수행할 때 시간 제한을 비활성화할 수 있는 설정 옵션을 제공합니다.
사용자 경고
시간 제한이 가까워지면 사용자에게 시각적, 청각적 또는 진동 알림을 통해 경고를 제공합니다.

예시

네이티브 앱 예시 (Android)

시간 연장 알림 다이얼로그 네이티브 앱 예시

									new AlertDialog.Builder(this)
										.setTitle("시간 연장")
										.setMessage("세션이 만료됩니다. 시간을 연장하시겠습니까?")
										.setPositiveButton("예", (dialog, which) -> {
											// 세션 연장 로직
										})
										.setNegativeButton("아니요", (dialog, which) -> {
											// 세션 종료 로직
										})
										.show();

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

									/* 잘못된 예시 (네이티브) - 자동 로그아웃 로직만 있고, 사용자에게 시간 연장 선택권을 제공하지 않음 */
									handler.postDelayed(() -> logout(), 5000);

									/* 올바른 예시 (네이티브) */
									new AlertDialog.Builder(this)
										.setTitle("시간 연장")
										.setMessage("세션이 만료됩니다. 시간을 연장하시겠습니까?")
										.setPositiveButton("예", (dialog, which) -> {
											// 세션 연장 로직
										})
										.setNegativeButton("아니요", (dialog, which) -> {
											// 세션 종료 로직
										})
										.show();

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

시간 연장 알림 하이브리드 앱 예시

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

									<!-- 잘못된 예시 (하이브리드) - 사용자에게 알림 없이 폼이 자동 제출됨 -->
									<script>
										setTimeout(function() {
											document.getElementById('myForm').submit();
										}, 5000);
									</script>

									<!-- 올바른 예시 (하이브리드) - 타임아웃 전에 사용자에게 연장 옵션 제공 -->
									<script>
										setTimeout(function() {
											document.getElementById('timeoutDialog').classList.add('active');
										}, 5000);
									</script>

검수 방법

시간 제한이 있는 기능(예: 자동 로그아웃, 폼 제출)이 사용자가 조정할 수 있도록 설계되었는지 확인하였는가?
실제 사용자가 시간을 연장할 수 있는지, 충분히 인지할 수 있는지를 테스트하였는가?
터치 동작 시 시각적 피드백(예: 색상 변화, 투명도 변화 등)이 있는지 확인하였는가?
Google Accessibility Scanner와 같은 접근성 검사 도구를 사용하여 해당 기능이 올바르게 동작하는지 확인하였는가?

정지 기능 제공

요약 설명
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다.
자동으로 움직이거나 갱신되는 콘텐츠(예: 슬라이드쇼, 애니메이션, 자동 갱신 광고 등)는 사용자가 이를 제어하거나 정지할 수 있는 기능을 제공해야 합니다.
이는 사용자가 콘텐츠를 충분히 읽고 이해할 수 있도록 도우며, 특정 사용자들에게 불편을 줄 수 있는 요소들을 제어할 수 있게 합니다.

WCAG 2.2 Guidelines : 2.2.2 Pause, Stop, Hide

필요성

인지 장애 사용자 보호
자동으로 변경되는 콘텐츠는 주의 집중에 어려움을 겪는 사용자들에게 혼란을 줄 수 있습니다. 이러한 사용자들이 스스로 움직임을 제어하거나 정지할 수 있는 기능이 필요합니다.
시각 장애 사용자 지원
자동으로 움직이는 콘텐츠는 스크린 리더 사용자에게 혼란을 줄 수 있으므로, 이러한 콘텐츠를 제어할 수 있는 옵션이 중요합니다.
사용자 경험 개선
사용자가 콘텐츠를 스스로 제어할 수 있을 때, 더 나은 사용자 경험을 제공할 수 있습니다.

제공 방법

정지, 일시 정지, 또는 숨기기 기능 제공
슬라이드쇼나 자동 갱신 콘텐츠에는 사용자가 정지하거나 일시 정지할 수 있는 버튼을 제공합니다.
움직임을 비활성화할 수 있는 설정 제공
사용자 설정에서 자동 갱신 또는 애니메이션을 비활성화할 수 있는 옵션을 제공합니다.
시각적 제어 제공
움직이는 콘텐츠에 대한 제어 버튼은 사용자에게 쉽게 접근 가능하고 눈에 띄는 위치에 배치합니다.

예시

네이티브 앱 예시 (Android)

자동 슬라이드쇼 제어 버튼 네이티브 앱 예시

									ImageView imageView = findViewById(R.id.imageView);
									Button pauseButton = findViewById(R.id.pauseButton);
									Button playButton = findViewById(R.id.playButton);

									pauseButton.setOnClickListener(v -> {
										// 슬라이드쇼 일시 정지 로직
										imageView.clearAnimation();
									});

									playButton.setOnClickListener(v -> {
										// 슬라이드쇼 재생 로직
										Animation anim = new AlphaAnimation(0.0f, 1.0f);
										anim.setDuration(2000); // 2초 간격으로 슬라이드 변경
										anim.setRepeatCount(Animation.INFINITE);
										imageView.startAnimation(anim);
									});

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

									/* 잘못된 예시 (네이티브) - 슬라이드쇼가 자동으로 변경되지만 정지 또는 제어할 방법이 제공되지 않음 */
									Animation anim = new AlphaAnimation(0.0f, 1.0f);
									anim.setDuration(2000); // 2초 간격으로 슬라이드 변경
									anim.setRepeatCount(Animation.INFINITE);
									imageView.startAnimation(anim);

									/* 올바른 예시 - (네이티브) - 슬라이드쇼를 일시 정지하거나 재생할 수 있는 제어 버튼을 제공 */
									pauseButton.setOnClickListener(v -> {
										// 슬라이드쇼 일시 정지 로직
										imageView.clearAnimation();
									});

									playButton.setOnClickListener(v -> {
										// 슬라이드쇼 재생 로직
										Animation anim = new AlphaAnimation(0.0f, 1.0f);
										anim.setDuration(2000); // 2초 간격으로 슬라이드 변경
										anim.setRepeatCount(Animation.INFINITE);
										imageView.startAnimation(anim);
									});

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

자동 슬라이드쇼 제어 하이브리드 앱 예시

									<div id="slideshow">
										<img id="slideImage" src="image1.jpg" alt="슬라이드 이미지">
									</div>
									<div class="controls">
										<button id="pauseButton">일시 정지</button>
										<button id="playButton">재생</button>
									</div>
									let slideshowInterval;

									<script>
										function startSlideshow() {
											slideshowInterval = setInterval(function() {
												// 슬라이드 변경 로직
												const slideImage = document.getElementById('slideImage');
												slideImage.src = slideImage.src === 'image1.jpg' ? 'image2.jpg' : 'image1.jpg';
											}, 2000); // 2초 간격으로 슬라이드 변경
										}

										document.getElementById('pauseButton').addEventListener('click', function() {
											clearInterval(slideshowInterval);
										});

										document.getElementById('playButton').addEventListener('click', function() {
											startSlideshow();
										});

										// 초기 슬라이드쇼 시작
										startSlideshow();
									</script>

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

									<!-- 잘못된 예시 (하이브리드) - 사용자가 정지할 수 없는 자동 슬라이드쇼 -->
									<script>
										setInterval(function() {
											const slideImage = document.getElementById('slideImage');
											slideImage.src = slideImage.src === 'image1.jpg' ? 'image2.jpg' : 'image1.jpg';
										}, 2000);
									</script>

									<!-- 올바른 예시 (하이브리드) - 사용자가 슬라이드쇼를 정지하거나 다시 시작할 수 있도록 제어 버튼을 제공 -->
									<script>
										document.getElementById('pauseButton').addEventListener('click', function() {
											clearInterval(slideshowInterval);
										});

										document.getElementById('playButton').addEventListener('click', function() {
											startSlideshow();
										});
									</script>

검수 방법

자동으로 변경되거나 움직이는 모든 콘텐츠가 사용자 제어 기능을 제공하는지 확인하였는가?
실제 사용자들이 자동 콘텐츠를 제어할 수 있는지, 제어 버튼이 명확하고 사용하기 쉬운지를 테스트하였는가?
Google Accessibility Scanner와 같은 접근성 검사 도구를 사용하여 자동 콘텐츠 제어 기능이 올바르게 작동하는지 확인하였는가?

컨트롤의 크기와 간격

요약 설명
컨트롤은 충분한 크기와 간격으로 제공되어야 합니다.
사용자가 실수로 잘못된 버튼을 누르거나 여러 컨트롤을 동시에 터치하는 것을 방지하고, 인터페이스를 쉽게 조작할 수 있도록, 모바일 기기의 터치스크린에서 컨트롤(예: 버튼, 링크, 입력 필드)은 충분한 크기와 간격을 가져야 합니다.

WCAG 2.2 Guidelines : 2.5.5 Target Size (Enhanced)

필요성

사용자 편의성
작은 컨트롤이나 가까이 배치된 컨트롤은 사용자에게 불편을 줄 수 있으며, 특히 손이 크거나 섬세한 조작이 어려운 사용자들에게 문제가 될 수 있습니다.
오류 감소
충분한 크기와 간격은 실수로 잘못된 버튼을 누르는 등의 오류를 줄여줍니다.
접근성 보장
충분한 크기와 간격은 시각 장애나 운동 장애를 가진 사용자들이 모바일 앱을 쉽게 사용할 수 있도록 하는 데 중요한 역할을 합니다.

제공 방법

충분한 크기의 컨트롤 제공
사용자가 쉽게 누를 수 있도록 버튼, 링크, 입력 필드 등 터치 가능한 요소는 최소한 44x44dp 이상의 크기로 제공해야 합니다.
컨트롤 간의 충분한 간격 유지
컨트롤과 컨트롤의 중심 간 간격을 최소한 9mm 이상으로 충분히 제공하여, 사용자가 실수로 여러 컨트롤을 동시에 터치하는 것을 방지합니다.
터치 영역 확대
시각적으로 작은 컨트롤이라도 터치 영역을 실제 컨트롤보다 크게 설정하여, 사용자가 쉽게 조작할 수 있도록 합니다.

예시

네이티브 앱 예시 (Android)

충분한 크기와 간격을 가진 버튼

									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:minWidth="48dp"
										android:minHeight="48dp"
										android:layout_margin="16dp"
										android:text="제출" />

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

									<!-- 잘못된 예시 (네이티브) - 버튼의 크기가 너무 작고, 인접한 다른 컨트롤과 너무 가까이 배치되어 있어 터치하기 어려움 -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="32dp"
										android:layout_height="32dp"
										android:layout_margin="4dp"
										android:text="제출" />

									<!-- 잘못된 예시 (네이티브) - 작은 크기의 버튼이 촘촘하게 배치되어 있어 실수로 다른 버튼을 터치할 위험이 크다 -->
									<button style="padding: 8px 12px; margin: 4px; font-size: 12px;">제출</button>


									<!-- 올바른 예시 (네이티브) - 버튼의 크기를 충분히 키우고, 인접한 다른 컨트롤과의 간격을 확보 -->
									<Button
										android:id="@+id/submitButton"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:minWidth="48dp"
										android:minHeight="48dp"
										android:layout_margin="16dp"
										android:text="제출" />

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

충분한 크기와 간격을 가진 버튼

									<style>
										.button {
											padding: 16px 24px; /* 터치 영역을 확보 */
											font-size: 18px;
											margin: 16px; /* 다른 컨트롤과의 간격 유지 */
											background-color: #007AFF;
											color: white;
											border: none;
											border-radius: 5px;
											cursor: pointer;
										}
									</style>

									<button class="button">제출</button>

검수 방법

컨트롤의 크기와 간격이 충분히 확보되었는지 확인합니다. 버튼이 최소 44x44dp 이상이고, 인접한 컨트롤과의 간격이 충분한지 테스트하였는가?
실제 기기에서 터치스크린으로 컨트롤을 사용해보고, 실수로 다른 컨트롤을 터치할 가능성이 없는지 확인하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 크기와 간격이 접근성 기준을 충족하는지 점검하였는가?

초점

필요성

제공 방법

예시

네이티브 방식의 예시

하이브리드 방식의 예시

검수 방법

누르기 동작 지원

필요성

제공 방법

예시

네이티브 방식의 예시

하이브리드 방식의 예시

검수 방법

응답 시간 조절

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

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

검수 방법

정지 기능 제공

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

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

검수 방법

컨트롤의 크기와 간격

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

검수 방법

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