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

입력 도움

요약 설명
입력 서식 이용 시, 입력 오류를 방지하거나 정정할 수 있는 방법을 제공해야 합니다.
입력 서식을 이용할 때 사용자가 잘못된 정보를 입력하지 않도록 도와주는 방법을 제공하거나, 오류 발생 시 이를 쉽게 정정할 수 있도록 안내해야 합니다. 이러한 기능은 사용자들이 올바른 데이터를 입력하도록 유도하며, 특히 인지 장애가 있는 사용자들에게 매우 중요합니다.

WCAG 2.2 Guidelines : 3.3.1 Error Identification
WCAG 2.2 Guidelines : 3.3.3 Error Suggestion

필요성

사용자 편의성
입력 과정에서 발생할 수 있는 오류를 최소화하여 사용자의 부담을 줄입니다.
오류 방지
사용자가 입력해야 하는 형식에 대한 명확한 지침을 제공함으로써 오류 발생을 줄일 수 있습니다.
오류 정정 지원
오류가 발생했을 때 사용자가 쉽게 수정할 수 있도록 피드백과 도움을 제공합니다.
접근성 보장
특히 인지 장애나 시각 장애가 있는 사용자들이 입력 오류를 쉽게 식별하고 수정할 수 있도록 돕습니다.

제공 방법

명확한 입력 지침 제공
- 입력 서식의 각 필드에 대해 사용자가 기대되는 입력 형식을 명확히 안내합니다(예: 전화번호 형식, 이메일 형식).
- 입력 필드에 힌트(placeholder)나 레이블(label)을 사용하여 입력 형식을 설명합니다.
실시간 입력 검증
사용자가 입력하는 동안 실시간으로 오류를 검증하고, 문제가 있을 경우 즉시 피드백을 제공합니다(예: 이메일 주소 형식 오류).
오류 발생 시 시각적 피드백 제공
오류가 발생한 필드를 시각적으로 강조(예: 빨간색 테두리)하고, 오류 메시지를 명확하게 표시하여 무엇이 잘못되었는지 설명합니다.
오류 수정 가이드 제공
오류 메시지에 오류 수정 방법을 포함시켜 사용자가 쉽게 문제를 해결할 수 있도록 제공합니다.

예시

네이티브 앱 예시 (Android)

실시간 입력 검증과 오류 피드백

									// xml code
									<EditText
										android:id="@+id/emailInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이메일 입력"
										android:inputType="textEmailAddress" />

									<TextView
										android:id="@+id/emailError"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:text="올바른 이메일 주소를 입력하세요."
										android:textColor="#FF0000"
										android:visibility="gone" />

									// java code
									EditText emailInput = findViewById(R.id.emailInput);
									TextView emailError = findViewById(R.id.emailError);

									emailInput.addTextChangedListener(new TextWatcher() {
										@Override
										public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

										@Override
										public void onTextChanged(CharSequence s, int start, int before, int count) {
											if (!Patterns.EMAIL_ADDRESS.matcher(s).matches()) {
												emailError.setVisibility(View.VISIBLE);
											} else {
												emailError.setVisibility(View.GONE);
											}
										}

										@Override
										public void afterTextChanged(Editable s) {}
									});

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

									<!-- 잘못된 예시 (네이티브) - 이메일 형식이 잘못되었을 때 아무런 피드백을 제공하지 않음 -->
									<EditText
										android:id="@+id/emailInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이메일 입력" />

									<!-- 잘못된 예시 (네이티브) - 사용자가 입력한 내용이 잘못되었을 때에도 명확한 오류 메시지를 제공하지 않음 -->
									<input type="email" id="emailInput" placeholder="example@domain.com">

									<!-- 올바른 예시 (네이티브) - 실시간으로 이메일 형식을 검증하고, 오류 시 사용자에게 명확한 피드백을 제공 -->
									<EditText
										android:id="@+id/emailInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이메일 입력"
										android:inputType="textEmailAddress" />

									<TextView
										android:id="@+id/emailError"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:text="올바른 이메일 주소를 입력하세요."
										android:textColor="#FF0000"
										android:visibility="gone" />

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

