검사항목 1.1 적절한 대체텍스트 제공

텍스트 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 한다.

필요성

모바일 애플리케이션의 콘텐츠를 시각적으로 인식할 수 없는 시각장애인은 모바일 화면낭독 프로그램을 활용해 정보를 인식하고 이용할 수 있다. 화면낭독 프로그램은 객체에 제공된 텍스트 정보를 음성으로 전환해주는 역할을 한다.

만약 텍스트가 아닌 콘텐츠(이미지, 컨트롤 등의 객체)에 대체 가능한 텍스트가 제공되지 않으면 화면낭독 프로그램으로 객체에 접근했을 때 시각장애인은 화면상에 표시된 정보를 전혀 얻을 수 없게 된다. 이렇게 되면 애플리케이션을 전혀 이용할 수 없는 문제가 발생하므로 텍스트가 아닌 콘텐츠에는 반드시 대체 텍스트를 함께 제공해야 한다.

대상

• 시각장애 (전맹)

체크리스트

• 텍스트 아닌 콘텐츠에 대응하는 대체 텍스트가 그 의미나 기능을 파악할 수 있도록 간단하고 명확하게 제공 되었는지 확인
  • 의미를 가지지 않는 블릿, 배경 등의 콘텐츠는 대체텍스트 제공대상에서 제외함
  • 콘텐츠의 상태(접힘/펼침,ON/OFF)에 따라 적절한 대체텍스트가 제공되었는지 확인
  • 객체의 기능(OO하기,OO됨 등)을 대체텍스트로 명확하게 제공했는지 확인
• 입력서식 형태의 객체에 용도를 명확히 인식할 수 있도록 대체텍스트를 제공했는지 확인
  • 대체텍스트와 placeholder 사용 여부 확인
• 한 초점에 동일한 대체텍스트가 중복으로 여러번 제공되었는지 확인
• 사용자 생성 콘텐츠(UGC, UCC)
  • 사용자가 콘텐츠 제작 과정 대체 텍스트를 제공할 수 있는 환경을 제공했는지 확인

기기별 테스트 방법

대체텍스트의 오류 유무는 모바일 화면 낭독프로그램(보이스오버, 톡백 등)을 활성화 한 상태에서 확인한다.

iOS

• 보이스오버를 통해 모든 항목에 접근해서 각 항목의 대체텍스트가 적절하게 제공되었는지 확인
  • 두 손가락 위로 쓸기 - 처음부터 끝까지 순차적으로 이동하면서 듣기
  • 좌/우 한 손가락 쓸기 - 이전/다음 객체로 초점 이동
  • 상/하/좌/우 세 손가락 쓸기 - 페이지/목록 스크롤

Android

• 톡백을 통해 모든 항목에 접근해서 각 항목의 대체텍스트가 적절하게 제공되었는지 확인
  • 한 손가락으로 혹은 “ㄴ” 재스쳐 사용 후 “맨 위부터 읽기” 선택
  • 좌/우 한 손가락 쓸기 (이전/다음 객체로 초점 이동)
  • 상/하/좌/우 두 손가락 쓸기 - 페이지/목록 스크롤

QA 지표

오류 수

• 텍스트 아닌 콘텐츠에 대체텍스트가 누락되거나 적절하지 않은 객체 수
  • 콘텐츠의 상태(접힘/펼침,ON/OFF 등)에 따라 적절한 대체텍스트가 제공되지 않은 객체 수
  • 버튼 등의 기능(OO하기,OO됨 등)을 대체텍스트로 명확하게 제공하지 않은 수
• 객체의 선택상태를 표시하지 않은 수
• 의미를 가지지 않는 콘텐츠(블릿,배경 등)에 대체텍스트가 제공된 수
• 입력서식 형태의 객체에 용도를 명확히 인식할 수 있는 대체텍스트를 제공하지 않은 수
  • 입력필드에 대체텍스트 없이 다른 속성(placeholder, hint 등)만 제공한 수
• 한 초점에 동일한 대체텍스트가 여러번 반복적으로 제공된 객체 수

적용기술

공통

• 텍스트 아닌 콘텐츠에는 의미나 기능을 파악할 수 있는 대체 텍스트를 제공한다.
  • 콘텐츠의 상태,기능 등(접힘/펼침,ON/OFF, 설정하기/설정됨 등)에 적절한 대체텍스트 제공
  • 동일한 대체텍스트를 여러 속성으로 중복제공하는 것은 바람직하지 않다
• 입력서식 형태의 객체는 그 용도를 명확히 인식할 수 있도록 대체텍스트를 제공해야 한다.
  • 입력필드의 용도는 대체텍스트(label, contentDescription)로 제공하고, placeholder는 부가 설명 또는 예시를 제공하는 것이 바람직하다.
• 의미를 가지지 않는 장식 목적의 콘텐츠에는 대체텍스트를 제공하지 않는다.
• 사용자 생성 콘텐츠(UGC, UCC)는 대체 텍스트를 제공할 수 있는 환경을 제공한다.

