WCAG 1.4.9: 텍스트의 이미지 (예외 없음)

WCAG 1.4.9는 전달되는 정보에 필수적인 특정 시각적 표현이 필요한 경우나 순수하게 장식적인 콘텐츠를 제외하고, 텍스트를 텍스트의 이미지가 아닌 실제 텍스트를 사용하여 제시할 것을 요구합니다. 이 기준은 모든 사용자가 자신의 개별적인 필요에 맞게 텍스트 렌더링을 조정할 수 있도록 보장합니다.

이 규칙의 의미

WCAG 1.4.9 — 텍스트의 이미지(예외 없음)는 WCAG 1.4.5(텍스트의 이미지, 레벨 AA)의 요구 사항을 논리적으로 끝까지 확장한 레벨 AAA 기준이다. 1.4.5에서는 이미지가 시각적으로 사용자 정의 가능하거나 특정한 시각적 표현이 필수적인 경우 텍스트의 이미지를 허용하지만, 1.4.9는 이러한 예외의 거의 전부를 제거한다. 이 기준에 따르면 텍스트는 텍스트를 포함한 래스터 또는 벡터 이미지가 아니라, 실제 DOM 문자로 구성된 실제 텍스트를 사용해 렌더링되어야 한다.

1.4.9에서 허용되는 유일한 예외는 순수하게 장식적인 텍스트(어떠한 정보적 가치도 갖지 않는 경우) 또는 특정한 시각적 처리 방식이 전달되는 정체성과 분리될 수 없는 로고나 브랜드명에 포함된 텍스트뿐이다. 실제로 이는 텍스트를 포함한 제품 스크린샷, 프로모션 문구가 들어간 배너 그래픽, 데이터에 라벨이 붙은 인포그래픽, 증명서 이미지, 소셜 미디어 스타일의 인용 카드, 웹에 표시되는 스캔 문서 등이 모두 실제 렌더링된 텍스트로 대체되거나 최소한 보완되어야 함을 의미한다.

1.4.9를 통과하려면 사용자에게 보이는 의미 있는 모든 텍스트가 브라우저의 텍스트 엔진에 의해 렌더링되어야 한다. 즉, HTML 텍스트 노드, 적절한 경우 CSS로 생성된 콘텐츠, SVG <text> 요소 등을 통해 렌더링되어야 하며, 이를 통해 사용자 에이전트가 텍스트를 리플로우하고, 크기를 조정하고, 색상을 변경하고, 자간을 조정할 수 있어야 한다. 반대로 <img>, <canvas>, CSS 배경 이미지, SVG <image>, 임베디드 PDF 또는 기타 비텍스트 리소스를 사용해 의미를 가진 텍스트를 표시하는 경우(적절한 alt 속성이 제공되었는지 여부와 관계없이) 실패가 된다. 잘 작성된 alt 속성은 1.1.1(비텍스트 콘텐츠)을 충족하지만, 대체 텍스트는 시각적으로 렌더링되지 않고 원본 이미지가 여전히 시력이 있는 사용자에게 텍스트의 시각적 표현을 조정할 수 있는 능력을 제공하지 않기 때문에 1.4.9를 충족시키지는 못한다는 점에 유의해야 한다.

이 기준은 다음과 같은 일반적인 HTML 패턴에 영향을 미친다. 소스 파일에 텍스트가 포함된 <img> 요소, 텍스트가 포함된 이미지를 가리키는 CSS background-image 속성, 프로그래밍 방식으로 텍스트가 그려진 <canvas> 요소, <text> 대신 <image>를 사용하는 인라인 SVG 요소, 렌더링된 이미지 콘텐츠를 포함하는 iframe과 같은 서드파티 임베드 등이 이에 해당한다. SVG처럼 기술적으로 확장 가능한 형식도 텍스트가 SVG <text> 노드가 아니라 경로나 이미지로 포함된 경우에는 검토 대상이 된다.

왜 중요한가

세계보건기구에 따르면 전 세계적으로 약 22억 명이 어떤 형태로든 시각 장애를 가지고 있다. 이들 중 상당수 — 저시력, 색각 이상, 난독증 및 기타 인쇄물 관련 장애가 있는 사람들을 포함해 — 는 콘텐츠를 읽을 수 있도록 브라우저 또는 운영체제 수준의 텍스트 사용자 정의 도구에 의존한다. 이러한 도구에는 확대 기능, 글꼴 대체, 글자 및 단어 간격 확대, 고대비 또는 사용자 정의 색 구성표, 렌더링된 DOM 텍스트를 기반으로 작동하는 텍스트-음성 변환 엔진 등이 포함된다. 텍스트가 이미지 안에 포함되면, 해당 콘텐츠에 대해서는 이러한 모든 적응 기능이 단 하나도 사용할 수 없게 된다.

