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

초점 이동과 표시 [유지]

요약 설명
의미나 기능을 갖는 모든 콘텐츠 요소는 초점이 적용되고, 초점은 논리적인 순서로 이동해야 합니다.
의미나 기능을 갖는 모든 콘텐츠 요소에 초점이 적용되고, 초점은 논리적인 순서로 이동해야 합니다. 터치 스크린을 사용하는 모바일 기기에서도 키보드·스위치·스크린 리더 등으로 동일하게 탐색할 수 있어야 합니다.

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 속성을 사용하여 초점이 있는 요소의 의미와 기능을 명확히 전달합니다.

예시

네이티브 앱 예시(Android)

									<!-- 초점 가능한 요소 설정 -->
									<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>

하이브리드 앱 예시 (HTML)

									<!-- 잘못된 예시 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 등의 접근성 검사 도구를 사용하여 초점 관련 문제를 자동으로 검출하였는가?

조작 가능한 크기 [현행화]

요약 설명
사용자 입력 및 컨트롤은 조작 가능한 충분한 크기로 제공해야 합니다.
모바일 앱 접근성 요구(KS X 3253:2025 등 반영)에서는 조작 가능 영역을 가로·세로 각각 24×24 CSS 픽셀(px) 이상으로 두는 것을 전제로 하며, 터치스크린에서 인접 요소와의 간격을 확보해 실수 터치를 줄입니다.

WCAG 2.2 Guidelines : 2.5.8 Target Size (Minimum)
WCAG 2.2 Guidelines : 2.5.5 Target Size (Enhanced) (Level AAA)

필요성

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

제공 방법

충분한 크기의 컨트롤 제공
기준(신규 MACAG·WCAG 2.5.8) : 버튼·링크·입력 필드 등의 조작 가능 영역은 가로·세로 각각 24×24 CSS px 이상이 되도록 합니다(운영체제 기본 컨트롤·본문 링크·지도 핀 등 예외는 WCAG 예외 조항 참고).

권장(모바일 앱 접근성 항목별 준수 가이드) : 화면 크기와 관계없이 컨트롤의 가로·세로를 각각 약 9mm 이상으로 두는 것이 바람직합니다(물리 크기·해상도에 따라 dp/pt·CSS로 환산해 적용).

참고 : iOS·Android 디자인 가이드의 44pt/48dp 등은 최소 기준(24px)보다 넉넉한 실무 권장값이며, 예시 코드의 minWidth/minHeight 48dp는 그에 가깝게 맞춘 경우입니다.
컨트롤 간의 충분한 간격 유지
컨트롤 사이에 외곽선 등으로 영역이 구분되지 않으면, 컨트롤 중심 간 간격을 충분히 두어 한 번에 여러 컨트롤이 눌리지 않도록 합니다(항목별 준수 가이드). 9mm는 위에서 말한 컨트롤 자체의 크기에 대한 권장값이며, 중심 간격을 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
										android:id="@+id/smallButton2"
										android:layout_width="36dp"
										android:layout_height="36dp"
										android:layout_margin="4dp"
										android:text="취소" />

									<!-- 올바른 예시 (네이티브) - 버튼의 크기를 충분히 키우고, 인접한 다른 컨트롤과의 간격을 확보 -->
									<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>

검수 방법

조작 가능 영역이 가로·세로 각 24×24 CSS px 이상(예외 제외)인지, 인접 타깃과 겹치거나 과도하게 촘촘하지 않은지 확인하였는가?
실제 기기에서 터치스크린으로 컨트롤을 사용해보고, 실수로 다른 컨트롤을 터치할 가능성이 없는지 확인하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 크기와 간격이 접근성 기준을 충족하는지 점검하였는가?

단일 문자 단축키 [신규]

요약 설명
단일 문자 단축키는 비활성화·재할당·조합키 전환 수단을 제공해야 합니다.

WCAG 2.2 Guidelines : 2.1.4 Character Key Shortcuts

필요성

음성 입력·보조기기 사용 중 의도치 않은 단축키 실행을 줄입니다.

제공 방법

설정에서 단일 문자 단축키를 끄거나 수정할 수 있도록 제공합니다.

예시

