널리

안녕하세요, 엔비전스입니다. 접근성 진단 혹은 실 사용을 하면서 겪게 되는 여러 이슈 중 하나가 의도치 않은 접근성 초점 처리일 것입니다. HTML은 구현한 레이아웃에 전혀 영향을 받지 않고 무조건 DOM 순서대로 접근성 초점이 이동하지만 네이티브 앱의 경우에는 플랫폼마다 영향을 받는 정도는 다르지만 레이아웃 배치가 접근성 초점에 영향을 주기 때문입니다.

그래서 각 플랫폼 API에서는 접근성 초점의 순서를 필요 시 강제로 재조정할 수 있는 방법을 제공해 왔는데 jetpack compose의 경우에는 생각보다는 해당 API가 조금 늦게 배포된 감이 있습니다. jetpack compose 1.5 버전부터 새로 추가된 isTraversalGroup, traversalIndex semantics 두 속성이 바로 접근성 초점을 변경할 때 사용하는 코드입니다. 따라서 본 문서에서는 jetpack compose에서 접근성 초점을 재조정하는 방법에 대해 살펴보겠습니다.

참고: isTraversalGroup, traversalIndex를 활용한 예제 앱을 만들어 포럼 팁에 게시하였습니다. 필요시 함께 활용해 보시기 바랍니다.

isTraversalGroup

isTraversalGroup을 사용하는 목적은 레이아웃의 방향 축(axis)으로 순서대로 탐색하게 할 때 사용합니다. 기본적으로 접근성 초점을 강제로 변경하지 않는 한, TalkBack의 초점은 레이아웃과는 관계없이 왼쪽에서 오른쪽, 위에서 아래로 흘러갑니다.

예를 들어서, 목록을 만들 때, 상위 뷰는 Row이고, 항목은 Column인 레이아웃이 있습니다. 항목 안에는 텍스트 두 개를 넣는 구조라고 가정해봅시다. 상위 뷰는 Row이기 때문에 각 항목인 Column을 가로로 배치할 겁니다. 그리고, Column 안에는 세로로 두 개의 텍스트를 배치합니다. 우리는 Column 안에 있는 텍스트 두개를 모두 읽고 다음 Column으로 이동할 것이라고 예상하고 이렇게 배치했지만, Android는 무조건 가로로 먼저 탐색하고, 세로로 탐색하므로, 각 Column의 첫번째 텍스트끼리 한 줄로 읽고, 두번째 텍스트끼리 한 줄로 읽게 됩니다.

이럴 때, 각 Column에 semantics modifier를 설정하고 그 안에서 isTraversalGroup true로 설정하면 레이아웃이 어떤 식으로 배치 되었든지 간에 무조건 해당 레이아웃의 진행방향 순서로 콘텐츠를 처음부터 끝까지 탐색하고 나서 다음 레이아웃으로 넘어가게 됩니다. 따라서, 콘텐츠가 레이아웃의 진행 순서대로 탐색되지 않고, 레이아웃 사이를 왔다 갔다 하며 콘텐츠가 탐색되어 내용을 읽는 순서가 바르지 못할 때 레이아웃에 isTraversalGroup=true 속성을 주면 됩니다.

isTraversalIndex

초점 순서가 레이아웃 사이를 왔다 갔다 하는 오류는 없으나 특정 레이아웃 안에서 혹은 레이아웃끼리의 초점 순서가 틀어지는 경우가 있습니다. 두 개의 레이아웃이 스크롤되면서 많이 중첩되는 경우가 대표적입니다. 이때 사용할 수 있는 것이 바로 traversalIndex입니다.

위에서 공유한 포럼 팁에서 사용한 예시는 시계 레이아웃입니다. 시계 레이아웃은 원이고 12시부터 11시까지 시간이 표시되어 있습니다. 저는 접근성 초점 순서가 12시부터 1시, 2시와 같은 순서로 이동하기를 원했지만 접근성 초점 순서를 재조정하지 않았을 때에는 가장 왼쪽 상단의 10시부터 초점이 시작되었습니다.

그래서 각 시간 레이아웃 Box에 isTraversalGroup true,, traversalIndex는 0f부터 11f까지 설정했고 접근성 초점 순서는 12시부터 순서대로 이동되는 것을 확인할 수 있었습니다.

아래는 traversalIndex 속성 사용 시 참고해야 하는 특징입니다.

• 초점을 재조정하는 요소가 Text, Button과 같이 접근성 초점이 정확하게 포커스 되는 경우 해당 요소들이 있는 상위 레이아웃에만 isTraversalGroup true로 설정하고 하위에는 traversalIndex 속성만 float 형태로 추가하면 됩니다.
• 각 요소들의 순서를 재조정할 때 traversalIndex 속성을 접근성 초점이 직접적으로 이동되는 곳 상위의 Box와 같은 레이아웃에 주는 경우에는 해당 레이아웃들은 직접적으로 접근성 초점이 이동되는 곳이 아니기 때문에 반드시 상위 레이아웃에도, 하위 traversalIndex 속성을 주는 각 레이아웃에도 isTraversalGroup true로 설정해야만 합니다.
• 접근성 초점 순서가 특정 레이아웃 하위 요소들 간이 아닌 레이아웃끼리 틀어지는 경우에는 틀어지는 형제 모든 레이아웃들에만 isTraversalGroup true로 설정하고 traversalIndex를 float 형태로 순서를 설정해 주면 됩니다.
• traversalIndex 속성은 반드시 1f부터 시작해야 합니다.

최신 jetpack compose에도 접근성 초점을 재조정할 수 있는 속성이 추가된 것은 늦은 감은 있으나 반가운 일입니다. 상황에 따라서 이러한 속성들을 잘 활용하여 더욱 접근성 좋은 앱이 많아졌으면 좋겠습니다.