아티클

안드로이드 접근성을 고려한 XML 마크업 4부, 헤딩

2019-03-28 15:12:28

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

안드로이드 접근성을 고려한 XML 마크업 3부에서는 각 화면 윈도 제목을 톡백이 자동으로 읽어주도록 하는 방법에 대해 함께 생각해 보았습니다. 이번 아티클에서는 한 화면이 여러 영역으로 나누어져 있을 때 영역을 구분할 수 있도록 특정 view를 제목(heading)으로 읽어주도록 하는 방법에 대해 함께 살펴보도록 하겠습니다.

섹션 제목의 중요성

접근성 관점에서 한 화면이 여러 섹션으로 나누어져 있는 경우 적절한 섹션 제목이 제공되지 않거나 제목으로 지정되었다 하더라도 스크린리더가 제목으로 인식할 수 없다면 스크린리더 사용자는 화면 전체의 레이아웃을 파악하기 어렵습니다. 현재 사용자가 탐색하고 있는 객체가 어느 영역에 속해 있는지를 파악하기 어렵기 때문입니다. 그래서 웹접근성 지침에서도 헤딩 태그로 섹션 제목을 지정하는 부분에 대해서는 아주 중요하게 다루고 있으며 스크린리더에서는 여러 제목 요소로 빠르게 이동할 수 있는 단축키를 제공하고 있습니다. 이것은 모바일 네이티브 앱에서도 마찬가지입니다. iOS, android 접근성 API에서는 나름대로의 방법으로 스크린리더가 인식 가능한 섹션 제목을 마크업할 수 있는 방법을 제공하고 있습니다. iOS는 접근성이 운영체제에 들어간 후 비교적 초창기부터 trait를 통하여 특정 view를 제목으로 읽어줄 수 있도록 지원하였으며 안드로이드는 비교적 최근부터 몇 가지 방법을 지원하고 있습니다. 
톡백의 경우 한 손가락 오른쪽 혹은 왼쪽 쓸기 혹은 터치한 상태로 탐색하다가 제목이 있는 요소를 만나면 요소 레이블 뒤에 ‘제목’이라고 음성 출력합니다. 또한 한 손가락 위 또는 아래 쓸기를 통해서 탐색 단위를 제목으로 변경하여 한 손가락 오른쪽 혹은 왼쪽 쓸기 하여 제목이 있는 부분으로 바로 이동할 수도 있습니다.

안드로이드 네이티브 앱에서 섹션 제목 제공 방법

addHeaderView 메서드 사용

안드로이드에서 제공하는 여러 레이아웃 중 ListView, GridView는 필요에 따라 LayoutInflate 클래스를 사용하여 리스트뷰, 혹은 그리드뷰에 대한 제목을 제공할 수 있습니다. 이것은 HTML의 table caption과 같이 눈에 보이는 제목이며 headerView라고 표현하기도 합니다. 이러한 HeaderView를 삽입하여 그리드뷰, 리스트뷰의 제목을 마크업할 경우 해당 헤더를 톡백에서는 제목(헤딩)으로 인식합니다.

ListView, GridView에 header를 삽입하지 않는 경우

일반적으로 ListView, GridView 레이아웃에 header를 삽입하지 않는 경우가 더 많습니다. 한 화면에 한 영역의 리스트뷰나 그리드뷰만 존재하고 리스트뷰나 그리드뷰 제목이 화면 자체 제목과 일치하는 경우에는 스크린리더용 그리드뷰, 혹은 리스트뷰 제목을 부여할 필요가 없지만 한 화면에 여러 레이아웃이 함께 삽입된 경우에는 리스트뷰나 그리드뷰에, 화면에는 보이지 않지만 톡백에서 인식할 수 있는 제목을 제공하는 것이 스크린리더 사용자에게 도움이 될 수 있습니다. 방법은 간단합니다. GridView, ListView 레이아웃 속성 영역에 android:contentDescription을 삽입하면 됩니다. 이렇게 하면 contentDescription을 리스트뷰 혹은 그리드뷰의 제목으로 톡백이 인식하여 그리드뷰나 리스트뷰 영역에 접근했을 때 제목을 읽어주게 되어 레이아웃 파악이 훨씬 쉬워집니다.

accessibilityHeading

제목을 마크업하기 가장 쉬운 방법으로 XML에서 바로 삽입이 가능합니다. 특정 TextView 등이 스크린리더에서 제목으로 인식되어야 할 경우 해당 속성을 사용할 수 있습니다. 값은 true, false이며 java를 사용할 경우에는 setAccessibilityHeading을 사용합니다. 그러나 안드로이드 8.0 이하 버전에서는 해당 속성을 지원하지 못합니다. 

AccessibilityNodeInfo 수정

만약 제목으로 지정하고 싶은 view가 버튼과 같은 역할이 없는 커스텀 view이고 제목과 함께 버튼과 같은 역할(role)을 지정하고 싶은 경우에는 AccessibilityNodeInfo 객체를 만들고 그 안에 setHeading 메서드를 삽입하여 특정 뷰가 헤딩 및 버튼과 같은 요소로 인식되도록 할 수 있습니다. 해당 메서드 또한 안드로이드 9 버전부터 사용이 가능하므로 오레오 버전까지는 호환되지 않습니다.
AccessibilityNodeInfo 객체를 삽입하는 방법에 대해서는 아래 첨부하는 소스코드나 본 시리즈 아티클 2부를 참고해 주십시오.

유의사항

안드로이드에서 제목 요소를 앞에서 언급한 방법으로 제공하지 않고 android:contentDescription을 사용하여 글자로 ‘제목’이라고 삽입하는 경우가 가끔 있습니다. 이렇게 하면 스크린리더로 view에 접근했을 때 ‘제목’이라고 읽어주므로 문제가 없는 것처럼 보입니다. 그러나 해당 요소는 스크린리더에서 제목 요소로 인식한 것이 아니라 화면에 있는 대체 텍스트를 읽은 것이기 때문에 제목 요소 단위로 이동 시에는 대체 텍스트 제목을 제공한 view로는 포커스가 불가능합니다. 따라서 위에서 언급한 방법 중 상황에 맞게 제목 요소를 구현하는 것이 좋습니다.

샘플 앱 테스트 방법

지금까지 안드로이드 네이티브 앱에서 제목을 지정하는 방법에 대해 살펴보았습니다. 아래 샘플 앱을 다운로드해 테스트해 보실 것을 권합니다. 안드로이드 스튜디오 프로그램이 설치되어 있지 않더라도 XML, 혹은 JAVA 파일을 열어 소스코드를 리뷰해볼 수 있습니다. 

 

댓글 0
댓글을 작성하려면 해주세요.