Accessibility 본문

2.1 초점 이동

모든 객체에는 초점(focus)이 적용되고, 초점은 차례대로 이동되어야 한다.

필요성

초점이 적용되지 않으면 모바일 기기나 모바일 화면낭독 프로그램에서 제공하는 음성 읽기 기능 등을 활용하는 경우의 사용자는 정보를 얻거나 기능을 실행할 수 없는 문제가 발생한다. 또한, 차례대로 이동되지 않을 때에는 시각장애인, 지적장애인 등이 해당 애플리케이션의 기능과 정보의 이해에 어려움이 발생할 수 있다.

대상

모두

적용기술

iOS

Accessibility 속성이 활성화(Enabled)될 때만 해당 객체에 초점이 적용된다. 의미를 포함하는 이미지를 ImageView UI 컴포넌트를 활용하여 제공할 때 Accessibility 속성을 활성화 시켜야 하며, 대체 텍스트를 label 속성으로 반드시 제공해야 한다.

  • Accessibility 속성을 반드시 활성화 시킨다.
  • Interface Builder 이용
    [houseButton  setIsAccessibilityElement:NO]; //초점 비활성화 메서드
    [houseButton  setIsAccessibilityElement:YES]; //초점 활성화 메서드 
  • Accessibility 속성이 기본값으로 활성화되어 있지 않은 객체

    View, Scroll View, Web View, Map View, Ad Banner View, Custom UI Component 등은 기본값으로 Accessibility 속성의 Enable 값이 NO로 되어 있으므로 사용 시 YES로 변경해 주어야 한다. (Interface Builder에서 Enable란 체크)

  • 뷰가 전환되어 사용하지 않는 컨트롤러 혹은 객체들은 기존 뷰에서 제거하거나, hidden 속성을 yes로 바꾼다. <
    [houseButton  removeFromSuperview]; //객체를 뷰에서 제거하는 메서드
    [houseButton  setHidden:YES]; //객체를 뷰에서 숨기는 메서드
Android

안드로이드에서 제공하는 기본 사용자 인터페이스 컴포넌트(Native UI Component)에서는 iOS와 달리 대부분의 기본값이 비활성화(false)되어 제공된다. 그러므로 초점 이동이 필요한 UI는 반드시 focusable 속성을 활성화(true)해 제공해야 한다.

모든 객체에 ContentDescription 속성을 주어 해당 객체에 대한 설명을 TalkBack 음성으로 제공될 수 있도록 함
UI 레이아웃 XML 예제 <
<Button android:text="Button"
    android:id="@+id/buttonSearch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="검색버튼"
    android:focusable="true"
    android:nextFocusDown="@id/buttonDn"
    android:nextFocusLeft="@id/buttonLeft"
    android:nextFocusRight="@id/buttonRight"
    android:nextFocusUp="@id/buttonUp">
    <requestfocus/>
</Button>
자바 코드 예제 <
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mButton = (Button)findViewById(R.id.buttonSearch);
        //View 설명
        mButton.setContentDescription("검색버튼");
        //View 초점 적용
        mButton.setFocusable(true);
        //View 초점 방향 설정
        mButton.setNextFocusDownId(R.id.buttonDn);
        mButton.setNextFocusUpId(R.id.buttonUp);
        mButton.setNextFocusRightId(R.id.buttonRight);
        mButton.setNextFocusLeftId(R.id.buttonLeft);
    }

JAVA 코드를 이용하면 동적인 설정도 가능함

JAVA 코드에서 View의 다음 초점을 지정할 때 ID를 지정하기 어려우면, View의 자동 할당되는 ID인 NO_ID 값을 이용하여 Focus ID로 사용할 수 있음

예제 코드 실행 전과 후 결과 비교
초점 방향 개선 전
초점 방향에 대한 설정 전 우측 가장자리 뷰에서 오른쪽 방향 버튼 입력 시 무반응
초점 방향 개선 전
초점 방향 개선 후
초점 방향에 대한 설정 후 모든 뷰에 대한 순차적 초점 적용 가능
초점 방향 개선 후 1
초점 방향 개선 후 2

검사방법 및 QA 지표 산정방법

모든 객체에 초점이 제공되고 제공된 초점은 논리적인 순서로 제공되었는가?

iOS
  • 보이스 오버 사용법 중 두 손가락으로 위로 쓸어 넘기기(화면 상단의 내용부터 읽어줌) 기능을 활용하여 모든 객체에 초점이 적용되는지 체크
  • 초점이 논리적인 순서로 이동되는지 체크
  • 터치하여 탐색을 통해 초점 영역에 문제가 없는지 체크
  • 보이스 오버 사용법 중 살짝 누르기(항목을 말해줌) 탐색을 통해 초점 영역 체크
Android

터치하여 탐색(Explore by touch)을 통해 초점이 적용되는지 체크

ICS 버전에서는 초점을 차례대로 이동하여 탐색하는 방법을 제공하고 있지 않음

오류수(건)
  • 초점이 제공되지 않은 객체 수
  • 초점이 논리적인 순서로 제공되지 않은 경우 수 (ICS)
  • 초점의 영역이 화면과 다른 경우 수

사례

오류사례

홈, 검색, 5분 등 각 항목에 초점이 적용되지 않아 이용할 수 없음

오류사례이미지 1
개선방법

모든 객체에 Accessibility 항목을 Enabled(활성화) 시킨다.

오류사례

접근성 도구를 사용하였을 때 지도 영역 내 버튼요소들로 접근할 수 없음

오류사례이미지 2
우수사례

객체에 초점이 올바르게 적용된 경우

우수사례이미지