본문 바로가기

App Accessibility

linkageLab x kakao

검사항목 2.1 초점 이동

의미와 기능이 있는 모든 객체에는 초점(focus)이 적용되어야 하고, 초점은 논리적인 순서로 이동되어야 한다.

필요성

장애인 보조기술(화면낭독 프로그램 등)로 애플리케이션에 접근했을 때 의미와 기능이 있는 모든 객체에는 초점이 적용되어야 한다. 초점이 적용되지 않으면 화면낭독 프로그램을 사용하는 시각장애인은 객체에 대한 정보를 얻거나 기능을 실행할 수 없는 문제가 발생한다. 또한 초점의 이동 순서가 논리적이지 않으면 화면의 구조를 시각적으로 인식할 수 없는 시각장애인은 해당 애플리케이션의 구조 및 콘텐츠의 논리적인 관계를 이해할 수 없게 된다.

모바일 보조기구(포인팅, 객체 이동 등)를 사용하는 지체장애인은 객체에 초점이 적용되지 않으면 보조기기를 사용해서 접근하거나 기능을 실행하는 것이 불가능하다. 만약 초점이 논리적으로 이동하지 않는다면 다음 초점의 이동위치를 예상할 수 없어서 애플리케이션을 정상적으로 운용하는 것이 불가능하다.

대상

  • 시각장애 (전맹)
  • 지체장애

체크리스트

  • 초점이 적용되지 않거나 의미없는 콘텐츠에 초점이 적용되고 있는지 확인
  • 표시되는 초점의 영역이 콘텐츠의 위치나 크기와 다르게 표시되는 경우는 없는지 확인
  • 초점의 이동순서가 논리적이지 않으며 일관성 없이 이동되는 경우는 없는지 확인
  • 하나의 의미임에도 초점 분리된 경우는 없는지 확인
  • 여러 기능이 하나의 초점으로 합쳐진 경우는 없는지 확인

기기별 테스트 방법

iOS
  1. 보이스 오버 사용법 중 두 손가락으로 위로 쓸기(화면의 처음부터 읽어줌) 기능을 활용하여 객체에 초점이 적용되는지 확인한다.
  2. 한 손가락 좌/우 쓸기 제스처를 이용하여 초점이 논리적인 순서로 이동되는지 확인한다.
  3. 터치하여 탐색을 통해 초점 영역에 문제가 없는지 확인한다.

주의사항

  • iOS의 경우, 로터를 통해 기능을 요약하는 경우가 있으므로, 필히 로터를 실행하여 확인하여야 함 (예, youtube 앱)
  • 초점이 제공되지 않더라도 로터를 통해 동등한 기능을 이용할 수 있다면 준수
Android
  1. 톡백(talkback)의 기능 중 “ㄴ” 자 제스처를 그려서 글로벌 컨텍스트 메뉴를 호출하고 “맨 위부터 읽기” 기능을 실행해서 객체에 초점이 적용되는지 확인한다.
  2. 한 손가락 좌/우 쓸기 제스처를 이용하여 초점이 논리적인 순서로 이동되는지 확인한다.
  3. 터치하여 탐색을 통해 초점 영역에 문제가 없는지 확인한다.

QA 지표

오류 수

  • 의미나 기능이 있지만 초점이 적용되지 않은 객체 수
  • 초점의 이동 순서가 논리적인 순서 또는 콘텐츠의 흐름에 따라 이동하지 않는 경우 수
  • 활성화된 콘텐츠와 무관하거나 가려진 영역에 초점이 적용된 수
  • 객체의 초점 영역이 디자인된 영역과 전혀 다른 객체 수
  • 초점이 이동할 때 콘텐츠 흐름과 무관하게 화면이 스크롤되는 경우 수

적용기술