하이브리드 앱 예시 (JavaScript)

									const settings = { singleKeyShortcutEnabled: false };

									document.getElementById('toggleShortcut').addEventListener('click', () => {
										settings.singleKeyShortcutEnabled = !settings.singleKeyShortcutEnabled;
									});

									document.addEventListener('keydown', (e) => {
										// 단일 문자 키는 기본 비활성화, 조합키(Ctrl+S)만 허용
										if (e.key.toLowerCase() === 's' && e.ctrlKey) save();
										if (settings.singleKeyShortcutEnabled && e.key.toLowerCase() === 's' && !e.ctrlKey) {
											openSearch();
										}
									});

Vue 예시

									<button @click="enabled = !enabled">단축키 설정</button>

React 예시

									<button onClick={() => setEnabled(v => !v)}>단축키 설정</button>

검수 방법

단일 키 단축 동작을 끄거나 변경할 수 있는지 확인하였는가?

응답시간 조절 [유지]

요약 설명
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 합니다.
자동 로그아웃, 타임아웃 폼 제출 등 시간 제한이 있는 기능은 사용자가 연장·끄기 등으로 응답 시간을 조절할 수 있어야 합니다. 모바일 환경에서도 충분한 반응 시간을 보장하는 것이 중요합니다.

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" type="button">일시 정지</button>
										<button id="playButton" type="button">재생</button>
									</div>
									<script>
										let slideshowInterval;

										function startSlideshow() {
											slideshowInterval = setInterval(function() {
												const slideImage = document.getElementById('slideImage');
												slideImage.src = slideImage.src === 'image1.jpg' ? 'image2.jpg' : 'image1.jpg';
											}, 2000);
										}

										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.3.1 Three Flashes or Below Threshold

필요성

광과민성 발작 위험과 시각적 피로를 줄입니다.

제공 방법

초당 3회 초과 깜빡임을 피하고, 필요 시 정지 버튼을 제공합니다.

예시

하이브리드 앱 예시 (HTML)

									<div id="banner" class="flash">긴급 공지</div>
									<button type="button" id="pauseAnim">애니메이션 정지</button>
									<script>
										const banner = document.getElementById('banner');
										document.getElementById('pauseAnim').addEventListener('click', () => {
											banner.classList.remove('flash');
										});
									</script>

Vue 예시

									<button @click="isFlashing = false">애니메이션 정지</button>

React 예시

									<button onClick={() => setFlashing(false)}>애니메이션 정지</button>

검수 방법

깜빡임 콘텐츠에 회피/중지 수단이 있는지 확인하였는가?

제목 [신규]

요약 설명
페이지/화면/영역의 제목은 내용을 대표하도록 제공해야 합니다.

WCAG 2.2 Guidelines : 2.4.2 Page Titled

필요성

사용자가 현재 위치와 목적을 빠르게 파악할 수 있습니다.

제공 방법

각 화면에 고유하고 의미 있는 제목을 제공합니다.

예시

하이브리드 앱 예시 (HTML)

									<!-- 잘못된 예시: 제목이 모호함 -->
									<title>페이지</title>

									<!-- 올바른 예시: 화면 목적이 드러남 -->
									<title>주문 내역 | 마이페이지</title>

Vue 예시

									useHead({ title: '주문 내역 | 마이페이지' })

React 예시

									document.title = '주문 내역 | 마이페이지';

검수 방법

각 화면 제목이 중복 없이 목적을 설명하는지 확인하였는가?

링크 텍스트 [신규]

요약 설명
링크 텍스트만으로 이동 목적을 이해할 수 있어야 합니다.

WCAG 2.2 Guidelines : 2.4.4 Link Purpose (In Context)

필요성

보조기술 사용자가 링크 목록에서 목적을 판단할 수 있습니다.

제공 방법

“여기” 대신 “주문 상세 보기”처럼 목적 중심 텍스트를 사용합니다.

예시

하이브리드 앱 예시 (HTML)

									<!-- 잘못된 예시 -->
									<a href="/orders/123">여기</a>

									<!-- 올바른 예시 -->
									<a href="/orders/123">주문 123 상세 보기</a>

Vue 예시

									<RouterLink to="/orders/123">주문 123 상세 보기</RouterLink>

React 예시

									<Link to="/orders/123">주문 123 상세 보기</Link>

검수 방법

모든 링크의 목적을 링크 문구만으로 이해 가능한지 확인하였는가?

다양한 탐색 방법 [신규]

요약 설명
콘텐츠를 찾는 방법을 두 가지 이상 제공해야 합니다.

WCAG 2.2 Guidelines : 2.4.5 Multiple Ways

필요성

사용자 특성에 맞는 탐색 경로를 선택할 수 있습니다.

