모바일 앱 접근성 지침 · 7. 이해의 용이성 · 7.3 입력 도움
7.3.2 레이블
사용자 입력에는 용도를 알 수 있는 레이블을 제공하고, 보조기술이 레이블과 입력 서식의 관계를 인식할 수 있어야 합니다.
KS X 3253:2016
한눈에 보기
- 검사 항목
- 7.3.2 레이블
- 원칙
- 7. 이해의 용이성
- 지침
- 7.3 입력 도움
- 도입
- KS X 3253:2016
요구 사항
사용자 입력은 용도를 이해할 수 있도록 레이블을 제공해야 합니다. 레이블은 입력 서식 근처에 시각적으로 식별할 수 있게 표시하고, 보조기술도 인식할 수 있어야 합니다. 레이블과 입력 서식의 관계를 보조기술에 연결하지 않고 단순 텍스트로만 두면 보조기술은 레이블을 인식할 수 없습니다.
개정 내역: 분리 — 2016판 「7.1 입력 도움」
왜 필요한가요
레이블이 시각적으로 보이면 인지·학습장애인이 정보를 올바르게 입력하는 데 도움이 되고, 보조기술이 관계를 인식하면 화면낭독기 사용자가 입력 서식의 용도를 알 수 있어 잘못된 입력을 막습니다.
도움받는 사용자
- 화면낭독기 사용자
- 인지·학습장애인
- 음성 명령 사용자
적용 방법
플레이스홀더(힌트)만으로 레이블을 대신하지 말고 보이는 레이블을 두며, 레이블을 입력 서식에 연결합니다(폼 접근성 참고).
<TextView android:id="@+id/labelPhone" android:text="휴대폰 번호"
android:labelFor="@id/editPhone" />
<EditText android:id="@+id/editPhone" android:inputType="phone"
android:hint="010-0000-0000" />
<!-- Material: TextInputLayout의 hint가 레이블로 연결됨 -->OutlinedTextField(value = phone, onValueChange = { phone = it }, label = { Text("휴대폰 번호") })phoneField.accessibilityLabel = phoneLabel.text // "휴대폰 번호"
phoneLabel.isAccessibilityElement = false // 중복 낭독 방지(선택)TextField("010-0000-0000", text: $phone)
.accessibilityLabel("휴대폰 번호")
// 또는 LabeledContent("휴대폰 번호") { TextField(...) }TextField(decoration: const InputDecoration(labelText: '휴대폰 번호', hintText: '010-0000-0000'))<Text nativeID="phoneLabel">휴대폰 번호</Text>
<TextInput accessibilityLabelledBy="phoneLabel" accessibilityLabel="휴대폰 번호" keyboardType="phone-pad" />사례
레이블이 연결되지 않은 입력창
TalkBack: "편집 중" (무엇을 입력하는지 알 수 없음)레이블 연결
TalkBack: "휴대폰 번호, 편집 중"자주 하는 실수
- 입력창 옆 텍스트가 레이블로 연결되지 않아 “편집 중”만 낭독됩니다.
- 플레이스홀더만 있어 입력을 시작하면 무엇을 입력하는지 사라집니다.
- 체크박스·스위치가 옆 텍스트와 분리되어 각각 따로 읽힙니다.
검사 방법
- Android에서 TalkBack을 켜고 한 손가락 오른쪽/왼쪽 쓸기로 화면의 모든 요소를 차례로 탐색하며 낭독 내용을 확인합니다.
- iOS에서 VoiceOver를 켜고 오른쪽/왼쪽 쓸기로 모든 요소를 탐색하며 낭독 내용을 확인합니다.
- 모든 입력 서식(텍스트 입력, 체크박스, 라디오, 스위치, 선택 목록)에 초점을 두었을 때 용도가 낭독되는지 확인합니다.
- 화면에도 레이블이 보이는지(입력 중에도 사라지지 않는지) 확인합니다.