실시간 입력 검증과 오류 피드백

검수 방법

모든 입력 필드에 대해 실시간 검증과 오류 피드백이 제대로 작동하는지 확인하였는가?
오류 메시지가 명확하고 사용자가 쉽게 이해할 수 있는지 검토하였는가?
실제 사용자들이 입력 과정에서 발생한 오류를 쉽게 식별하고 수정할 수 있는지 테스트하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 입력 필드와 오류 메시지가 접근성 기준을 충족하는지 점검하였는가?

사용자 인터페이스의 일관성

요약 설명
사용자 인터페이스 컴포넌트들은 일관성 있게 배치되어야 합니다.
사용자 인터페이스(UI) 컴포넌트들이 일관성 있게 배치되면 사용자는 앱을 보다 쉽게 탐색하고 이해할 수 있습니다.
일관성 있는 UI는 사용자가 각 요소의 위치와 동작을 예측할 수 있게 해주며, 특히 장애를 가진 사용자들에게 더욱 중요한 역할을 합니다.

WCAG 2.2 Guidelines : 3.2.3 Consistent Navigation
WCAG 2.2 Guidelines : 3.2.4 Consistent Identification

필요성

사용자 경험 향상
일관성 있는 UI는 사용자가 앱을 더 쉽게 배우고 사용할 수 있도록 합니다. 반복적인 패턴은 사용자에게 익숙함을 주어 학습 곡선을 줄입니다.
오류 감소
일관성 있는 배치는 사용자가 인터페이스의 작동 방식을 이해하기 쉽게 하여, 실수로 잘못된 요소를 누르거나 잘못된 동작을 수행하는 것을 줄입니다.
접근성 보장
특히 인지 장애나 시각 장애를 가진 사용자들이 앱을 사용할 때, 일관된 레이아웃과 컴포넌트 배치는 중요한 접근성 요소가 됩니다.

제공 방법

컴포넌트의 위치 일관성 유지
주요 UI 컴포넌트(예: 내비게이션 메뉴, 버튼, 입력 필드 등)는 앱 내 모든 화면에서 일관된 위치에 배치되어야 합니다.
예를 들어, “뒤로 가기” 버튼은 항상 화면의 왼쪽 상단에 위치해야 합니다.
시각적 디자인 일관성 유지
- 버튼, 텍스트, 아이콘 등의 시각적 스타일(예: 색상, 폰트, 크기)을 일관되게 사용하여 사용자에게 일관된 시각적 경험을 제공합니다.
- 텍스트 필드는 모든 화면에서 동일한 크기와 스타일을 사용하여 일관된 시각적 힌트를 제공합니다.
동작 패턴 일관성 유지
특정 동작(예: 스와이프, 탭 등)에 대한 응답은 모든 화면에서 동일하게 처리되어야 합니다.
예를 들어, 스와이프 제스처로 메뉴를 열거나 닫는 경우, 모든 화면에서 동일하게 작동하도록 해야 합니다.
내비게이션 구조의 일관성 유지
앱 내 모든 페이지와 기능은 일관된 내비게이션 구조를 따라야 합니다. 사용자는 언제든지 동일한 방식으로 원하는 페이지로 이동할 수 있어야 합니다.

예시

네이티브 앱 예시 (Android)