제공 방법

메뉴 + 검색, 카테고리 + 최근 본 항목 등 복수 방법을 제공합니다.

예시

하이브리드 앱 예시 (HTML)

									<nav aria-label="주요 메뉴">
										<a href="/products">카테고리</a>
										<a href="/mypage">마이페이지</a>
									</nav>
									<form role="search">
										<label for="q">검색</label>
										<input id="q" name="q" />
									</form>

Vue 예시

									<RouterLink to="/products">카테고리</RouterLink>
									<input v-model="query" aria-label="검색" />

React 예시

									<Link to="/products">카테고리</Link>
									<input value={query} onChange={onChangeQuery} aria-label="검색" />

검수 방법

동일 콘텐츠로 가는 탐색 수단을 2가지 이상 제공하는지 확인하였는가?

단일 포인터 입력 [유지]

요약 설명
다중 포인트 동작 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 합니다.
스와이프·핀치 등 복잡한 제스처만으로만 기능에 접근하면, 한 손 조작·보조 입력·떨림 등으로 어려움을 겪는 사용자가 배제될 수 있습니다. 단일 탭·클릭 등으로 동등하게 조작할 수 있는 대안을 제공합니다.

WCAG 2.2 Guidelines : 2.5.1 Pointer Gestures

필요성

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

제공 방법

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

예시

네이티브 앱 예시(Android)

									<!-- 터치 가능한 버튼 (네이티브) -->
									<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" />

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

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

검수 방법

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

포인터 입력 취소 [신규]

요약 설명
포인터 입력으로 실행되는 동작은 취소/되돌리기 수단을 제공해야 합니다.

WCAG 2.2 Guidelines : 2.5.2 Pointer Cancellation

필요성

오탭/오클릭으로 인한 실수를 줄입니다.

제공 방법

업 이벤트에서 확정하거나 실행 후 되돌리기(Undo)를 제공합니다.

예시

하이브리드 앱 예시 (JavaScript)

									deleteButton.addEventListener('click', () => {
										deleteItem();
										showUndoToast('삭제되었습니다.', () => restoreItem());
									});

Vue 예시

									<button @click="removeWithUndo">삭제</button>

React 예시

									<button onClick={removeWithUndo}>삭제</button>

검수 방법

실행 취소 또는 확인 단계가 제공되는지 확인하였는가?

네임 안의 레이블 [신규]

요약 설명
시각적 레이블이 있는 요소의 접근 가능한 이름에는 해당 레이블 텍스트가 포함되어야 합니다.

WCAG 2.2 Guidelines : 2.5.3 Label in Name

필요성

음성 명령 사용자가 보이는 레이블로 정확히 조작할 수 있습니다.

제공 방법

화면 텍스트와 접근성 이름을 일치 또는 포함 관계로 제공합니다.

예시

하이브리드 앱 예시 (HTML)

									<!-- 잘못된 예시: 시각 레이블(검색)과 접근 가능한 이름이 다름 -->
									<button aria-label="조회 실행">검색</button>

									<!-- 올바른 예시: 접근 가능한 이름에 시각 레이블 텍스트 포함 -->
									<button aria-label="검색 실행">검색</button>

Vue 예시

									<button aria-label="검색 실행">검색</button>

React 예시

									<button aria-label="검색 실행">검색</button>

검수 방법

시각적 레이블 문구가 접근 가능한 이름에 포함되는지 확인하였는가?

동작기반 작동 [신규]

요약 설명
기기 흔들기·기울이기 등 동작 기반 기능은 UI 대체 수단을 제공해야 합니다.

WCAG 2.2 Guidelines : 2.5.4 Motion Actuation

필요성

모션 사용이 어려운 사용자도 동일 기능을 사용할 수 있습니다.

제공 방법

같은 기능을 버튼/토글로 제공하고 모션 트리거를 비활성화 가능하게 합니다.

예시

하이브리드 앱 예시 (HTML)

									<!-- 흔들기(모션) 기능과 동일한 기능을 버튼으로 제공 -->
									<button type="button" id="undoBtn">실행 취소</button>
									<script>
										document.getElementById('undoBtn').addEventListener('click', undoLastAction);
									</script>

Vue 예시

									<button @click="undoLastAction">실행 취소</button>

React 예시

									<button onClick={undoLastAction}>실행 취소</button>

검수 방법

모션 없이 동일 기능을 수행할 수 있는 대체 UI가 있는지 확인하였는가?