널리

안녕하세요, 엔비전스입니다.

웹페이지를 마크업하면서 접근성을 적용해보신 분들은 아시겠지만 스크린리더마다 지원하는 부분에 차이가 있으나 HTML과 WAI-ARIA 기술을 적절히 활용하면 사용자에게 필요한 부가정보를 충분히 구현할수 있습니다. 그러나 모바일 네이티브앱은 웹페이지에 비해 구현할수 있도록 지원하는 API 기술이 아직 부족한 것이 사실입니다. 예를 들어 iOs 네이티브앱에서는 trait를 사용하여 커스텀 컨트롤도 사용자에게 필요에 따라 버튼, 링크 등으로 인식시켜줄수 있지만 trait로도 확장/축소됨(aria-expanded), 헤딩(머리말)에 특정 레벨을 주어 제목을 계층적으로 이해할수 있게 하는 것(<h3>) 등은 구현할수 없습니다. 이는 당연하게도 모바일 스크린리더가 출현한 시기는 아직 짧기 때문입니다. 그래도 모바일의 경우 운영체제가 업그레이드될 때마다 새로운 접근성 API 기술들이 빠르게 발표되고 있으며 우리는 이러한 기술들에 대해 계속 연구해 나가야 할 것입니다.
이러한 의미에서 이번 아티클에서는 여러 차례에 걸쳐 XML 문법을 중심으로 우선 안드로이드에 접근성을 적용할 때 참고할수 있는 방법에 대해 살펴보도록 하겠습니다.
첫 번째로 살펴볼 주제는 ‘안드로이드에서 labelFor 속성 활용하기’입니다.

Android:labelFor 속성 활용하기

레이블의 중요성은 웹페이지의 폼 요소를 떠올려보면 너무나 쉽게 공감할수 있습니다. 탭키를 눌러 폼 요소를 이동할 경우 스크린리더는 편집창, 체크박스와 같은 인풋 요소가 가리키는 텍스트를 찾아 그 텍스트를 함께 읽어줌으로써 어떠한 것을 입력해야 하는지를 바로 알수 있게 해줍니다. 그런데 이것은 안드로이드에서도 그대로 적용됩니다. 안드로이드에서는 레이아웃 특성에 따라 <EditText>(편집창), <CheckBox>(체크박스) 등의 인풋 요소와 이에 대한 설명 텍스트를 하나의 view에 작성하기도 하지만 상황에 따라서는 인풋 요소와 설명을 가리키는 뷰가 분리되는 경우도 있습니다.

하나의 뷰에 인풋 요소와 설명 텍스트를 포함하는 경우:
<EditText android:hint=”전화번호” android:inputType="phone" />

인풋 요소와 텍스트가 분리된 경우:
<TextView android:text="테스트”>
<EditText android:id="@+id/edit_text"/>

기본적으로 톡백(안드로이드용 스크린리더)으로 콘텐츠를 탐색할 때는 한 손가락 좌 또는 우로 쓸기를 사용하는데 후자의 경우 인풋 요소와 설명을 가리키는 뷰가 두 개의 콘텐츠로 포커스됩니다. 이때 android:labelFor를 적용하지 않으면 다음과 같은 문제가 발생합니다.

1. 여러 개의 인풋 요소와 텍스트가 있을 경우 인풋 요소를 가리키는 텍스트가 포커스된 인풋 요소의 이전 콘텐츠인지 다음 콘텐츠인지 혼란스러울수 있습니다. 이는 인풋 요소가 텍스트보다 먼저 나올 수도 있고 이후에 나올수도 있기 때문입니다.
2. 스크린을 터치한 상태로 편집창과 같은 요소에 바로 포커스할 경우에도 입력해야 하는 텍스트를 바로 확인할수 없습니다.

android:labelFor 속성을 적용하면 웹페이지와 마찬가지로 인풋 요소에 포커스 해도 연결된 레이블에 해당하는 정보를 먼저 읽어주게 됩니다. 따라서 사용자는 입력해야 하는 정보를 더욱 정확하게 인지할수 있습니다. 적용하는 방법은 간단합니다.

1. <EditText> 혹은 <CheckBox>에 id를 부여합니다.
2. 해당 인풋이 가리키는 텍스트 요소 객체에 android:labelFor=”@+id/edit_text” 과 같이 id를 연결합니다.
3. 고정된 XML 레이아웃이 아닌 Java 코드에서 setLabelFor(View labeled) 메서드를 사용할수도 있습니다.