일관된 버튼 배치

									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<!-- 뒤로 가기 버튼: 모든 화면에서 왼쪽 상단에 일관되게 배치 -->
										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="start" />

										<!-- 주요 작업 버튼: 항상 동일한 스타일과 위치 유지 -->
										<Button
											android:id="@+id/mainActionButton"
											android:layout_width="match_parent"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_marginTop="16dp" />
									</LinearLayout>

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

									<!-- 잘못된 예시 (네이티브) - 동일한 작업을 수행하는 버튼이 각 화면마다 다른 위치에 배치되거나 스타일이 일관되지 않음 -->
									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<!-- 동일한 기능을 하는 버튼이 다른 위치에 배치됨 -->
										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="end" />

										<Button
											android:id="@+id/saveButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_gravity="center" />
									</LinearLayout>

									<!-- 잘못된 예시 (네이티브) - 동일한 동작을 수행하는 버튼이 다른 페이지에서 서로 다른 색상과 크기로 제공됨 -->
									<button style="padding: 12px; background-color: green;">저장</button>
									<button style="padding: 20px; background-color: red;">저장</button>

									<!-- 올바른 예시 (네이티브) - 동일한 기능을 수행하는 버튼이 모든 화면에서 일관된 위치에 배치되고, 일관된 스타일이 적용됨 -->
									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="start" />

										<Button
											android:id="@+id/saveButton"
											android:layout_width="match_parent"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_marginTop="16dp" />
									</LinearLayout>

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

일관된 내비게이션과 버튼 스타일

검수 방법

모든 화면에서 주요 UI 컴포넌트(예: 내비게이션 바, 버튼 등)가 일관된 위치와 스타일로 배치되었는지 확인하였는가?
다양한 사용자가 앱을 사용하면서 일관성 있는 인터페이스로 인해 앱 사용이 쉬운지, 예상 가능한지 평가하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 UI 컴포넌트의 일관성이 접근성 기준을 충족하는지 점검하였는가?

깜박거림의 사용 제한

요약 설명
깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 합니다.
깜박이거나 번쩍이는 콘텐츠는 특정 사용자들에게 심각한 건강 문제를 일으킬 수 있습니다. 특히, 이러한 콘텐츠는 광과민성 발작을 유발할 위험이 있으며, 시각적으로 불편함을 줄 수 있습니다.
따라서, 깜박임의 빈도를 제한하거나, 깜박임이 없는 대체 콘텐츠를 제공해야 한다.

WCAG 2.2 Guidelines : 2.3.1 Three Flashes or Below Threshold

필요성

광과민성 발작 방지
일부 사용자들은 깜박이거나 번쩍이는 콘텐츠에 노출되면 발작을 일으킬 수 있습니다. 이를 방지하기 위해 깜박임을 사용하지 않거나, 깜박임 빈도를 제한해야 합니다.
시각적 불편함 감소
지속적인 깜박임은 시각적 피로를 유발하고 사용자 경험을 저해할 수 있습니다.
접근성 보장
시각 장애가 있는 사용자뿐만 아니라 모든 사용자가 콘텐츠를 안전하게 접근할 수 있도록 보장합니다.

제공 방법

깜박임 빈도 제한
콘텐츠가 깜박이거나 번쩍여야 할 경우, 깜박임의 빈도를 초당 3회 이하로 제한합니다. 이는 발작을 유발할 수 있는 위험을 줄여줍니다.
대체 콘텐츠 제공
깜박이거나 번쩍이는 콘텐츠 대신, 정적인 이미지나 영상으로 대체할 수 있는 방법을 제공합니다.
깜박임 완화 옵션 제공
사용자 설정에서 깜박임을 완화하거나 비활성화할 수 있는 옵션을 제공합니다.
콘텐츠 검토
콘텐츠가 광과민성 발작을 유발할 가능성이 있는지 확인하고, 이에 따라 콘텐츠를 수정하거나 제거합니다.

예시

네이티브 앱 예시 (Android)