공통

  • 의미와 기능이 있는 모든 객체에는 보조기술의 초점으로 접근할 수 있어야 한다.
  • 초점의 이동 순서는 논리적인 순서 또는 콘텐츠의 흐름에 따라 진행되어야 한다.
    • 사용자의 조작으로 새로운 영역이 활성화되거나 안내 메시지가 나타났을 때, 다음 초점이동은 새롭게 나타난 콘텐츠 영역으로 진행되어야 한다.
  • 현재 활성화된 콘텐츠와 무관하거나 가려진 콘텐츠에는 초점이 적용되어서는 안된다.
  • 동일한 기능을 하는 객체가 인접해 있을 경우 하나의 객체로 통합하는 것이 바람직하다. 이를 통해 불필요한 초점이동(음성출력)을 줄일 수 있고, 터치 영역을 보다 넓게 확보할 수 있다.
    • 예) 이미지 버튼과 아래 설명 텍스트를 같이 사용할 경우
      하나의 객체로 통합하여 이미지와 텍스트가 같이 접근되도록 하는 것이 바람직하다. (경우에 따라 버튼에만 초점을 가지게 하고 텍스트에는 초점을 없애서 하나의 객체에만 접근되도록 할 수 있다.)
  • 화면낭독프로그램의 초점영역과 실제 콘텐츠의 영역이 상이하지 않아야 한다.

iOS

초점 적용 방법

각 객체의 Accessibility 속성을 통해 해당 객체에 초점을 제어 할 수 있다.

[houseButton setIsAccessibilityElement:YES]; //초점 활성화 메서드
[houseButton setIsAccessibilityElement:NO]; //초점 비활성화 메서드

Accessibility 속성이 기본값으로 활성화되어 있지 않은 객체

  • 일반적으로 컨테이너 형태의 객체들은 accessibitlity enabled 속성이 해제되어있다. 해당 객체들은 필요한 경우에만 초점을 적용한다.
  • 뷰가 전환(ex.modal View) 되어 사용하지 않는 컨트롤러 혹은 객체들은 기존 뷰에서 초점이 잡히지 않도록 해야 한다.
[View setAccessibilityViewisModal:YES] // 보이스 오버의 초점이 해당 뷰에만 적용되도록 하는 메서드
[Button setAccessibilityElementsHidden:YES]; //보이스 오버의 초점이 적용하지 않도록 하는 메서드
초점 이동법
  • 기본적으로 iOS의 초점은 X, Y 좌표를 기준으로 적용되어 (0.0)에 가장 가까운 부분을 우선적으로 적용된다.
  • 디자인(버튼의 위치)에 따라 초점이 순차적으로 이동이 되지 않을 때는 AccessibilityFrame , UIAccessibilityPostNotification 등을 이용하여 조정이 가능하다.
AccessibilityFrame 이용
// 가로 정렬 기준으로 프레임 사이즈를 조정하여 이동순서를 정리 할때 사용가능. 또는 보이스 오버의 터치 영역을 조정할 때 사용가능.

label11 = [[UILabel alloc]initWithFrame:CGRectMake(110, 345, 100, 80)];
[label11 setText:@"레이블2"];
[label11 setTextColor:[UIColor whiteColor]];
[label11 setTextAlignment:NSTextAlignmentCenter];
[label11 setBackgroundColor:[UIColor grayColor]];
[label11 setAccessibilityFrame:CGRectMake(110, 375, 100, 50)];  // 보이스 오버 활성시에만 해당 위치,사이즈로 프레임 조정
[mainView addSubview:label11];
UIAccessibilityPostNotification 이용
UIAccessibiltiyPostNotification(UIAccessibilityLayoutChangeNotification, self.초점대상id);  // 동일한 뷰 내에서 초점을 이동시킬 때 사용
UIAccessibiltiyPostNotification(UIAccessibilityScreenChangeNotification, self.초점대상id);  // 새로운 뷰가 발생하여 화면이 변경되었을 때를 알려줘야 할 때 사용

Android

초점 제거 방법
  • importantForAccessibility=”no”로 설정하면 초점을 제거할 수 있다.

    현재 안드로이드의 접근성 제공/지원 문서에 제공되어 있는 요소인 focusable 로는 초점(talkback)을 제공하지 않도록 할 수 없다. focusable의 경우 과거 접근성을 위한 디패드에서 적용 되는 요소로 현재는 거의 활용되지 않는다.

type components
설명 해당 객체에 초점 제거
XML 속성 android:importantForAccessibility
JAVA 함수 void setImportantForAccessibility(int mode)

UI 레이아웃 XML 예제

<Button android:text="Button"
	android:id="@+id/buttonSearch"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:contentDescription="검색버튼"
    android:importantForAccessibility="no">
</Button>

자바 코드 예제

Button bt = (Button)findViewById(R.id.button_empty);
bt.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO);

개발 문서 문서 링크