브라우저가 텍스트를 큰 산세리프 글꼴과 고대비 노란색-검은색 조합으로 렌더링하도록 설정한 저시력 사용자를 생각해 보자. 이 사용자가 "Summer Sale — 50% Off"라는 문구가 JPEG에 구워져 있는 프로모션 배너를 만나면, 브라우저는 그 텍스트의 색상을 바꾸거나 리플로우할 수 없다. 페이지 확대와 함께 이미지는 확대될 수 있지만, 더 선명해지기보다는 빠르게 픽셀화되어 읽기 어려워진다. 같은 메시지가 CSS로 스타일링된 실제 HTML 텍스트로 렌더링되었다면, 사용자의 브라우저 설정이 자동으로 적용되고 콘텐츠는 선명하고 조정 가능하며 접근 가능한 상태로 유지되었을 것이다.

난독증이 있는 사용자는 종종 브라우저 확장 프로그램을 설치하거나 사용자 정의 스타일시트를 적용해 OpenDyslexic과 같은 난독증 친화적 서체로 글꼴을 변경하고, 시각적 혼잡을 줄이기 위해 문자 및 단어 간격을 늘린다. 텍스트의 이미지는 이러한 적응을 완전히 우회한다. 스타일이 적용된 HTML 요소가 아니라 이미지로 렌더링된 행동 유도(Call-to-Action) 버튼은 이러한 사용자 정의에 사실상 보이지 않게 되어, 개인화된 렌더링에 의존하는 사용자에게 중요한 인터랙티브 요소를 숨길 수 있다.

스위치 액세스나 시선 추적 소프트웨어에 의존하는 운동 장애 사용자는 정확한 타깃을 선택하기 위해 확대 도구를 적극적으로 사용할 수 있다. 높은 확대 수준에서 흐릿하고 저해상도의 텍스트 이미지는 추가적인 타깃팅 어려움을 야기한다. 일부 잔존 시력을 가지고 있지만 이해를 위해 스크린 리더를 사용하는 사용자 역시, 작성자가 완전한 alt 속성을 작성했는지 여부에 따라 텍스트 이미지가 일관성 없이 읽히는 상황을 겪을 수 있다. 그리고 설령 alt 텍스트가 완벽하더라도, 그들이 필요로 하는 시각적 표현을 복원해 주지는 못한다.

장애 접근성 외에도, 텍스트의 이미지 대신 실제 텍스트를 사용하는 것은 의미 있는 SEO 이점을 제공한다. 검색 엔진 크롤러는 이미지 콘텐츠를 해석하는 것보다 DOM 텍스트를 훨씬 더 안정적으로 인덱싱하므로, 이미지에 포함된 프로모션 헤드라인, 제품명, 카테고리 라벨은 검색 순위 가중치를 거의 받지 못할 수 있다. 또한 대부분의 타이포그래피 사용 사례에서 실제 텍스트는 파일 크기가 더 작아 Core Web Vitals 점수를 개선하고 모바일 데이터 연결을 사용하는 사용자의 대역폭 소비를 줄여 준다. 이는 모바일 인터넷 보급률은 높지만 데이터 비용이 여전히 중요한 요소인 시장에서 특히 중요한 문제다.

테스트 방법

