iOS VoiceOver trait 기능 활용하기 1부
안녕하세요, 엔비전스입니다.
Html semantic markup과 관련된 아티클을 통하여 웹페이지에서 각 요소가 의미하는 바를 정확하게 알 수 있도록 마크업하는 것이 중요함을 링크한 글을 통해 언급했었습니다. 해당 글에서 웹페이지의 경우 표준 html 컨트롤 사용을 권장하며 부득이 커스텀 컨트롤을 사용하는 경우 WAI-ARIA의 롤을 통하여 각 요소의 의미를 명확하게 알려주도록 권하고 있습니다.
이러한 원칙은 웹페이지뿐만 아니라 모바일 애플리케이션에서도 동일하게 적용됩니다. 버튼, 체크박스, 검색 필드와 같이 컨트롤 설명 레이블 뒤에 출력되는 컨트롤 타입을 통하여 스크린리더 사용자는 그 객체가 가지는 의미를 파악하고 컨트롤 타입에 맞게 적절히 사용할 수 있기 때문입니다. 그러나 웹페이지에서도 html 표준 컨트롤을 사용해서 모든 적절한 컨트롤을 표현하는데 한계가 있듯이 iOS에서도 마찬가지입니다. 버튼 컨트롤을 사용해서 만든 요소가 사파리 웹페이지로 연결이 되거나 이미지로 표현된 객체가 실행할 수 있는 속성도 포함하는 경우가 그 예입니다.
Trait란
Trait란 VoiceOver가 인식하는 컨트롤 타입을 임의로 지정해주는 기능입니다. 즉 WAI-ARIA의 Role과 유사합니다. 나아가 이것은 단순히 VoiceOver에게 특정 요소의 컨트롤 타입을 지정해 주는 것뿐만 아니라 보이스오버의 동작에까지 영향을 줍니다. 이러한 trait를 잘만 활용하면 애플리케이션의 여러 요소들이 가지는 의미나 기능을 명확하게 스크린리더 유저에게 전달해줄 수 있습니다. 다만 이러한 trait를 잘못 사용하면 의도치 않은 오동작이 수행되어 더욱 큰 혼란을 줄수 있습니다.
따라서 이번 아티클에서는 각각의 trait가 가지는 의미에 대해 함께 나누어보도록 하겠습니다.
None (UIAccessibilityTraitNone)
만약 임의의 애플리케이션 요소 중 이미지 요소 또는 버튼과 같은 컨트롤이 있지만 해당 요소 타입을 스크린리더가 인식하지 않도록 할 경우 (UIAccessibilityTraitNone)을 사용합니다. 그러면 이 요소의 레이블 외에는 부여된 속성을 음성출력하지 않습니다. 이 trait는 모든 요소를 제거하는 것이므로 다른 트레이트와 함께 사용할 수 없습니다.
Button (UIAccessibilityTraitButton)
이 Trait는 버튼 컨트롤을 사용하지 않은 속성이 버튼으로 인식되어야 할 때 사용합니다. 커스텀 컨트롤이라 하더라도 버튼 trait를 적용하면 VoiceOver는 해당 요소의 타입을 버튼으로 인식/출력합니다. 버튼은 이벤트를 받을 수 있는 액션이 표함되어야 하므로 액션 이벤트를 가지지 않은 경우에는 버튼 trait가 적절하지 않습니다.
Link (UIAccessibilityTraitLink)
(UIAccessibilityTraitLink)는 사파리 웹 브라우저를 통해 특정 웹 페이지에 접속하도록 동작하는 요소에 사용합니다. 즉 임의의 애플리케이션에 포함된 여러 요소 중 선택했을 때 특정 웹 페이지로 이동하는 요소는 해당 Trait를 사용함으써 VoiceOver가 링크로 인식되도록 해야 합니다.
검색필드 (UIAccessibilityTraitSearchField)
일반적으로 텍스트 필드(입력 창)에는 이메일주소, 성명과 같이 각각의 입력 창의 목적에 적합한 레이블을 명확하게 제공해야 합니다. 그러나 검색어를 입력하는 텍스트 필드에 검색 필드 trait를 적용하면 '검색'이라는 레이블을 삽입하지 않아도 검색어를 입력하는 입력 창임을 VoiceOver가 출력합니다.
Selected (UIAccessibilityTraitSelected)
이 Trait는 탭 영역과 같이 특정 요소가 선택되었음을 표시할때 사용합니다.
Summary Element (UIAccessibilityTraitSummaryElement)
위에서 열거한 Trait와는 달리 summary element는 한 손가락 쓸기 혹은 터치한 상태로 탐색했을 때 이 Trait가 적용된 요소에는 포커스가 위치할 수 없습니다. summary element의 목적은 애플리케이션이 로딩될 때 첫 화면에서 사용자에게 알려주어야 할 내용을 VoiceOver가 자동으로 음성 출력하도록 하는 것입니다. 이 trait는 앱의 첫 화면에서만 사용 가능하며 하나의 view에서 하나의 summaryElement만 적용할 수 있습니다. Facebook 앱을 로딩했을 때 새 알림이 있을 경우 ‘알림, 새 항목 x개’라고 음성출력하는데 이러한 것이 summary trait가 적용된 대표적 예시입니다.
User Interaction Enabled (UIAccessibilityTraitNotEnabled)
현재 액션을 가지고 있는 버튼이 사용불가일 때 사용합니다. 이 trait를 사용하면 보이스오버는 ‘흐리게 표시됨’이라고 음성출력하여 버튼이 활성화되지 않았음을 알려줍니다.
인터페이스 빌더에서는 이 trait가 “User Interaction Enabled”라고 표시되는 반면에 직접 코딩하여 적용할 때에는 UIAccessibilityTraitNotEnabled를 사용합니다. 따라서 인터페이스빌더에서는 해당 항목이 체크해제되어 있어야 이 trait를 적용하는 것이 됩니다.
텍스트나 이중탭해도 액션 자체가 없는 객체에서는 적용하지 않으며 특정 버튼이 조건에 의해 비활성화됨을 알려주어야 할 경우 사용하면 됩니다.
Frequent Updates (UIAccessibilityTraitUpdatesFrequently)
퍼센트가 증가하거나 시간이 증가하는 등 실시간 내용이 업데이트 되는 객체를 보이스오버가 어떻게 다룰 것인가를 적용하는 속성입니다. 이 trait를 적용하지 않으면 콘텐츠는 계속 업데이트 되더라도 보이스오버는 처음 포커스 되었을 때의 값을 계속 음성출력하게 됩니다. 그러면 사용자는 업데이트 되는 내용을 제대로 인지할 수 없습니다. 그러나 이 trait를 적용해주면 포커스를 고정하더라도 콘텐츠가 업데이트되는 내용을 보이스오버가 바로 캐치하여 음성출력하게 됩니다. 시계 > 스톱워치에서 이 속성이 적용된 실재 예시를 확인할 수 있습니다.
지금까지 trait 속성에 대해 함께 살펴보았습니다. 2부에서 이어집니다.