Content Description이란?
Content Description이란 안드로이드의 UI 컴포넌트에 설정되는 UI 컴포넌트를 설명하기 위한 값으로, 사용자와 개발자가 비시각적으로 앱과 소통하기 위해 사용된다. 많은 개발자들이 Content Description을 빈 값으로 설정하거나 null 값으로 설정하는 방식을 취하지만, Content Description을 빈 값으로 설정한다면, 시각적인 소통 외에 앱과 소통할 수 있는 방법이 없어진다. 일반적으로 안드로이드 휴대폰을 사용하는 시각 장애인들은 TalkBack 기능을 사용해 스크린을 읽는데, 이 TalkBack에서 사용하는 것이 바로 이 Content Description 값이다.
Content Description은 단순히 시각 장애인을 위한 것이 아니다. Content Description은 안드로이드의 UI 테스트 시에도 필수적이다. 우리가 안드로이드 UI를 테스트 하기 위해서는, UI 노드를 누르거나 스크롤 하는 등 UI 노드와 상호작용 하는 것이 필요하다. 이런 경우 우리가 원하는 UI를 찾기 위한 방법은 세 가지가 있다. 하나는 UI에 설정된 텍스트 값을 사용해 찾는 것이고, 다른 하나는 UI에 설정된 태그 값을 찾는 것이며, 마지막 하나는 UI에 설정된 Content Description 값을 통해 UI를 찾는 것이다. 하지만, UI에 설정된 텍스트가 없다면 텍스트로는 찾을 수 없으며, UI에 테스트만을 위한 태그를 붙이는 것은 코드의 가독성을 저하하기 때문에 권장되지 않는다. 즉, 가장 유용한 방법이 바로 Content Description을 사용하는 것이다.
Compose에 Content Description 붙이기
Compose에 Content Description을 붙이는 방법은 간단하다. 단순히 Composable의 Modifier에 semantics 속성을 통해 Content Description을 부여하면 된다.
@Composable
fun CirclePauseButton(
modifier: Modifier = Modifier,
...
) {
Box(
modifier = modifier
.semantics {
this.contentDescription = "Circle Pause Button"
}
...
) {
...
}
}그러면 TalkBack 기능이 켜진 체로 화면을 클릭 했을 때 해당 단어가 재생되는 것을 볼 수 있다.
물론 위와 같은 방식으로 직접 String을 넣는 것은 권장되지 않는다. Content Description이 화면을 보지 않고도 앱과 소통할 수 있는 방법이라는 것을 기억하자. 사용자의 기기 언어에 따라 다른 언어로 Content Description이 설정되어야 하며, 더욱 자세히 설명되어야 한다. 따라서, 위와 같은 방식으로 직접 문자열을 넣기 보다는 문자열 xml 파일에 다국어 처리를 해두고 stringResource 함수를 사용해 가져오는 방식을 취하도록 하자.
@Composable
fun CirclePauseButton(
modifier: Modifier = Modifier,
...
) {
Box(
modifier = modifier
.semantics {
this.contentDescription = stringResource(id = R.string.circle_pause_button_content_desctiprion)
}
...
) {
...
}
}
정리
1. Content Description을 붙이는 것은 시각 장애인의 디지털 접근성 향상을 위해 중요하다.
2. Content Description은 화면 없이 앱과 소통할 수 있는 방법을 제공해줘서 안드로이드 UI 테스트 시에도 유용하게 활용된다.
