Accessibility 본문

1.1 적절한 대체 텍스트 제공

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

필요성

시각장애인의 경우 모바일 화면낭독 프로그램에서 제공하는 음성읽기 기능을 활용하여 애플리케이션의 정보를 인식할 수 있다. 하지만, 해당 어플리케이션에서 컨트롤 및 객체를 텍스트 아닌 콘텐츠로 제공하면서 대체 텍스트를 함께 제공하지 않으면 시각장애인은 잘못된 정보를 얻거나 전혀 정보를 얻을 수 없다.

대상

전맹

저시력

적용기술

iOS

애플에서 제공하는 Interface Builder를 이용하여 대체 텍스트를 제공한다.

UIAccessibility API 등을 활용하여 직접 코드에 삽입하여 제공한다. Label로 대체 텍스트를 제공하고, Hint는 추가적인 정보가 필요할 경우 제공한다. iPhone에서 사용자가 VoiceOver 옵션에서 Hint를 끌 수(Off) 있으므로 반드시 대체 텍스트는 Label로 제공해야 한다.

Interface Builder 이용

버튼에 대체 텍스트를 적용시키는 방법

  • Accessibility 속성을 반드시 활성화 시킨다.
  • Label속성에 텍스트 아닌 콘텐츠의 의미와 정보를 동등하게 인식할 수 있도록 대체 텍스트를 짧고 명확하게 제공한다.
  • 부가적인 설명이 필요할 경우에는 Hint속성을 활용하여 추가적인 정보를 제공한다. (대부분의 컨트롤러들은 기본 값으로 Accessibility가 활성화 되어 있다. 하지만 'image'객체는 비활성화 되어 있으므로 'image'객체에 대체 텍스트를 적용해야 할 경우 Accessibility 항목을 활성화 해야 한다.)
UIAccessibility API등을 활용하여 직접 코드에 삽입하는 경우
초점 적용 대상이 버튼인 경우
UIAccessibility API등을 활용하여 직접 코드에 삽입 사례이미지1

초점 적용시 VoiceOver 음성 출력 : '재생버튼, 음악을 재생합니다.'

[houseButton  setIsAccessibilityElement:YES];
[houseButton  setAccessibilityLabel:@"재생"];
[houseButton  setAccessibilityHint:@"음악을 재생합니다."];
초점 적용 대상이 이미지 뷰인 경우
UIAccessibility API등을 활용하여 직접 코드에 삽입 사례이미지2

초점 적용시 VoiceOver 음성 출력 : '다음 로고'

[myImageView  setIsAccessibilityElement:YES];
[myImageView  setAccessibilityLabel:@"다음 로고"];
초점 적용 대상이 사용자 변형 UI컴퍼넌트인 경우
UIAccessibility API등을 활용하여 직접 코드에 삽입 사례이미지3

초점 적용시 VoiceOver 음성 출력 : '밀어서 잠금해제, 밀거나 이중 탭 하십시오'

[myController  setIsAccessibilityElement:YES];
[myController  setAccessibilityLabel:@"밀어서 잠금해제"];
[myController  setAccessibilityHint:@"밀거나 이중 탭 하십시오.“];
Android

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

android:contentDescription 속성을 사용하여 대체 텍스트를 제공해야 한다.

모든 객체에 ContentDescription 속성을 주어 해당 객체에 대한 설명을 TalkBack 음성으로 제공될 수 있도록 함
UI 레이아웃 XML 예제
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo1938"
        android:contentDescription="1938년 삼성상회가 내놓은 별표국수 로고"android:layout_margin="2dp" />
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo1969"
        android:contentDescription="1969년부터 10년간 사용된 삼성 두번째 로고"
        android:layout_margin="2dp"/>
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo1980"
        android:contentDescription="1980년대말 사용된 삼성의 세번째 로고"
        android:layout_margin="2dp"/>
    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo1993"
        android:contentDescription="1993년 발표된 현재의 삼성 로고"
        android:layout_margin="2dp"/>
</LinearLayout>
자바 코드 예제
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImgView[0] =(ImageView)findViewById(R.id.imageView1);
        mImgView[1] =(ImageView)findViewById(R.id.imageView2);
        mImgView[2] =(ImageView)findViewById(R.id.imageView3);
        mImgView[3] =(ImageView)findViewById(R.id.imageView4);
        mImgView[0].setContentDescription("1938년 삼성상회가 내놓은 별표 국수 로고");
        mImgView[1].setContentDescription("1969년부터 10년간 사용된 삼성 두번째 로고");
        mImgView[2].setContentDescription("1980년대말 사용된 삼성의 세번째 로고");
        mImgView[3].setContentDescription("1993년 발표된 현재의 삼성로고");
    }
예제 코드 실행 결과
예제 코드 실행 결과
이미지 버튼과 아래 설명 텍스트를 같이 사용할 경우

이미지 버튼과 설명 텍스트를 같이 사용 할 경우에는 같은 음성이 두 번 출력 되거나 원하지 않는 음성이 출력 될 수 있음. 따라서 하나의 이미지로 통합하여 이미지와 텍스트가 같이 표현되도록 하는 것이 좋은 방법임

또 다른 방법은 버튼에만 초점을 가지게 하고 텍스트에는 초점을 없애서 혼란스럽지 않도록 하는 것이 중요함

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

텍스트 아닌 콘텐츠에 대응하는 대체 텍스트가 그 의미나 기능을 파악할 수 있도록 짧고 명확하게 제공 되었는가?

iOS

보이스 오버 사용법 중 두 손가락으로 위로 쓸어 넘기기(화면 상단의 내용부터 읽어줌) 기능을 활용하여 적절하게 읽어 주는지 테스트

보이스 오버 사용법 중 살짝 누르기(항목을 말해줌) 탐색을 통해 대체 텍스트 체크

Android

터치하여 탐색(Explore by touch) 을 통해 대체 텍스트 체크

오류수(건)

텍스트가 아닌 콘텐츠에 적절한 대체텍스트가 제공되어 있지 않는 객체 수

사례

오류사례

대체텍스트를 제공하고 있지 않음

오류사례이미지
개선방법

객체에 Accessibility 속성을 활성화시킨다. Label 활용하여 텍스트 아닌 콘텐츠의 의미나 용도를 파악할 수 있도록 적절한 대체 텍스트를 제공한다.

우수사례

입력 양식에 대한 적절한 대체 텍스트 제공

우수사례이미지