대체 텍스트

대체 텍스트는 이미지를 볼 수 없는 사람에게 그 이미지가 전하려던 내용을 글로 대신 전해 줍니다. 화면을 소리로 읽어 주는 프로그램이 이 글을 읽어 줍니다. 그림을 불러오지 못한 화면에도 그림 대신 이 글이 뜹니다. 웹 페이지에서는 이미지를 넣는 태그에 이 글을 함께 적습니다.

상세

라디오 야구 중계를 떠올리면 가깝습니다. 캐스터는 화면을 못 보는 청취자에게 「타자가 친 공이 담장을 넘어갑니다」라고 말로 그려 줍니다. 투수 모자 색깔은 말하지 않습니다. 지금 경기에서 중요한 것만 골라 말합니다.

대체 텍스트는 이미지가 전하는 내용을 글로 바꿔 둔 것입니다. 같은 정보를 눈이 아닌 다른 길로도 받을 수 있게 하려고 둡니다.

예를 들어 쇼핑몰 화면 위쪽에 수레 모양 아이콘이 있다고 해 봅시다. 이 아이콘의 대체 텍스트는 「장바구니」입니다. 아이콘을 못 보는 사람도 이 글을 듣고 장바구니로 가는 버튼이라는 것을 압니다.

대체 텍스트를 읽는 세 프로그램

대체 텍스트를 받아 쓰는 프로그램은 셋입니다. 셋 모두 그림을 눈으로 보지 못하거나 그림을 받지 못한 채 페이지를 다룹니다.

첫째는 스크린 리더입니다. 스크린 리더는 화면에 있는 글을 소리로 읽어 주는 프로그램입니다. 앞을 보지 못하는 사람이 컴퓨터와 휴대폰을 쓸 때 씁니다. 읽은 글을 손끝으로 읽는 점자 디스플레이로 내보내기도 합니다.

스크린 리더는 그림의 픽셀을 읽지 못합니다. 그래서 그림을 만나면 그 그림의 대체 텍스트를 읽습니다. 대체 텍스트가 없으면 「이미지」라고만 말하거나 IMG_2041.jpg 같은 파일 이름을 읽기도 합니다.

둘째는 브라우저입니다. 그림 주소가 깨졌거나 네트워크가 느려 그림을 못 받으면 브라우저는 그림이 있을 칸에 대체 텍스트를 글자로 띄웁니다. 그림이 없어도 무엇이 있었는지는 남습니다.

셋째는 검색 엔진입니다. 검색 엔진은 웹 페이지를 미리 모아 두었다가 검색어에 맞는 페이지를 찾아 줍니다.

페이지를 모으는 일은 크롤러라는 프로그램이 맡습니다. 크롤러는 그림의 내용을 글만큼 잘 알아듣지 못합니다. 그래서 대체 텍스트를 그 그림이 무엇인지 알려 주는 단서의 하나로 씁니다.

셋을 나란히 놓으면 이렇습니다.

HTML 에서 적는 법

웹 페이지는 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)로 적습니다. HTML 은 내용을 태그로 감싸 그 내용이 무엇인지 알립니다. 이미지를 넣는 태그는 <img> 입니다.

태그 안에는 이름="값" 꼴로 정보를 덧붙일 수 있습니다. 이 칸을 속성이라고 부릅니다. 대체 텍스트는 <img> 태그의 alt 속성에 적습니다.

alt 는 alternative(대안)의 줄임말입니다. 실무에서 대체 텍스트를 흔히 「alt 텍스트」라고 부르는 까닭입니다.

<img src="cart.png" alt="장바구니">

src(source, 출처)는 그림 파일이 있는 주소입니다. alt 가 그 그림 대신 쓰일 글입니다. 이 태그를 만난 스크린 리더는 그림 파일 대신 「장바구니」를 읽습니다.

README 같은 문서를 쓸 때 쓰는 마크다운에도 같은 칸이 있습니다. 그림을 넣는 문법 ![장바구니](cart.png) 에서 대괄호 안의 글이 대체 텍스트입니다. 마크다운이 HTML 로 바뀔 때 이 글이 alt 속성의 값이 됩니다.

비워 두는 alt 와 빠뜨린 alt

모든 그림이 정보를 주지는 않습니다. 문단 사이의 구분선이나 배경 무늬처럼 꾸미기만 하는 그림이 있습니다. 이런 그림을 장식 이미지라고 부릅니다.

장식 이미지까지 하나하나 읽어 주면 스크린 리더 사용자는 쓸모없는 말을 계속 들어야 합니다. 그래서 장식 이미지에는 alt 를 일부러 비워 alt="" 로 적습니다. 빈 값을 만난 스크린 리더는 그 그림을 건너뜁니다.

alt 를 비워 둔 것과 아예 빠뜨린 것은 결과가 다릅니다. 빠뜨리면 스크린 리더는 그 그림이 꾸밈인지 정보인지 모릅니다. 그래서 무엇이라도 알려 주려고 파일 이름을 대신 읽는 경우가 많습니다.