깜박임을 피하는 애니메이션 설정

									<ImageView
										android:id="@+id/flashingImage"
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:src="@drawable/static_image" /> <!-- 깜박이는 이미지 대신 정적 이미지 사용 -->

									// java code
									Animation animation = new AlphaAnimation(0.0f, 1.0f);// 깜박임을 제한하는 애니메이션 설정
									animation.setDuration(1000); // 1초간의 깜박임 주기
									animation.setRepeatCount(Animation.INFINITE);
									animation.setRepeatMode(Animation.REVERSE);

									if (animation.getDuration() > 333) { // 깜박임 빈도가 초당 3회 이하인지 확인
										imageView.startAnimation(animation);
									} else {
										// 깜박임이 과도한 경우 애니메이션을 사용하지 않음
										imageView.setImageResource(R.drawable.static_image);
									}

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

									<!-- 잘못된 예시 (네이티브) - 깜박임 빈도가 초당 3회 이상인 애니메이션이 사용됨. -->
									// java code
									Animation animation = new AlphaAnimation(0.0f, 1.0f);
									animation.setDuration(100); // 0.1초간의 깜박임 주기 - 초당 10회 이상 깜박임
									animation.setRepeatCount(Animation.INFINITE);
									imageView.startAnimation(animation);

									<!-- 올바른 예시 (네이티브) - 깜박임 대신 정적인 이미지를 사용하거나, 깜박임 빈도가 초당 3회 이하인 애니메이션을 사용 -->
									Animation animation = new AlphaAnimation(0.0f, 1.0f);
									animation.setDuration(1000); // 1초간의 깜박임 주기 - 초당 1회 깜박임
									animation.setRepeatCount(Animation.INFINITE);
									imageView.startAnimation(animation);

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

검수 방법

모든 애니메이션이 초당 3회 이하로 깜박이는지 확인합니다. 과도한 깜박임이 없는지 검토하였는가?
깜박임을 사용하지 않고도 동일한 정보를 전달할 수 있는 대체 콘텐츠가 있는지 확인하였는가?
실제 사용자들이 깜박임으로 인해 불편함을 느끼지 않는지 테스트하였는가?
다양한 접근성 검사 도구를 사용하여 깜박임과 관련된 잠재적인 문제를 식별하고 해결하였는가?

자동재생 금지

요약 설명
자동으로 재생되는 배경음을 사용하지 않아야 합니다.
자동으로 재생되는 배경음악이나 소리는 사용자가 원치 않는 상황에서 재생될 수 있어 불편함을 초래할 수 있으며, 특히 보조 기술을 사용하는 사용자들에게는 중요한 정보를 방해할 수 있습니다. 따라서, 배경음악이나 소리가 자동으로 재생되지 않도록 해야 하며, 재생을 원할 경우 사용자가 직접 제어할 수 있도록 해야 합니다.

WCAG 2.2 Guidelines : 1.4.2 Audio Control

필요성

사용자 제어 권한 보장
사용자가 앱에서 소리를 듣는 시점과 방법을 스스로 결정할 수 있어야 합니다. 자동으로 재생되는 소리는 사용자의 경험을 방해하며, 특히 공공장소나 조용한 환경에서는 더 큰 불편을 초래할 수 있습니다.
보조 기술 사용 방해
자동 재생되는 소리는 스크린 리더와 같은 보조 기술의 동작을 방해하여 시각 장애 사용자들이 앱을 사용하는 데 어려움을 겪게 할 수 있습니다.
배터리 및 데이터 사용 절약
불필요한 자동 재생은 배터리와 데이터 사용량을 증가시킬 수 있습니다. 사용자가 원치 않는 상황에서 재생을 막음으로써 자원을 절약할 수 있습니다.

제공 방법

자동 재생 비활성화
앱이 시작되거나 특정 화면에 진입할 때 배경음악이나 소리가 자동으로 재생되지 않도록 설정합니다.
사용자 제어 옵션 제공
배경음악이나 소리를 듣고 싶다면 사용자가 직접 재생 버튼을 눌러 선택적으로 재생할 수 있도록 제어 옵션을 제공합니다.
자동 재생을 방지하는 설정 제공
앱 설정에서 모든 소리나 음악의 자동 재생을 완전히 비활성화할 수 있는 옵션을 제공합니다.

예시

네이티브 앱 예시 (Android)