첫 단계로 자동 스캔을 실행한다. axe DevTools, Deque 브라우저 확장 프로그램 또는 Chrome DevTools의 Lighthouse를 열고 전체 페이지 감사를 실행한다. 표시된 이미지 관련 문제를 검토한다. 1.4.9를 직접 다루는 자동 규칙은 없지만, 이 단계에서 후속 수동 검토를 위해 모든 <img> 요소와 CSS 배경 이미지를 드러낼 수 있다. 결과를 내보내고, 비어 있지 않고 문장처럼 보이는 alt 속성을 가진 이미지나 axe가 image-alt 아래에서 표시한 모든 이미지를 기록한다.
모든 이미지와 배경 그래픽을 시각적으로 검사한다. 페이지를 스크롤하며 각 이미지, CSS 배경, canvas 요소, SVG 그래픽을 살펴본다. 이 이미지에 텍스트가 포함되어 있는가? 그렇다면 그 텍스트는 순수하게 장식적인가(정보를 추가하지 않으며 제거해도 손실이 없는가)? 특정한 서체 스타일이 브랜드 정체성과 분리될 수 없는 로고 타입인가? 어느 쪽에도 해당하지 않으면, 그 이미지는 1.4.9 실패다.
브라우저에서 이미지를 비활성화한다. Firefox에서 about:config로 이동해 permissions.default.image를 2로 설정하거나 "Disable Images"와 같은 확장 프로그램을 사용한다. 페이지를 다시 로드한다. 사라진 텍스트 정보가 있고, 그것이 화면에 보이는 DOM 텍스트(스크린 리더가 읽어 주는 alt 속성만이 아니라)로 대체되지 않는다면, 이는 1.4.9 실패를 의미한다. 테스트 후 이미지를 다시 활성화한다.
사용자 정의 스타일시트를 적용한다. Firefox에서 프로필의 chrome/userContent.css 위치에 파일을 만들고 * { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }와 같은 규칙을 추가한다. 페이지를 다시 로드한다. 실제 HTML로 렌더링된 텍스트는 이러한 스타일을 따르게 되지만, 이미지에 포함된 텍스트는 변경되지 않는다. 이러한 강제 스타일 적용 후에도 시각적으로 변하지 않고 읽을 수 없는 텍스트 콘텐츠는 모두 실패다.
NVDA와 Firefox로 테스트한다. NVDA의 브라우즈 모드를 사용해 페이지를 탐색한다. 각 이미지에 대해 NVDA가 무엇을 읽는지 확인한다. NVDA가 상당한 텍스트 내용을 포함한 alt 속성을 읽는다면, 그 내용을 이미지에 시각적으로 표시된 것과 비교한다. alt 속성에 의미 있는 텍스트 콘텐츠가 존재한다는 것은 이미지에 텍스트가 포함되어 있다는 강력한 지표이며, 1.1.1이 기술적으로 충족되더라도 1.4.9 실패를 확인해 준다.
macOS에서 VoiceOver와 Safari로 테스트한다. VO + 오른쪽 화살표를 사용해 콘텐츠를 이동한다. 완전한 문장, 제목, 프로모션 텍스트를 설명하는 이미지 설명을 듣는다. 시각적 검토와 교차 확인해, 해당 소스가 실제 텍스트가 아니라 이미지인지 확인한다.
400%까지 확대한다. WCAG 1.4.4와 1.4.10은 텍스트가 높은 확대 수준에서도 읽을 수 있어야 한다고 요구한다. 브라우저 확대를 사용하면 텍스트의 이미지는 픽셀화되지만, 브라우저 엔진이 렌더링한 실제 텍스트는 선명하게 유지된다. 400% 확대에서 흐릿하거나 픽셀화되어 보이는 텍스트는 텍스트의 이미지일 가능성이 높으며, 1.4.9 실패로 조사해야 한다.

수정 방법

텍스트가 포함된 프로모션 배너 — 잘못된 예

<!-- A marketing banner where the headline and CTA are baked into the image.
     Even with alt text, users cannot customize the text rendering. -->
<a href='/sale'>
  <img src='/images/summer-sale-banner.jpg'
       alt='Summer Sale — Up to 50% off all products. Shop Now.'
       width='1200' height='400'>
</a>

텍스트가 포함된 프로모션 배너 — 올바른 예

<!-- The banner uses a real background image for visual decoration,
     while all text is rendered as real HTML so users can resize,
     recolor, and reflow it independently. -->
<a href='/sale' class='sale-banner'>
  <!-- Background image set via CSS: .sale-banner { background-image: url(/images/summer-bg.jpg); } -->
  <h2 class='sale-banner__headline'>Summer Sale</h2>
  <p class='sale-banner__offer'>Up to 50% off all products</p>
  <span class='sale-banner__cta'>Shop Now</span>
</a>

데이터 라벨이 있는 인포그래픽 — 잘못된 예

<!-- An infographic where category labels and percentages are drawn
     into the PNG. Screen reader users hear the alt; sighted low-vision
     users cannot enlarge or recolor the labels. -->
<img src='/images/market-share-2024.png'
     alt='Market share 2024: Product A 42%, Product B 31%, Product C 27%'
     width='800' height='600'>

데이터 라벨이 있는 인포그래픽 — 올바른 예

<!-- An accessible SVG chart where all labels are SVG <text> nodes.
     Users can zoom, reflow, and apply high-contrast themes to the text.
     An adjacent <table> provides the same data in tabular form. -->