세 경우를 스크린 리더가 내는 말로 견주면 이렇습니다.

그 페이지에서 그림이 하는 일을 적는 기준

대체 텍스트에는 그림의 생김새가 아니라 그 페이지에서 그림이 하는 일을 적습니다. 같은 그림이라도 놓인 페이지에 따라 대체 텍스트가 달라집니다.

돋보기 아이콘을 예로 들어 봅니다. 검색창 옆에서 누르면 검색이 되는 버튼이라면 대체 텍스트는 「돋보기」가 아니라 「검색」입니다. 듣는 사람에게 필요한 것은 모양이 아니라 누르면 무엇이 되는지입니다. 누르면 다른 페이지로 가는 그림, 곧 이미지 링크도 같은 기준이라 그림 모양 대신 어디로 가는지를 적습니다.

그림이 그래프처럼 정보를 많이 담고 있으면 한 문장으로는 다 옮기지 못합니다. 이때는 alt 에 「월별 가입자 추이 그래프」처럼 짧은 이름만 적습니다. 그래프가 말하는 내용은 그림 가까이의 본문에 긴 설명으로 따로 적습니다.

이 판단을 순서대로 그리면 아래와 같습니다. 먼저 그림이 전하는 정보가 있는지를 묻습니다. 있으면 그림의 쓰임을 따라 내려갑니다.

flowchart TD
    B{"이 그림이 전하는 정보가 있나"}
    B -->|없다| C["alt 를 비운다"]
    B -->|있다| D{"누르는 링크나 버튼인가"}
    D -->|그렇다| E["누르면 무엇이 되는지·어디로 가는지 적는다"]
    D -->|아니다| F{"그래프처럼 정보가 많은가"}
    F -->|많다| G["짧은 alt + 본문에 긴 설명"]
    F -->|적다| H["전하려던 내용을 한 문장으로 적는다"]

그림 안에 글자가 들어 있으면 그 글자를 대체 텍스트에 옮겨 적습니다. 「여름 세일」이 적힌 배너라면 대체 텍스트도 「여름 세일」입니다.

「이미지:」나 「사진」 같은 말을 앞에 붙이지 않습니다. 스크린 리더가 그림이라는 것을 이미 알려 주기 때문입니다. 붙이면 사용자는 「이미지, 이미지: 장바구니」처럼 같은 말을 두 번 듣습니다.

대체 텍스트를 요구하는 규칙

대체 텍스트는 웹 접근성의 기본기로 꼽힙니다. 접근성은 장애가 있는 사람도 서비스를 똑같이 쓸 수 있게 만드는 일입니다.

웹 접근성 지침인 WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침)는 그림이나 소리처럼 글이 아닌 내용마다 같은 목적을 하는 글을 함께 두라고 요구합니다. 이미지에서 그 요구를 채우는 방법이 대체 텍스트입니다.

HTML 의 문법을 정한 HTML 표준도 <img> 에 alt 를 다는 것을 원칙으로 둡니다. HTML 문서의 잘못을 찾아 주는 HTML 검사기가 alt 가 빠진 <img> 를 오류로 알리는 것도 이 때문입니다.

같은 이름을 쓰는 XML 의 대체 텍스트

XML(Extensible Markup Language, 확장 가능한 마크업 언어) 문서를 다루다 보면 전혀 다른 뜻의 대체 텍스트를 만납니다. XML 에는 엔티티라는 것이 있습니다. 글 조각에 이름을 붙여 두는 장치입니다. 문서 곳곳에서는 그 이름으로 그 글 조각을 불러 씁니다.

문서가 엔티티 이름을 부르면 그 이름은 붙여 둔 글 조각으로 바뀝니다. 이렇게 바뀌어 들어가는 글을 영어로 replacement text 라고 하고 우리말로 대체 텍스트라고 옮깁니다. 이 항목의 대체 텍스트와는 이름만 같습니다.

관련 항목

대체 텍스트가 채우는 접근성 요구

접근성 · 웹 접근성 · WCAG · HTML Living Standard · HTML 검사기

대체 텍스트를 담는 마크업

HTML · alt 속성 · img 요소 · 속성 · 태그 · 마크다운 · figcaption 요소

대체 텍스트를 읽어 주는 프로그램

스크린 리더 · 점자 디스플레이 · 브라우저 · 웹 크롤러 · 검색 엔진

대체 텍스트를 다르게 쓰는 이미지 종류

장식 이미지 · 이미지 링크 · 아이콘 버튼 · 차트 · 이미지

대체 텍스트 말고 글로 대신 전하는 수단

aria-label · ARIA · 자막 · 음성 해설 · contentDescription

대체 텍스트와 이름이 겹치는 대상

XML · 엔티티 · 엔티티 참조 · 대체 문자