5.1.1 텍스트 아닌 콘텐츠

요구 사항

이미지 등 텍스트 아닌 콘텐츠를 쓸 때는 그 의미나 용도를 동등하게 인식할 수 있는 적절한 대체 텍스트를 제공해야 합니다. 표준은 특히 다음 경우를 짚습니다.

• 구체적인 정보를 제공해야 하는 경우 — 이미지 링크, 이미지 버튼은 용도가 명확하므로 그 핵심 기능을 대체 텍스트로 제공합니다(예: 돋보기 아이콘 → “검색”).
• 의미 있는 배경 이미지 — 배경 이미지의 의미가 전달되어야 한다면 보조기술로 전달되도록 대체 텍스트를 제공합니다.
• 충분한 정보가 필요한 경우 — 데이터 차트처럼 복잡한 콘텐츠는 의미를 충분히 파악할 수 있는 대체 텍스트를 제공합니다.

다음 경우에는 대체 텍스트를 제공하지 않거나 제한적으로 허용합니다.

• 대체 콘텐츠(예: 텍스트와 같은 내용의 수어 영상)에는 대체 텍스트를 제공하지 않습니다.
• 검사·시험(색맹·청각·시력 검사, 받아쓰기 등)과 특정 감각으로만 제공되는 콘텐츠(악기 연주, 시각 예술 작품 등)는 간략한 용도를 알려 주는 대체 텍스트로 충분합니다.
• 장식용 콘텐츠는 오히려 혼란을 줄 수 있으므로 보조기술이 인식하지 않도록 합니다.
• 캡차(CAPTCHA)는 목적을 알려 주는 대체 텍스트와 함께, 다양한 장애를 가진 사용자가 쓸 수 있는 대체 수단(예: 오디오 캡차)을 제공합니다.

개정 내역: 유지 — 2016판 「5.1 대체 텍스트」

왜 필요한가요

시각으로 정보를 얻기 어려운 사용자가 화면낭독기로 콘텐츠를 들을 수 있어 최소한의 접근권이 보장됩니다. 시청각중복장애인도 대체 텍스트를 점자로 변환해 이용할 수 있고, 대체 텍스트가 있으면 텍스트 아닌 콘텐츠를 검색할 수도 있습니다.

도움받는 사용자

• 전맹 시각장애인(TalkBack·VoiceOver 사용자)
• 시청각중복장애인(점자정보단말기 사용자)
• 이미지가 표시되지 않는 저속 네트워크 환경의 사용자

적용 방법

의미 있는 이미지와 아이콘 버튼에는 접근성 레이블을 주고, 장식 이미지는 접근성 트리에서 숨깁니다. 레이블에 “버튼”, “이미지” 같은 유형 정보를 넣지 않습니다. 유형은 보조기술이 역할(role)·특성(trait)으로 따로 읽어 줍니다. 자세한 원리는 접근 가능한 이름을 참고하세요.

<!-- 기능이 있는 아이콘 버튼 -->
<ImageButton
    android:id="@+id/btnSearch"
    android:src="@drawable/ic_search"
    android:contentDescription="@string/search" />

<!-- 장식 이미지: 보조기술에서 숨김 -->
<ImageView
    android:src="@drawable/divider_wave"
    android:importantForAccessibility="no" />

Icon(Icons.Default.Search, contentDescription = "검색")
Image(painterResource(R.drawable.divider_wave), contentDescription = null) // 장식

searchButton.accessibilityLabel = "검색"
decorImageView.isAccessibilityElement = false   // 장식 이미지

// 차트처럼 복잡한 이미지는 요약을 레이블로, 상세는 value/hint로
chartView.isAccessibilityElement = true
chartView.accessibilityLabel = "월별 매출 막대그래프"
chartView.accessibilityValue = "1월 120만 원, 2월 150만 원, 3월 90만 원"

Button(action: search) { Image(systemName: "magnifyingglass") }
    .accessibilityLabel("검색")
Image("divider_wave").accessibilityHidden(true)   // 또는 Image(decorative:)

IconButton(icon: const Icon(Icons.search), tooltip: '검색', onPressed: search)
Semantics(label: '월별 매출 막대그래프. 1월 120만 원, 2월 150만 원', child: chart)
ExcludeSemantics(child: Image.asset('assets/divider_wave.png'))

<Pressable accessibilityRole="button" accessibilityLabel="검색" onPress={search}>
  <SearchIcon />
</Pressable>
<Image source={wave} accessible={false} importantForAccessibility="no" />

사례

<ImageButton android:src="@drawable/ic_cart" />
// TalkBack: "레이블 없음, 버튼"

<ImageButton android:src="@drawable/ic_cart"
    android:contentDescription="장바구니" />
// TalkBack: "장바구니, 버튼"

closeButton.accessibilityLabel = "닫기 버튼"
// VoiceOver: "닫기 버튼, 버튼"

자주 하는 실수

• 아이콘 버튼에 레이블이 없어 “레이블 없음, 버튼” 또는 파일명(ic_close_24)이 읽힙니다.
• 장식 이미지를 숨기지 않아 의미 없는 초점 이동이 생깁니다.
• 레이블에 “버튼”, “이미지”, “클릭” 같은 유형·동작 정보를 덧붙여 중복 낭독됩니다.
• 배너 이미지 안의 중요한 글자(할인율, 기간 등)를 대체 텍스트에 담지 않습니다.
• 같은 화면의 여러 “더보기” 아이콘에 똑같은 레이블만 주어 구분할 수 없습니다.

검사 방법

• Android에서 TalkBack을 켜고 한 손가락 오른쪽/왼쪽 쓸기로 화면의 모든 요소를 차례로 탐색하며 낭독 내용을 확인합니다.
• iOS에서 VoiceOver를 켜고 오른쪽/왼쪽 쓸기로 모든 요소를 탐색하며 낭독 내용을 확인합니다.
• 모든 이미지, 아이콘, 이미지 버튼에서 낭독되는 대체 텍스트가 화면의 의미·기능과 같은지 확인합니다.
• 장식 이미지에 초점이 가지 않는지, 유형 정보가 중복 낭독되지 않는지 확인합니다.
• Android Accessibility Scanner, Xcode Accessibility Inspector 같은 자동 점검 도구로 1차 점검한 뒤, 결과를 반드시 보조기술로 다시 확인합니다.
• 인증 심사에서는 대표 화면과 주요 기능 흐름(로그인, 검색, 결제 등)을 실제 보조기술로 사용해 보며 이 항목을 판정하는 것이 일반적이므로, 같은 흐름으로 자체 점검합니다.

관련 ARIA

다른 지침의 대응 항목