WCAG 1.1.1: 비텍스트 콘텐츠

WCAG 1.1.1은 모든 비텍스트 콘텐츠 — 이미지, 아이콘, 컨트롤, 미디어 — 에 대해 동일한 목적이나 정보를 전달하는 텍스트 대체 수단을 제공할 것을 요구하며, 이를 통해 시각적 콘텐츠를 인지할 수 없는 사용자가 스크린 리더와 같은 보조 기술을 통해 해당 콘텐츠에 접근할 수 있도록 합니다.

이 규칙의 의미

WCAG 성공 기준 1.1.1 비텍스트 콘텐츠는 지각 가능(Perceivable) 원칙 아래의 레벨 A 요구사항이다. 이 기준은 사용자에게 제공되는 모든 비텍스트 콘텐츠에는 동등한 목적을 수행하는 텍스트 대체물이 있어야 한다고 규정한다. “비텍스트 콘텐츠”는 폭넓게 정의되며, 래스터 이미지(JPEG, PNG, GIF, WebP), 벡터 그래픽(SVG), 이미지 기반 버튼과 폼 입력, 이미지 맵, canvas 요소, 오디오 클립, 비디오, 애니메이션, CAPTCHA, 장식적 요소 등을 모두 포함한다.

텍스트 대체물은 요소 유형에 따라 여러 형태를 취할 수 있다. 예를 들어 <img> 요소의 alt 속성, SVG나 role을 가진 요소의 aria-label 또는 aria-labelledby, <object> 내부의 title 요소, figure와 연관된 <figcaption> 등이 있다. 핵심 요구사항은 대체 텍스트가 시각적 콘텐츠 자체와 동일한 정보나 기능을 전달해야 한다는 점이며, 단순히 파일 이름이나 일반적인 플레이스홀더여서는 안 된다.

이 기준은 적절한 텍스트 대체물이 어떤 모습이어야 하는지를 결정하는 몇 가지 구체적인 경우를 정의한다.

컨트롤과 입력: 비텍스트 콘텐츠가 컨트롤이거나 사용자 입력을 받는 경우(예: 이미지 버튼이나 링크로 사용되는 이미지), 텍스트 대체물은 그 외형이 아니라 목적이나 기능을 설명해야 한다.
시간 기반 미디어: 독립적인 프레젠테이션으로 사용되는 오디오 전용 또는 비디오 전용 콘텐츠는 최소한 이를 식별하는 설명적 레이블이 필요하며, 전체 대본과 자막은 이후 기준(1.2.x)에서 다룬다.
테스트와 감각적 경험: 콘텐츠가 텍스트로 제시하면 목적이 훼손되는 테스트나 연습(예: 시각적 퍼즐)인 경우, 텍스트 대체물은 비텍스트 콘텐츠를 식별하고 설명하기만 하면 된다.
CAPTCHA: 텍스트 대체물은 CAPTCHA의 목적을 설명해야 하며, 다른 감각 양식을 사용하는 대체 형태의 CAPTCHA가 제공되어야 한다.
장식, 서식, 보이지 않는 콘텐츠: 이미지가 순수하게 장식용이거나 간격 조정을 위해 사용되거나 사용자에게 표시되지 않는 경우, 보조 기술이 이를 무시할 수 있도록 구현해야 한다. 일반적으로 빈 alt="" 속성이나 role="presentation"을 사용한다.

통과는 의미 있는 모든 비텍스트 요소가 그 목적을 동등하게 전달하는 프로그래밍 가능한 텍스트 대체물을 제공하거나, 보조 기술이 건너뛸 수 있도록 명시적으로 장식용으로 표시되어 있을 때 달성된다. 실패는 이미지에 alt 속성이 전혀 없거나, alt 값이 파일 이름(예: alt="img_header_logo_v2.png")인 경우, 의미 있는 콘텐츠로 사용되는 SVG에 <title> 요소도 접근 가능한 레이블도 없는 경우, 또는 장식용 이미지에 잘못된 설명적 alt 텍스트가 있어 스크린 리더 사용자에게 잡음을 추가하는 경우에 발생한다.

왜 중요한가