<figure>
  <svg viewBox='0 0 800 400' role='img'
       aria-labelledby='chart-title chart-desc'>
    <title id='chart-title'>Market Share 2024</title>
    <desc id='chart-desc'>Pie chart: Product A 42%, Product B 31%, Product C 27%</desc>
    <!-- chart paths -->
    <text x='200' y='150' class='chart-label'>Product A — 42%</text>
    <text x='450' y='200' class='chart-label'>Product B — 31%</text>
    <text x='350' y='320' class='chart-label'>Product C — 27%</text>
  </svg>
  <figcaption>
    <details>
      <summary>View data as table</summary>
      <table>
        <caption>Market Share 2024</caption>
        <thead><tr><th>Product</th><th>Share</th></tr></thead>
        <tbody>
          <tr><td>Product A</td><td>42%</td></tr>
          <tr><td>Product B</td><td>31%</td></tr>
          <tr><td>Product C</td><td>27%</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

텍스트가 많은 헤더를 포함한 CSS 배경 이미지 — 잘못된 예

<!-- The page title is set as a CSS background image rather than real text.
     This is a common design pattern from the early 2000s image-replacement era
     that should not appear in modern codebases. -->
<h1 class='logo-header'></h1>
<!-- CSS: .logo-header {
       background: url('/images/page-title-about-us.png') no-repeat;
       width: 400px; height: 80px; display: block;
       text-indent: -9999px;
     } -->

텍스트가 많은 헤더를 포함한 CSS 배경 이미지 — 올바른 예

<!-- Real text is rendered by the browser. Custom web fonts reproduce
     the desired typographic style without sacrificing adaptability.
     The background image, if needed at all, is purely decorative texture. -->
<h1 class='page-title'>About Us</h1>
<!-- CSS: .page-title {
       font-family: 'BrandTypeface', serif;
       font-size: 3rem;
       color: #1a1a2e;
       letter-spacing: 0.05em;
     } -->

자주 발생하는 실수

완전한 alt 속성이 1.4.9를 충족한다고 가정하는 것. alt 속성에 충분한 텍스트 대체를 제공하는 것은 WCAG 1.1.1을 충족하지만, 1.4.9에는 아무런 도움이 되지 않는다. 이 기준은 스크린 리더를 위한 프로그램적 동등성에 관한 것이 아니라, 텍스트의 시각적 렌더링이 사용자 정의에 접근 가능하도록 하는 것에 관한 것이다.
<h1>부터 <h6> 요소에 이미지 대체 CSS 기법(text-indent: -9999px 또는 clip 방식)을 사용하는 것. 이러한 레거시 기법은 실제 텍스트를 시각적으로 숨기고 배경 이미지를 대신 보여 주기 때문에, 저시력 시각 사용자에게는 이미지만 제공되고 스크린 리더 사용자에게는 숨겨진 텍스트만 제공되는 불일치를 초래한다. 이는 두 사용자 집단 모두에게 다른 방식으로 실패를 의미한다.
웹 폰트로 제공할 수 없는 커스텀 글꼴 때문에 웹 타이포그래피를 PNG나 JPEG로 내보내는 것. 라이선스가 있는 서체를 웹 폰트로 합법적으로 제공할 수 없다면, 올바른 해결책은 웹 폰트 권리를 협상하거나 대체 서체를 선택하는 것이지, 텍스트를 이미지로 래스터화하는 것이 아니다.
SVG 파일을 본질적으로 접근 가능하다고 여기는 것. 텍스트를 <path> 요소로 포함하는 SVG(일러스트레이터의 "텍스트 윤곽선 만들기" 옵션과 같은 그래픽 도구의 일반적인 출력)는 PNG만큼이나 접근성이 떨어진다. 1.4.9를 통과하려면 SVG가 <text> 요소를 사용해야 한다.
실제 텍스트 대체 없이 <canvas> 요소에 텍스트를 포함하는 것. canvas 콘텐츠는 픽셀 수준에서 래스터화된다. ctx.fillText()로 그려진 텍스트는 DOM의 일부가 아니며 사용자 에이전트가 적응시킬 수 없다. 실제 텍스트 오버레이나 대체가 필요하다.
OCR 기반 실제 텍스트 레이어 없이 스캔 문서 이미지(PDF를 이미지로 렌더링한 것)를 그대로 두는 것. <img> 태그로 표시되거나 이미지 전용 PDF로 제공되는 스캔 문서는 1.4.9를 위반한다. OCR을 실행해 선택 가능한 텍스트 레이어를 포함하거나, 문서를 적절히 태그된 HTML로 변환해야 한다.
가격, 재고 수량, 사용자 생성 콘텐츠와 같은 동적 데이터에 텍스트의 이미지를 사용하는 것. 서버가 텍스트 데이터를 포함한 이미지를 생성할 때마다, 그 데이터는 이미지 형식에 고정된다. 상품 목록의 가격, 예약 플랫폼의 좌석 가능 여부, 실시간 스포츠 점수 등은 사용자가 크기를 조정하고 색상을 변경할 수 있도록 실제 텍스트로 렌더링해야 한다.
이메일 서명 이미지를 간과하는 것. 마케팅 팀은 시각적 브랜딩을 유지하기 위해 서명 블록을 이미지로 만드는 경우가 많다. 이러한 이메일이 보관되고 웹사이트에서 링크될 때, 서명 이미지는 1.4.9의 적용을 받는 웹 콘텐츠가 된다.
서드파티 위젯 콘텐츠를 무시하는 것. 채팅 위젯, 소셜 증명 배지, 서드파티 공급업체가 제공하는 리뷰 캐러셀은 페이지에 텍스트의 이미지를 삽입할 수 있다. 사이트 소유자는 페이지의 모든 콘텐츠에 대한 접근성에 계속 책임이 있으며, 공급업체가 텍스트 기반 렌더링을 제공할 수 없다면 다른 공급업체를 찾아야 한다.
로고 타입 예외를 일반적인 브랜딩 예외와 혼동하는 것. 로고 타입 예외는 스타일화된 브랜드명인 로고 또는 워드마크 자체에만 적용된다. 같은 이미지에 로고와 함께 나타나는 태그라인, 내비게이션 라벨 또는 기타 텍스트에는 적용되지 않는다.