배경음악을 자동으로 재생하지 않도록 설정

									MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.background_music); // 음악 재생 컨트롤
									Button playButton = findViewById(R.id.playButton);

									playButton.setOnClickListener(v -> {
										if (!mediaPlayer.isPlaying()) {
											mediaPlayer.start();
										}
									});

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

									/* 잘못된 예시 (네이티브) - 앱이 시작되면 사용자가 원하지 않는 상황에서도 자동으로 배경음악이 재생됨 */
									MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.background_music); // 앱이 시작되면 자동으로 배경음악 재생
									mediaPlayer.start(); // 사용자의 동의 없이 자동 재생

									/* 올바른 예시 (네이티브) - 배경음악 재생은 사용자의 클릭으로만 시작되며, 자동으로 재생되지 않음 */
									MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.background_music);
									Button playButton = findViewById(R.id.playButton);

									playButton.setOnClickListener(v -> {
										if (!mediaPlayer.isPlaying()) {
											mediaPlayer.start();
										}
									});

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

배경음악 재생을 사용자 선택으로 설정

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

									<!-- 잘못된 예시 (하이브리드) - 페이지가 로드되자마자 자동으로 소리가 재생되며, 사용자가 이를 제어할 방법이 제공되지 않음. -->
									<audio id="backgroundAudio" src="background_music.mp3" autoplay></audio>

									<!-- 올바른 예시 (하이브리드) - 사용자가 클릭 후 일어날 이벤트에 대해 명확히 이해하고 동의하도록 피드백을 제공한 후 화면을 전환 -->
									<button id="playButton">음악 재생</button>
									<audio id="backgroundAudio" src="background_music.mp3"></audio>

검수 방법

앱이 실행되거나 특정 페이지로 이동할 때 소리가 자동으로 재생되지 않는지 확인하였는가?
사용자가 직접 소리 재생을 제어할 수 있는지 확인합니다. 재생 버튼이 명확히 표시되고 기능이 올바르게 작동하는지 테스트하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 자동 재생과 관련된 접근성 문제를 점검하였는가?

예측가능성

요약 설명
사용자가 의도하지 않는 화면 전환이나 이벤트 등이 실행되는 경우 사용자가 이해할 수 있는 방법으로 제공되어야 합니다.
사용자 인터페이스(UI)에서 예상치 못한 화면 전환이나 이벤트는 사용자에게 혼란을 줄 수 있습니다. 이러한 상황이 발생할 경우, 사용자는 이 동작의 이유와 결과를 이해할 수 있어야 하며, 예측 가능한 방식으로 제공되어야 합니다. 예측 가능한 UI는 특히 시각, 청각, 인지 장애를 가진 사용자들에게 매우 중요합니다.

WCAG 2.2 Guidelines : 3.2.1 On Focus
WCAG 2.2 Guidelines : 3.2.2 On Input

필요성

사용자 경험 향상
예상치 못한 화면 전환이나 이벤트는 사용자에게 혼란을 주고, 앱 사용을 어렵게 만듭니다. 예측 가능한 UI는 사용자가 앱을 더 쉽게 이해하고 사용할 수 있도록 돕습니다.
오류 방지
예측할 수 없는 UI 동작은 사용자의 실수를 유발할 수 있으며, 이로 인해 중요한 정보를 놓치거나 잘못된 동작을 수행할 위험이 있습니다.
접근성 보장
예측 가능한 동작은 접근성을 높여, 특히 시각, 청각, 인지 장애를 가진 사용자들이 앱을 원활하게 사용할 수 있도록 돕습니다.

제공 방법

사용자 피드백 제공
예상치 못한 화면 전환이나 이벤트가 발생할 경우, 사용자에게 변화의 이유를 명확히 설명하는 피드백을 제공합니다. 예를 들어, 화면이 새로 고침되거나 페이지가 자동으로 이동될 때 알림 메시지를 표시합니다.
명확한 경고 메시지 제공
사용자 동작이 중요한 변화를 일으킬 수 있는 경우(예: 데이터 제출, 삭제 등), 명확한 경고 메시지를 제공하고 사용자가 이를 확인하도록 합니다.
화면 전환에 대한 시각적 피드백 제공
화면 전환이 일어날 때, 애니메이션이나 전환 효과를 사용하여 사용자에게 변화가 발생했음을 명확히 알립니다.
자동화된 동작 최소화
자동으로 화면 전환이 이루어지지 않도록 하고, 필요한 경우 사용자가 직접 제어할 수 있는 옵션을 제공합니다.