세계보건기구(WHO)에 따르면 전 세계적으로 약 22억 명이 어떤 형태로든 시각 장애나 실명을 가지고 있다. 합성 음성이나 점자 디스플레이를 통해 디지털 콘텐츠를 소비하는 스크린 리더 사용자는 이미지, 아이콘, 차트, 그래픽 컨트롤을 이해하기 위해 전적으로 텍스트 대체물에 의존한다. 정확한 alt 텍스트가 없다면, 전자상거래 사이트의 상품 페이지는 시각적 맥락이 없는 가격 목록으로 축소되고, 로고가 많은 은행의 내비게이션은 레이블 없는 버튼 행이 되며, 병원의 증상 체크 다이어그램은 자가 분류를 시도하는 사용자에게 보이지 않게 된다.

구체적인 상황을 생각해 보자. 한 시각장애 사용자가 재킷을 구매하기 위해 터키의 한 전자상거래 플랫폼을 방문한다. 상품 캐러셀에는 재킷의 다양한 각도와 색상 변형을 보여주는 6개의 이미지가 있다. 이 이미지들에 의미 있는 alt 텍스트가 하나도 없다면, 사용자의 스크린 리더는 “image, image, image”만 여섯 번 읽어 준다. 사용자는 어떤 변형이 네이비 블루이고 어떤 것이 검정인지, 어떤 이미지가 뒷주머니를 보여주는지 알 수 없으며, 결국 구매를 포기할 수도 있다. 같은 상품 링크를 가진 시력이 있는 동료는 2분 이내에 구매를 완료한다. 이 격차는 접근성 실패이자 비즈니스 손실이다.

실명 외에도, 이 기준은 읽기를 보완하기 위해 텍스트 음성 변환 도구에 의존하는 인지 장애 사용자, 키보드와 음성으로 탐색하며 인터랙티브 컨트롤에 명확한 레이블이 필요한 운동 장애 사용자, 그리고 이미지가 로드되지 않을 수 있는 저대역폭 사용자에게도 도움이 된다. 이런 경우 alt 텍스트는 기능적인 폴백 역할을 한다. 또한 잘 작성된 alt 텍스트는 검색 엔진이 이미지 alt 속성을 관련 텍스트 신호로 취급하기 때문에 검색 엔진 인덱싱을 개선하여 SEO 성과를 직접적으로 지원한다.

테스트 방법

axe DevTools 또는 Lighthouse를 사용한 자동 스캔: 브라우저 확장 프로그램인 axe DevTools(Chrome, Firefox용)를 설치한다. 테스트할 페이지를 열고 확장 프로그램을 활성화한 뒤 전체 페이지 분석을 실행한다. 위에 나열된 규칙 ID(image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt, image-redundant-alt)로 결과를 필터링한다. 각 표시된 요소에 대해 도구는 DOM에서 문제가 되는 노드를 하이라이트하고 위반 사항을 설명한다. Chrome DevTools의 접근성 감사에 내장된 Lighthouse 역시 요소 수준의 세부 정보와 함께 image-alt 위반을 보여준다. 모든 위반 사항을 요소 선택자와 주변 컨텍스트와 함께 기록하여 개발자에게 전달한다.
수동 DOM 검사: 브라우저 DevTools의 Elements 패널을 열고 모든 <img>, <input type="image">, <area>, <object>, <svg> 태그를 검색한다. 각 요소에 적절한 alt 속성이나 ARIA 레이블이 있는지, 그리고 그 값이 문맥상 의미 있는지 확인한다. React나 Vue 같은 JavaScript 프레임워크를 통해 동적으로 로드되는 이미지처럼 정적 HTML 스냅샷에는 나타나지 않을 수 있는 이미지에 특히 주의를 기울인다.
NVDA와 Firefox를 사용한 스크린 리더 테스트: NVDA(무료, Windows)를 실행하고 Firefox에서 페이지를 연다. G 키를 사용해 그래픽 사이를 이동한다. NVDA는 각 이미지의 접근 가능한 이름을 읽어 주며, 파일 경로, “image”, 또는 아무 내용도 없는 안내가 들리면 모두 실패를 의미한다. 이미지 버튼과 링크의 경우 Tab 키로 각 컨트롤에 도달해, 읽어 주는 레이블이 해당 컨트롤이 수행하는 동작을 전달하는지 확인한다.
VoiceOver와 Safari(macOS/iOS)를 사용한 스크린 리더 테스트: VoiceOver를 활성화한다(macOS에서는 Command+F5). VO+Right Arrow로 콘텐츠를 요소 단위로 이동하거나, Item Chooser(VO+U)를 열고 로터에서 Images를 선택해 모든 이미지와 그 레이블 목록을 한 번에 확인한다. iOS에서는 오른쪽으로 스와이프하며 각 이미지가 어떻게 안내되는지 듣는다.
JAWS와 Chrome을 사용한 스크린 리더 테스트: JAWS에서 G를 눌러 그래픽 단위로 이동한다. 각 이미지는 명확하고 의미 있는 설명을 제공해야 한다. Insert+F1로 JAWS 가상 뷰어를 열어, 문제가 되는 요소의 계산된 접근 가능한 이름과 역할을 확인한다.
장식용 이미지 처리 확인: 장식용이라고 판단되는 이미지에 대해 alt=""가 설정되어 있고, 이를 다시 노출시킬 수 있는 title 속성이나 ARIA 레이블이 없는지 확인한다. 스크린 리더로 해당 요소까지 이동해 읽기 순서에서 완전히 건너뛰어지는지 확인한다.

