안드로이드 접근성을 고려한 XML 마크업 2부, android:hint
Webacc NV
2019-02-07 11:26:20
안녕하세요,엔비전스입니다.
안드로이드 접근성을 고려한 XML 마크업 1부에서는 labelFor 속성에 대해 함께 살펴보았습니다.
이번 아티클에서는 EditText에 접근성 적용시 유의할 사항에 대해 알아보도록 하겠습니다.
기본 원칙
- EditText 뷰는 톡백에서 수정창이라고 음성 출력합니다. 즉 무언가를 입력할 수 있는 편집창을 말합니다.
- 톡백을 이용하여 편집창에 포커스 했을 때 반드시 입력해야 하는 내용(레이블)을 읽어 주어야 합니다. 편집창이 활성화 되지 않은 상태에서 ‘xx’라는 레이블이 android:hint로 선언되어 있는 경우 편집창에 포커스 하면 ‘xx 수정창’이라고 읽어줍니다. 편집창이 활성화 되어 무언가를 입력할 수 있는 상황이 되었고 ‘xx’라는 android:hint 레이블은 있지만 아무런 값이 입력되지 않은 상태라면 ‘수정, xx, 수정창’이라고 출력합니다. 여기서 앞의 ‘수정’은 현재 편집중이라는 것을 의미합니다. 만약 해당 편집창에 ‘yy’와 같은 값을 입력하였고 레이블도 삽입되어 있다면 ‘수정, yy 수정창, xx’와 같이 음성 출력합니다.
- 안드로이드는 편집창에 레이블을 제공할때 android:hint 속성을 사용하거나 1부 아티클에서 다룬 바와 같이 편집창의 레이블이 다른 뷰와 연결되어 있는 경우에는 labelFor를 사용합니다.
- 입력 서식의 레이블을 화면에서 보이지 않게 제공해야 할 경우 AccessibilityNodeInfo 클래스를 사용하여 힌트 텍스트를 삽입할 수 있습니다.
- 시각적으로는 편집창의 레이블이 무언가를 입력하면 사라지지만 톡백에서는 android Oreo 이상부터는 무언가를 입력해도 힌트 텍스트를 함께 읽어주게 됩니다
- 화면에 보여지는 힌트 텍스트와 톡백 스크린리더에서 읽어주는 텍스트 레이블을 다르게 지정할 수는 없습니다.
- 톡백에서는 편집창이 활성화된 상태에서 로컬 컨텍스트 메뉴 제스처(기본적으로 위 오른쪽 연속 쓸기)를 사용하면 편집에 필요한 선택 및 복사, 잘라 내기를 이용할 수 있으며 ‘옵션 수정’이라는 메뉴를 표시합니다.
- TextInputLayout 위젯을 사용하는 경우에는 인풋의 하위 요소인 EditText에 android:hint를 추가하더라도 톡백에서 힌트 텍스트와 편집창 요소를 포커스 분리하여 처리하게 되므로 접근성을 준수하기 위해서는 labelFor 속성을 사용하여 편집창과 힌트 텍스트 뷰를 연결해 주어야 합니다.
- 이미지뷰나 이미지 버튼 등에 설명을 제공할 수 있는 contentDescription(대체 텍스트)은 편집창의 레이블 적용으로는 적절하지 않습니다.
- EditText 내에 한 줄, 여러 줄, 전화번호, 비밀번호 등의 인풋 타입을 지정할 수 있는데 톡백에서는 비밀번호 타입 외의 다른 인풋 타입은 다르게 구분하지 못합니다.
아래 섹션을 통하여 조금 더 자세히 살펴보겠습니다.
편집창 레이블에 contentDescription을 사용하지 못하는 이유
위에서 설명한 바와 같이 XML 혹은 java에서 편집 요소에 android:hint를 삽입하면 특별한 접근성 설정 없이 톡백에서는 해당 편집창에 포커스 했을 때 레이블을 읽어줍니다.
앱 개발 시 흔히 하는 실수 중 하나가 레이블을 선언할 때 contentDescription을 사용하는 것입니다. 앞에서 설명한 것처럼 해당 속성은 입력 서식에서의 레이블 제공이 아닌 버튼과 같은 객체에 레이블을 제공하는 것이므로 편집창에 사용하게 되면 안드로이드 접근성 API에서 편집창으로 인식하지 못하여 블록 복사나 잘라 내기 등의 옵션수정 메뉴를 사용할 수 없게 됩니다. 또한 편집창에서 글자 단위 혹은 단어 단위로 이동 시에 이동되는 커서의 글자를 제대로 읽어주지 못합니다. 따라서 편집창에는 contentDescription을 사용하지 않도록 합니다.
AccessibilityNodeInfo 사용하기
화면상으로는 편집창의 레이블이 제공되지 않은 경우 AccessibilityNodeInfo 클래스를 사용하여 접근성 노드 안에 힌트 텍스트를 삽입할 수 있습니다. 이것은 HTML의 aria-label 속성을 사용하는 것과 비슷합니다. 방법은 다음과 같습니다.
- XML 레이아웃 파일에서 접근성 노드 객체를 삽입할 편집 영역 EditText에 ID를 정의합니다. 예: android:id="@+id/text3"
- XML과 연결된 java 파일에서 접근성 노드를 수정하기 위한 다음 두 클래스를 가져옵니다. 예: import android.view.accessibility.AccessibilityNodeInfo; import android.view.View.AccessibilityDelegate;
- 1번에서 지정한 view의 접근성 노드를 수정하려면 접근성 노드를 수정할 수 있도록 AccessibilityDelegate 클래스가 필요하며 이 클래스로 객체를 생성합니다. 예: text3 = (EditText) findViewById(R.id.text3); text3.setAccessibilityDelegate(new AccessibilityDelegate() {
- 위에서 만든 객체에 해당 편집창 뷰가 가진 정보를 사용하여 다음과 같이 접근성 노드를 초기화 합니다. public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfo info) {
- 상위 접근성 노드를 가져옵니다. super.onInitializeAccessibilityNodeInfo(host, info);
- 이제 접근성 노드의 특정 정보를 수정하거나 추가할 준비가 되었습니다. 우리는 해당 편집창 호스트 뷰에 없는 힌트 텍스트를 추가할 것이므로 다음과 같이 힌트 텍스트를 추가합니다. 예: info.setHintText("Type your age");
해당 앱을 빌드해서 톡백으로 확인해 보면 화면에서는 보이지 않지만 힌트 텍스트를 톡백에서 읽어줄 뿐만 아니라 로컬 컨텍스트 메뉴에서 편집 작업 또한 할 수 있음을 확인할 수 있습니다.
이상으로 안드로이드 힌트 텍스트 삽입에 대해 알아보았습니다. 독자의 이해를 돕기 위해 아래에 샘플 프로젝트와 APK 파일을 공유합니다. APK 파일은 안드로이드 Oreo 버전 이상에서 설치 가능하며 하위 버전을 사용하신다면 안드로이드 스튜디오 등에서 빌드 설정을 수정해 주어야 합니다.
조회수4967