터키 접근성 규정과의 관계

2025년 6월 21일 관보 제32933호에 게재된 터키 대통령령 2025/10은 터키에서 운영되는 광범위한 조직에 대해 의무적인 웹 접근성 의무를 수립한다. 이 대통령령은 해당 기관이 최소 기준으로 WCAG 2.1 레벨 AA를 준수할 것을 요구한다. 명시적으로 포함된 기관에는 공공 기관 및 정부 기관, 전자상거래 플랫폼, 은행 및 금융 기관, 병원 및 민간 의료 제공자, 가입자 200,000명 이상인 통신 회사, 여행사, 민간 운송 회사, 그리고 국가교육부가 인가한 사립학교가 포함된다.

WCAG 1.4.9는 레벨 AAA 기준으로, 따라서 대통령령 2025/10이 설정한 의무적 최소 기준보다 상위에 위치한다. 해당 기관이 대통령령의 기본 의무를 충족하기 위해 1.4.9를 준수해야 할 법적 의무는 없다. 그러나 적용 가능한 기준에서 레벨 AAA를 달성하는 것은 포용에 대한 최고 수준의 의지를 보여 주며, 서비스를 효과적으로 이용할 수 있는 이용자 범위를 크게 넓힌다.

대통령령의 적용을 받는 여러 부문은 자발적으로 1.4.9 준수를 추구할 강력한 인센티브를 가진다. 전자상거래 플랫폼은 프로모션 배너, 세일 그래픽, 제품 카테고리 헤더를 이미지로 렌더링하는 경우가 많으며, 이는 모두 1.4.9에서 흔히 발견되는 실패 패턴이다. 구매 결정을 위해 텍스트 사용자 정의에 의존하는 저시력 또는 난독증 사용자의 경우, 이러한 실패는 곧바로 전환 손실과 터키의 보다 광범위한 소비자 보호 및 차별 금지 체계 하에서의 잠재적 법적 위험으로 이어진다. 은행 및 금융 기관 역시 대출 금리, 계좌 요약, 수수료 표를 제시하는데, 이 정보가 이미지에 포함되어 있다면 저시력 고객은 이를 자신 있게 읽을 수 있도록 표현을 조정할 수 없게 되어, 대통령령뿐 아니라 금융 서비스 소비자 보호 규정과 관련된 우려를 야기한다. 병원과 의료 제공자가 복용 지침, 예약 세부 정보, 환자 정보를 이미지 형태로 표시하는 경우, 텍스트 렌더링을 조정할 수 없는 사용자에게 환자 안전 위험을 초래한다.

규제 변화에 대비해 디지털 자산을 미래 지향적으로 보호하려는 조직이나, 접근성 리더십을 입증해야 하는 공공 조달 계약을 추구하는 조직은 포괄적인 접근성 프로그램의 일환으로 1.4.9 실패를 감사하고 개선하는 것이 바람직하다. Accsible의 오버레이 SDK는 일부 레거시 텍스트 이미지 시나리오에서 런타임 텍스트 적응을 지원할 수 있지만, 장기적인 준수를 위해 가장 견고하고 지속 가능한 해결책은 코드 수준에서 영구적으로 수정하는 것 — 즉, 텍스트의 이미지를 CSS와 웹 폰트로 스타일링된 실제 HTML 텍스트로 교체하는 것 — 이다.