수정 방법

정보 제공용 이미지에 alt 누락 — 잘못된 예

<!-- 상품 정보를 전달하는 이미지지만 alt 속성이 없음 -->
<img src='jacket-navy-front.jpg'>

정보 제공용 이미지에 alt 누락 — 올바른 예

<!-- alt 텍스트가 시각적 콘텐츠와 그 문맥상의 목적을 설명함 -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

장식용 이미지에 잘못된 레이블 — 잘못된 예

<!-- 장식용 구분선 이미지가 잡음을 추가하는 설명적 alt를 노출함 -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

보조 기술에서 올바르게 숨긴 장식용 이미지 — 올바른 예

<!-- 빈 alt는 스크린 리더에게 이 이미지를 완전히 건너뛰라고 지시함 -->
<img src='divider-ornament.png' alt=''>

접근 가능한 이름이 없는 SVG 아이콘 — 잘못된 예

<!-- 의미 있는 아이콘으로 사용되는 SVG에 role="img"는 있지만 레이블이 없음 -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

접근 가능한 이름이 있는 SVG 아이콘 — 올바른 예

<!-- title 요소가 접근 가능한 이름을 제공하고 aria-labelledby가 이를 연결함 -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

alt가 누락된 이미지 입력 버튼 — 잘못된 예

<!-- 이미지 제출 버튼에 alt가 없어 스크린 리더는 "image"만 안내함 -->
<input type='image' src='btn-search.png'>

설명적 alt가 있는 이미지 입력 버튼 — 올바른 예

<!-- alt는 버튼의 외형이 아니라 기능을 설명함 -->
<input type='image' src='btn-search.png' alt='Search'>

자주 발생하는 실수

