안녕하세요, 엔비전스입니다. 꽤 오랜만에 Jetpack Compose 아티클 2부를 작성하게 되었습니다.

지난 1부에서는 대체 텍스트 및 요소 유형, 분리된 초점 합치기에 관한 가장 기본적인 접근성 구현 방법에 대해 공유하였습니다. 이번 시간부터는 주제를 정해서 조금 더 심도 있는 접근성 구현 방법에 대해 살펴보고자 합니다. 2부에서 살펴볼 주제는 알림입니다.

화면 제목

Android View 시스템에서는 fragment를 사용하여 화면을 구성하는 경우도 있지만 기본적으로 각 화면들을 별도의 Activity로 정의합니다. Activity가 변경된다는 것은 화면 전체가 새로운 콘텐츠로 교체된다는 의미입니다.

따라서 각 Activity마다 제목만 잘 정의해 주면 화면 상에 제목 표시 여부와 관계없이 TalkBack에서는 화면 전환 시 Activity에서 정의한 제목을 읽어주었습니다.

그러나 Jetpack Compose에서는 한 Activity 안에 여러 개의 screen composable들을 구현해 놓고, 그것들을 마치 웹에서의 SPA(Single Page Application)처럼 상태에 따라 보이게 하는 것만으로 화면 전환이 가능합니다. 때문에 한 Activity 안에서 화면이 전환되는 경우가 대부분입니다. 따라서 화면 전환에 대한 접근성을 별도로 구현하지 않으면 화면이 전환될 때 전환된 화면에 관한 제목을 직관적으로 파악하기 어려우며, 다른 화면에 접근했는지조차 알기 어려울 수 있습니다.

이때 적용할 수 있는 것이 바로 Semantics modifier 속성 중 하나인 paneTitle 속성입니다. 익숙하죠? View 시스템에서 Fragment에 accessibilityPaneTitle을 적용했던 것과 유사합니다. 이 속성을 각 화면 composable 상위 레이아웃에 적용해 놓으면 그 화면이 나타날 때 Talkback에서 paneTitle에서 정의해 놓은 제목을 자동으로 읽어주게 됩니다. 코드 예시는 [jetpack compose] paneTitle 코드 예시 아티클을 참고합니다.

그럼에도 불구하고 하나의 앱에 view, composable 화면이 혼합된 경우 composable activity에도 정확한 제목을 주는 것은 여전히 중요합니다. 이는 composable 첫 화면이 실행될 때 activity가 변경되면서 Activity에 설정된 레이블을 TalkBack에서 제목으로 처리하기 때문입니다.

변경되는 버튼 텍스트

누를 때마다 텍스트가 바뀌는 경우 일반적으로 요소 유형을 버튼으로 정의합니다. 이때 네이티브 버튼을 사용할 수도 있고 Semantics modifier 속성 중 role = Role.Button을 사용할 수도 있습니다.

문제는 버튼 텍스트가 변경되었을 때 TalkBack에서 이를 읽어주지 못한다는 것입니다. 따라서 스크린 리더 사용자는 특정 버튼을 눌렀을 때 텍스트가 변경된 것을 알기 위해서는 해당 View를 다시 탐색하는 수밖에 없습니다.

이 문제를 해결하기 위해서 우리는 liveRegion 속성을 사용할 수 있습니다. 웹이나 Android View 시스템과 마찬가지로 liveRegion 속성을 적용하면 콘텐츠가 업데이트 될 때마다 자동으로 변경된 텍스트를 읽어주기 때문입니다. 다만 liveRegion을 버튼에 처음부터 추가하게 되면 버튼이 화면에 표시될 때 바로 읽어주게 되므로 클릭 이벤트가 발생한 시점부터 liveRegion 속성을 추가하는 것이 좋습니다. 자세한 내용은 [jetpack compose] 버튼 텍스트가 클릭 시마다 변경될 때 아티클을 참고합니다.

참고:

• 버튼 안에 contentDescription으로 대체 텍스트를 추가하고 버튼 텍스트가 변경될 때 contentDescription 텍스트가 변경되면 이 때는 자동으로 변경되는 텍스트를 읽어줍니다.
• 텍스트는 하나로 고정하고 체크박스나 스위치로 각 조건에 맞는 상태 정보를 제공하면 변경되는 상태 정보만 읽어주게 되므로 사용성이 훨씬 더 향상됩니다.

스크린 리더용 알림 구현

삭제 완료, 목록 갱신됨과 같이 때에 따라 적절한 안내사항을 눈에 보이지 않는 스크린 리더 음성 안내 형태로 전달해야 하는 상황이 있습니다. Android View 시스템에서는 View.announceForAccessibility 속성이 있어서 이를 활용할 수 있었지만 Compose에는 해당 속성이 없습니다.

따라서 안내해야 하는 텍스트를 liveRegion 속성이 적용된 레이아웃에 contentDescription 형태로 화면에 숨긴 채로 표시하고 몇 초 후에 사라지도록 구현하는 것이 현재로서는 최선인 것으로 보입니다.

이러한 적용을 조금 더 손쉽게 할 수 있도록 하기 위해 announceForAccessibility composable을 만들어 업로드 하였으니 [jetpack compose] announceForAccessibility composable 공유 아티클을 참고하여 필요 시 사용하시기 바랍니다.

다음 시간에는 요소 유형 및 상태정보에 대해 조금 더 깊이 살펴보도록 하겠습니다.