iOS

• iOS는 AccessibilityLabel 요소를 사용하여 대체텍스트를 제공한다.
  • AccessibilityLabel 을 제공할 경우, 해당 요소에 text/value 속성값은 보이스오버가 음성출력하지 않는다.
  • label 속성으로 충분히 설명하기 어려운 경우 hint를 사용할 수 있다.
• Hint 속성은 선택사항으로 특정동작을 진행하거나 동작에 필요한 요소 등 부가적인 설명을 제공할 때 사용한다.
  • ex) 위/아래 쓸기를 하면 동작이 실행됨.
  • AccessibilityHint 를 제공할 경우, 기본 컴포넌트에 제공되는 Hint 값은 없어지지 않고, 개발자가 작성한 내용이 기본값 앞에 추가 된다.

VoiceOver 음성출력 형태

Label 내용 + 요소 정보 (버튼, 이미지 등) + Hint 내용

제공방법

1. 기본 컴포넌트는 x-code의 Interface Builder를 이용하여 대체 텍스트를 제공한다.
2. UIAccessibility API 등으로 커스터마이징을 할 경우 직접 코드에 삽입하여 제공한다.

AccessibilityLabel : 대체 텍스트 제공
AccessibilityHint : 추가적인 정보(부가설명)가 필요할 경우 제공

Interface Builder 이용하여 요소에 대체 텍스트 적용하는 방법

• Xcode에서 해당 요소를 선택후 identity inspector 창의 Accessibility 목록에서 제공 가능하다.
  • Accessibility 항목은 Enabled 시킨다.
  • 기본적으로 화면낭독기에서 VoiceOver의 초점을 적용시키려면 Accessibility 속성을 반드시 활성화시켜야 한다.
• Label속성에 짧고 명확하게 요소의 기능 및 내용을 제공한다.
  • 대부분의 컨트롤러는 기본 값으로 Accessibility가 활성화 되어 있다.
  • 하지만 ‘image’객체는 비활성화 되어 있으므로 ‘image’객체에 대체 텍스트를 적용해야 할 경우 Accessibility 항목을 활성화 해야 한다.
• 부가적인 설명이 필요할 경우에는 Hint속성을 활용하여 추가적인 정보를 제공한다.

UIAccessibility API등을 활용하여 직접 코드에 삽입하여 대체텍스트 제공

[Button setIsAccessibilityElement:YES];
[ImageView setAccessibilityLabel:@"내용"];  
[Controller setAccessibilityHint:@"힌트제공"];  

개발 문서 문서 링크

• accessibilityLabel
• accessibilityHint

Android

• XML을 활용하거나 또는 Java code를 활용하는 방법이 있다.

제공방법

• android:contentDescription 속성을 사용하여 대체 텍스트를 제공해야 한다.
• 입력서식에는 labelFor 이나 Hint 속성을 이용하여 용도와 목적을 알 수 있는 대체정보를 제공해야 한다.

대체 텍스트 적용하는 방법

모든 객체에 contentDescription 속성을 주어 해당 객체에 대한 설명을 TalkBack 음성으로 제공될 수 있도록 한다.

type	components
XML 속성	android:contentDescription
JAVA 함수	setContentDescription (CharSequence contentDescription)

개발 문서 문서 링크

• XML - contentDescription
• JAVA - setContentDescription (CharSequence contentDescription)

UI 레이아웃 XML 예제

<ImageView android:id="@+id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/logo1938"
    android:contentDescription="1938년 삼성 상회가 내놓은 별표국수 로고"
    android:layout_margin="2dp" />

자바 코드 예제

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ImgView[0] =(ImageView)findViewById(R.id.imageView1);
    ImgView[0].setContentDescription("1938년 삼성상회가 내놓은 별표 국수 로고");
}

입력서식 대체텍스트 제공방법

입력서식에는 labelFor 이나 Hint 속성을 이용하여 용도와 목적을 알 수 있는 대체정보를 제공해야 한다.

type	components
XML 속성	android:labelFor
JAVA 함수	void setLabelFor(int id)

개발 문서 문서 링크

• XML - labelFor
• JAVA - setLabelFor(int id)

UI 레이아웃 XML 예제

<TextView
   android:id="@+id/textView1"
   android:layout_width="52dp"
   android:layout_height="wrap_content"
   android:labelFor="@+id/edit_name"
   android:text="이름:"
   android:textSize="18sp" />

<EditText
   android:id="@+id/edit_name"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_weight="0.03"
   android:contentDescription="이름입력" />

EditText 위젯에 TextView 라벨 문자열로 지정하여, 문자 입력 시에도 입력서식의 용도와 목적을 안내 받을 수 있도록 한다. EditText 위젯에서 제공하는 hint 속성에 문자열을 제공하여 입력 안내를 해준다.

type	components
XML 속성	android:hint
JAVA 함수	void setHint (CharSequencecontentDescription)

개발 문서 문서 링크

• XML - hint
• JAVA - setHint(int)