파일 이름을 alt 텍스트로 사용: alt="hero_banner_v3_final.jpg"처럼 작성하면 의미 있는 콘텐츠 없이 파일 경로만 스크린 리더에 노출된다. 항상 이미지가 무엇을 보여 주는지 또는 어떤 목적을 수행하는지 설명하는 alt 텍스트를 작성해야 한다.
alt 텍스트를 "image"나 "photo"로 설정: alt="image"나 alt="photo" 같은 일반적인 값은 비어 있지 않기 때문에 자동 검사에서는 통과하지만, 아무 정보도 전달하지 않는다. 스크린 리더는 이미 요소의 역할을 “image”라고 안내하므로, 그 단어를 반복하는 것은 사용자의 시간을 낭비한다.
동적으로 삽입된 이미지에 alt를 빠뜨림: JavaScript(예: React로 만든 상품 캐러셀)를 통해 DOM에 삽입되는 이미지는 초기 HTML에는 alt 속성이 없을 수 있다. JavaScript 컴포넌트가 src를 렌더링할 때 alt 속성도 함께 렌더링하도록 해야 한다.
의미 있는 이미지에 role="presentation" 적용: 콘텐츠를 담고 있는 이미지에 role="presentation"이나 role="none"을 사용하면 해당 이미지는 접근성 트리에서 완전히 제거된다. 이는 순수 장식용 이미지에만 적합하며, 정보 제공용 이미지에 사용하면 스크린 리더 사용자에게 콘텐츠가 완전히 손실된다.
role="img"를 사용하는 CSS 배경 이미지에 alt 속성을 완전히 생략: <div>에 배경 이미지를 스타일링하고 role="img"를 부여할 때, 개발자가 aria-label을 추가하는 것을 잊는 경우가 있다. 레이블이 없으면 이 요소는 이름 없는 이미지로 접근성 트리에 포함되며, alt가 없는 것과 마찬가지로 나쁘다.
의미가 아니라 외형을 설명하는 alt 텍스트 작성: 차트에 대해 alt="A blue bar chart"라고 쓰면 시각적 스타일만 설명할 뿐 데이터를 설명하지 않는다. alt 텍스트는 alt="Bar chart showing Q3 revenue grew 18% year-over-year"처럼 핵심 인사이트를 전달해야 한다.
세트 내 여러 이미지에 중복된 alt 텍스트 사용: 상품 목록에 동일한 상품의 썸네일 이미지 6개가 있을 때, 모두에 alt="Running shoe"처럼 동일한 alt 텍스트를 부여하면 이미지 간 구분이 되지 않는다. 세트 내 각 이미지는 고유한 콘텐츠나 각도를 설명해야 한다.
이미지 맵의 <area> 요소에 alt 누락: 이미지 맵을 사용하는 개발자는 부모 <img>에 alt 텍스트를 추가하면서, 각 <area> 핫스팟에도 해당 링크 목적지를 설명하는 고유한 alt 속성이 필요하다는 점을 종종 잊는다.
툴팁 텍스트를 alt 텍스트의 대체물로 사용: title 속성은 시각적 툴팁을 생성하고 일부 스크린 리더가 이를 읽지만, 브라우저 지원이 일관되지 않고 모든 접근성 컨텍스트에서 노출되지는 않는다. title은 적절한 alt 속성을 대체하는 것이 아니라 보완해야 한다.
스프라이트 시트나 <use> 요소로 제공되는 SVG 아이콘을 테스트하지 않음: <use href="#icon-id">를 통해 참조되는 SVG 스프라이트는 섀도 DOM 경계 때문에 내부 <title>이 모든 스크린 리더에 노출되지 않을 수 있다. 스프라이트 기반 아이콘은 실제 스크린 리더로 항상 테스트하고, 필요할 경우 외부 <svg> 요소에 aria-label을 추가해 보완해야 한다.

터키 접근성 규정과의 관계

2025년 6월 21일 관보 제32933호에 게재된 터키 대통령령 2025/10은 터키에서 운영되는 광범위한 공공 및 민간 기관에 대해 의무적인 디지털 접근성 요구사항을 수립한다. 이 대통령령은 WCAG 2.2를 기술 표준으로 참조하며, 모든 레벨 A 성공 기준(비텍스트 콘텐츠에 대한 WCAG 1.1.1 포함)을 모범 사례 권고가 아닌 법적으로 집행 가능한 의무로 만든다.

대상 기관에는 모든 공공 기관과 정부 부처, 은행 및 금융 기관, 병원 및 의료 서비스 제공자, 가입자 200,000명 이상인 통신사, 전자상거래 플랫폼, 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립 학교가 포함된다. 공공 기관은 대통령령 발효일로부터 1년 이내에 준수해야 하며, 민간 부문 기관에는 2년의 이행 기간이 주어진다.

터키의 디지털 환경에서 WCAG 1.1.1은 특히 중요하다. 대통령령의 적용을 받는 전자상거래 마켓플레이스, 은행 포털, 정부 서비스 플랫폼 등 많은 고트래픽 분야가 이미지에 크게 의존하기 때문이다. 전자상거래 사이트의 상품 사진, 정부 포털의 인포그래픽 기반 공지, 은행 애플리케이션의 차트 중심 금융 대시보드, 병원 환자 포털의 폼 기반 인터페이스는 모두 이 기준의 적용 범위에 정확히 포함된다.

대통령령 하에서 레벨 A 요구사항을 준수하지 않으면 규제 기관의 조사와 잠재적 제재에 노출된다. WCAG 1.1.1은 자동화 도구와 기본적인 스크린 리더 점검만으로도 감지할 수 있는, 가장 자주 위반되면서도 가장 쉽게 테스트할 수 있는 기준 중 하나이기 때문에, 준수 감사에서 두드러지게 다뤄질 가능성이 크다. 대통령령의 적용을 받는 조직은 모든 image-alt 위반 사항의 수정 작업을 나중으로 미루는 개선이 아니라 즉각적인 최우선 과제로 취급해야 한다. Accsible과 같은 접근성 오버레이 SDK를 배포하면 실시간으로 누락된 텍스트 대체물을 찾아내고 부분적으로 수정하는 데 도움이 될 수 있지만, 소스 코드 수준에서의 완전한 수정이 가장 견고하고 지속 가능한 준수 경로로 남는다.