예시

네이티브 앱 예시 (Android)

예상치 못한 화면 전환 시 피드백 제공

									/* Android */
									Button deleteButton = findViewById(R.id.deleteButton); // 예를 들어, 사용자가 데이터 삭제 버튼을 클릭했을 때
									deleteButton.setOnClickListener(v -> {
										new AlertDialog.Builder(this)
											.setTitle("데이터 삭제")
											.setMessage("이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?")
											.setPositiveButton("예", (dialog, which) -> {
												// 데이터를 삭제하고 화면을 전환
												deleteData();
												startActivity(new Intent(this, MainActivity.class));
											})
											.setNegativeButton("아니요", null)
											.show();
									});

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

									/* 잘못된 예시 (네이티브) - 사용자가 버튼을 클릭하자마자 별다른 경고 없이 화면이 전환되어 사용자가 혼란스러워 함 */
									// java code
									Button deleteButton = findViewById(R.id.deleteButton);
									deleteButton.setOnClickListener(v -> {
										// 사용자의 동의 없이 데이터를 삭제하고 화면 전환
										deleteData();
										startActivity(new Intent(this, MainActivity.class));
									});

									/* 올바른 예시 (네이티브) - 화면 전환 전 사용자가 예상할 수 있도록 명확한 경고 메시지를 제공하여 사용자가 확인할 수 있도록 한다 */
									Button deleteButton = findViewById(R.id.deleteButton);
									deleteButton.setOnClickListener(v -> {
										new AlertDialog.Builder(this)
											.setTitle("데이터 삭제")
											.setMessage("이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?")
											.setPositiveButton("예", (dialog, which) -> {
												deleteData();
												startActivity(new Intent(this, MainActivity.class));
											})
											.setNegativeButton("아니요", null)
											.show();
									});

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

예상치 못한 페이지 전환에 대한 피드백 제공

									<button id="deleteButton">데이터 삭제</button>

									<script>
										document.getElementById('deleteButton').addEventListener('click', function() {
											const userConfirmed = confirm("이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?");
											if (userConfirmed) {
												// 데이터 삭제 후 페이지 이동
												deleteData(); // 가상의 데이터 삭제 함수
												window.location.href = 'main.html';
											}
										});

										function deleteData() {
											// 데이터 삭제 로직
										}
			   					</script>

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

									<!-- 잘못된 예시 (하이브리드) - 페이지가 자동으로 리로드되거나 이동되어 사용자가 당황스러워 함 -->
									<script>
										document.getElementById('deleteButton').addEventListener('click', function() {
											// 사용자 확인 없이 페이지 이동
											deleteData();
											window.location.href = 'main.html';
										});
									</script>

									<!-- 올바른 예시 (하이브리드) - 사용자가 클릭 후 일어날 이벤트에 대해 명확히 이해하고 동의하도록 피드백을 제공한 후 화면을 전환 -->
									<script>
										document.getElementById('deleteButton').addEventListener('click', function() {
											const userConfirmed = confirm("이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?");
											if (userConfirmed) {
												deleteData();
												window.location.href = 'main.html';
											}
										});
									</script>

검수 방법

모든 화면 전환 및 이벤트가 사용자에게 예측 가능하게 제공되는지 확인합니다. 사용자가 예상치 못한 변화에 대비할 수 있는지 검토하였는가?
사용자 동작에 따라 제공되는 피드백이 명확하고 이해하기 쉬운지 테스트하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 예측 가능성과 관련된 접근성 문제를 점검하였는가?

입력 도움

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

검수 방법

사용자 인터페이스의 일관성

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

검수 방법

깜박거림의 사용 제한

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

검수 방법

자동재생 금지

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

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

검수 방법

예측가능성

필요성

제공 방법

예시

네이티브 앱 예시 (Android)

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

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

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

검수 방법

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