널리

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

‘안드로이드 접근성을 고려한 XML 마크업 5부, 버튼’에서는 안드로이드 플랫폼에서의 버튼의 특징, 버튼을 구현할 때의 몇 가지 주의사항에 대해 살펴보았습니다. 본 아티클에서는 접근성 서비스와 호환되는 버튼을 구현하는 방법에 대해 살펴보도록 하겠습니다.

<button> 태그를 사용하는 경우

웹과 마찬가지로 안드로이드 역시 네이티브 컨트롤을 사용하면 기본적인 접근성을 각 컨트롤이 자체적으로 지원하므로 접근성 관련하여 따로 작업할 것은 없습니다. 따라서 톡백에서는 버튼 태그로 마크업된 ‘버튼’에 포커스하면 ‘버튼’이라고 음성 출력하며 ‘활성화하려면 이중 탭 하세요’라는 힌트 메시지 또한 함께 음성출력합니다(힌트 읽기를 On으로 설정한 경우).

다만 버튼 텍스트가 setText 메서드를 사용하여 ‘재생/일시정지’와 같이 이중 탭 할 때마다 텍스트가 변경되도록 구현한 경우 현재까지는 변경되는 텍스트 내용을 톡백에서 이중 탭 할 때마다 바로바로 읽어주지 못하는 문제가 있습니다. 즉 스크린리더 포커스를 다른 곳으로 이동했다가 ‘재생’과 같은 버튼을 포커스 해야만 바뀐 텍스트 내용을 읽어주는 것입니다. 기본적으로 특정 객체를 이중 탭 할 때 그 요소의 텍스트가 변경될 경우에는 안드로이드 접근성 API에서 접근성 이벤트가 발생하게 되어 변경된 텍스트를 읽도록 구현되어 있으나 버튼의 경우에는 이 기능이 제대로 동작하지 않기 때문에 발생하는 이슈입니다. 따라서 버튼의 텍스트가 바뀌는 경우에는 접근성 이벤트를 수동으로 추가해 주어야 합니다. 접근성 관련 이벤트에 대해서는 이후 자세하게 다루겠지만 여기서 추가해야 하는 이벤트는 sendAccessibility(AccessibilityEvent. TYPE_VIEW_SELECTED) 메서드입니다. 이 메서드를 버튼을 이 중 탭 할 때마다 작동하도록 추가하면 이중 탭 하여 버튼 텍스트가 변경될 때마다 변경된 텍스트를 자동으로 읽어주게 됩니다.

또한 버튼 태그는 이미지 버튼이 아님에도 필요에 따라 contentDescription을 통한 대체 텍스트를 삽입할 수 있습니다. 버튼의 텍스트가 스크린리더 사용자가 이해하기에는 다소 어려움이 있다 판단될 경우 대체 텍스트를 통하여 이를 보충 설명할 수 있으며 이 경우 화면에 있는 버튼 텍스트는 무시됩니다.

<ImageView> 태그를 사용하는 경우

기본적으로 이미지 뷰는 텍스트 뷰와 마찬가지로 버튼의 성격을 가지고 있지 않습니다. 또한 이미지 뷰의 경우 대체 텍스트를 삽입하지 않으면 HTML에서 alt=”” 속성은 스크린리더에서 이미지 자체를 인식하지 않듯이 톡백에서도 해당 이미지에는 포커스 되지 않습니다. 그러나 이미지뷰에 onClick 속성이 삽입되면 버튼 태그를 쓰지 않아도 톡백에서는 해당 이미지뷰를 ‘버튼’으로 인식합니다(자세한 예는 샘플 프로젝트 참조). 또한 onClick 속성이 삽입되었기 때문에 하드웨어 키보드 접근성도 보장되어 탭키로 이미지뷰에 접근되며 엔터나 스페이스로 실행할 수 있습니다.

<ImageButton> 태그

이미지 버튼은 버튼에 대한 텍스트를 텍스트가 아닌 이미지로 삽입한다는 것 외에는 버튼 태그와 특징이 같습니다. 다만 버튼 태그와 달리 이미지 뷰나 이미지 버튼은 이중 탭 할 때마다 이미지가 변경되는 경우 각 이미지에 대한 대체 텍스트만 잘 삽입해 주면 접근성 이벤트를 따로 삽입하지 않더라도 이중 탭 할 때마다 변경되는 대체 텍스트를 바로바로 음성 출력합니다.

AccessibilityNodeInfo setClassName 사용

텍스트 뷰에 온클릭 속성을 사용한 객체나 커스텀 컨트롤을 톡백이 ‘버튼’으로 음성 출력하게 하려면 AccessibilityNodeInfo 객체 생성 후 클래스 네임을 버튼으로 변경해 주어야 합니다. 이것은 HTML에서의 role=”button” 적용과 유사한 방법이며 ‘버튼’으로 음성 발화만 하게 할 뿐 관련 클릭 이벤트 등은 컨트롤을 구현할 때 직접 추가해 주어야 합니다. 위에서 언급한 것처럼 onClick 메서드는 onClick 속성 자체에 클릭 이벤트와 키보드 이벤트가 들어가 있으므로 AccessibilityNodeInfo 내에서 클래스 네임만 버튼으로 변경해 주는 것만으로 구현이 가능하지만 onTouchListener와 같이 클릭 이벤트가 없는 메서드를 사용할 경우에는 onKeyListener를 사용한 키보드 이벤트, AccessibilityNodeInfo 객체에 클릭 이벤트 삽입, android:focusable=”true” 추가 등의 많은 추가작업이 필요합니다.

지금까지 접근성을 적용한 여러 버튼 구현 방법에 대해 살펴보았습니다. 아래에 설명하는 부록 프로젝트를 다운받아 소스코드를 함께 참고할 수 있습니다.

부록: 여러 가지 버튼

아래 첨부해 드리는 안드로이드 프로젝트를 빌드하면 6개의 버튼이 있습니다.

1. onTouchListener 메서드를 이미지 뷰에 사용하고 접근성 구현을 위해 setClassName, setClickable=”true”, onKeyListener 메서드를 추가한 버튼.
2. 이미지 뷰에 온크릭 메서드를 사용한 버튼.
3. 이미지 버튼 태그를 사용한 버튼.
4. 텍스트 뷰에 온클릭 메서드를 추가하고 AccessibilityNodeInfo 객체를 생성한 버튼.
5. 버튼 태그를 사용한 버튼: 이중 탭 할 때마다 햄버거 주문 완료, 주문 취소 텍스트가 변경되며 sendAccessibilityEvent 메서드가 사용되어 있습니다.
6. 같은 버튼 태그이지만 텍스트가 화면에 있는 텍스트와 달리 대체 텍스트로 들어가 있습니다. 따라서 화면 상으로 표시되는 텍스트와 톡백이 음성 발화하는 텍스트가 다릅니다.

소스코드 다운로드

Apk 다운로드(안드로이드 오레오 이상 버전에서 동작함)