alt 속성

alt 속성은 웹 페이지의 그림에 그림 대신 쓸 글을 붙여 줍니다. 화면을 소리로 읽어 주는 프로그램은 그림을 만나면 이 글을 읽습니다. 그림 파일을 불러오지 못한 화면에는 그림 대신 이 글이 뜹니다.

상세

이 절은 <img> 태그 하나를 예로 씁니다. 먼저 alt 라는 칸이 왜 필요한지 봅니다. 그다음 브라우저가 그 값을 어떻게 다루는지 따라갑니다.

뒤쪽에서는 그림이 링크나 버튼 안에 들어갈 때를 봅니다. 끝으로 서버가 alt 값을 채워 HTML 을 만들 때 생기는 일을 봅니다.

그림 태그에 붙는 칸

웹 페이지는 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)로 씁니다. HTML 은 내용을 태그로 감싸 그 내용이 무엇인지 알립니다.

태그 안에는 이름="값" 꼴로 정보를 덧붙입니다. 이 칸을 속성이라고 부릅니다. alt 는 그림을 넣는 img 태그에 붙는 속성입니다.

alt 는 alternative(대안)의 줄임말입니다. 여기 적는 글을 대체 텍스트라고 부릅니다. 무엇을 적을지는 그 항목이 다룹니다. 이 항목은 alt 라는 칸 자체를 봅니다.

아래가 가장 흔한 꼴입니다. 오른쪽 주석은 이 그림이 얻는 이름입니다.

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

src(source, 출처)는 그림 파일이 있는 주소입니다. alt 가 그 그림 대신 쓰일 글입니다.

주소만 있는 그림

<img> 태그에는 그림 자체가 들어 있지 않습니다. 들어 있는 것은 그림 파일의 주소뿐입니다. 브라우저가 그 주소로 파일을 따로 받아 와 화면에 그립니다.

그래서 그림이 무엇을 보여 주는지는 페이지 글 어디에도 없습니다. 픽셀을 못 보는 쪽은 cart.png 라는 파일 이름밖에 얻지 못합니다.

픽셀을 못 보는 쪽은 여럿입니다. 화면의 글을 소리나 점자로 읽어 주는 스크린 리더가 그렇습니다. 그림 파일을 받지 못한 브라우저도, 페이지를 모으러 다니는 크롤러도 그렇습니다. alt 는 이들에게 그림의 내용을 글로 건네는 기본 통로입니다.

값이 셋으로 갈린다

alt 는 값이 있을 때, 값을 비웠을 때, 속성을 아예 빠뜨렸을 때 결과가 다릅니다. 그 차이를 보려면 브라우저가 스크린 리더에게 무엇을 건네는지부터 알아야 합니다.

브라우저는 화면을 그리는 것과 따로 부품 명단을 하나 만듭니다. 부품은 링크·버튼·그림처럼 화면에 놓인 낱낱의 요소입니다. 이 명단을 접근성 트리라고 합니다. 스크린 리더는 화면 대신 이 명단을 읽습니다.

명단의 부품마다 이름이 하나씩 붙습니다. 이 이름을 접근 가능한 이름이라고 합니다. 스크린 리더가 소리 내어 읽는 것이 이 이름입니다.

alt 값은 그림의 이름이 됩니다. 값을 비우면 「꾸밈일 뿐인 그림」이라는 뜻이 되어 명단에서 빠집니다. 이름을 정하는 갈림을 그리면 아래와 같습니다.

flowchart TD
    A{"alt 속성이 있나"}
    A -->|없다| B["이름 없는 그림으로 남긴다"]
    B --> C["스크린 리더가 파일 이름을 읽기도 한다"]
    A -->|있다| D{"값이 비었나"}
    D -->|비었다| E["꾸밈 그림으로 보고 명단에서 뺀다"]
    D -->|아니다| F["alt 값을 그림의 이름으로 삼는다"]

alt="" 는 「이 그림은 꾸밈일 뿐 전할 정보가 없다」는 선언입니다. 구분선이나 배경 무늬 같은 장식 이미지에 씁니다. 스크린 리더는 이런 그림을 건너뜁니다.

속성을 빠뜨리면 그런 선언이 없습니다. 스크린 리더는 그림이 정보인지 꾸밈인지 모릅니다. 그래서 무엇이라도 알려 주려고 IMG_2041.jpg 같은 파일 이름을 읽기도 합니다.

빈 값과 빠진 값은 글자 몇 개 차이입니다. 듣는 쪽에서는 결과가 전혀 다릅니다.

그림이 안 뜰 때

주소가 깨졌거나 네트워크가 끊겨 그림 파일을 못 받는 때가 있습니다. 이때 브라우저는 그림 영역에 alt 글자를 띄웁니다. 아이콘과 함께 띄울지 글자만 띄울지는 브라우저마다 다릅니다.

alt="" 인 그림은 못 받아도 아무것도 띄우지 않습니다. 꾸밈이 하나 빠질 뿐이라 화면이 깨져 보이지 않습니다.

링크 안의 그림

그림이 링크 안에 혼자 들어 있으면 alt 가 그 링크의 이름이 됩니다. 링크 안에 다른 글자가 없기 때문입니다. 스크린 리더는 「홈, 링크」처럼 이름 뒤에 부품의 종류를 붙여 읽습니다.

아래 두 덩어리는 모두 홈으로 가는 링크 안에 로고 그림을 넣은 것입니다. <a> 는 링크를 만드는 태그입니다. href(hypertext reference)는 그 링크가 가리키는 주소입니다.

짧게 보이려고 src 는 뺐습니다. 오른쪽 주석은 그 링크가 얻는 이름입니다.

<a href="/">
  <img alt="로고"> <!-- 로고 -->
</a>
<a href="/">
  <img alt="홈">   <!-- 홈 -->
</a>

첫 줄을 들은 사용자는 로고가 있다는 것만 압니다. 둘째 줄은 누르면 어디로 가는지를 알려 줍니다. 링크 안의 그림에는 생김새 대신 누르면 무엇이 되는지를 적습니다.

alt 를 받는 세 태그

alt 를 받는 태그는 셋입니다. 셋 모두 그림을 다루는 태그입니다.

<input type="image"> 는 폼을 보내는 버튼을 그림으로 그립니다. 돋보기 그림으로 된 검색 버튼이라면 alt 에 「검색」을 적습니다.

<area> 는 이미지 맵에 씁니다. 이미지 맵은 그림 하나를 여러 구역으로 나눠 구역마다 다른 링크를 거는 장치입니다. 지도 그림에서 지역마다 다른 페이지로 가는 것이 그 예입니다.

이 셋 말고 다른 태그에 alt 를 적으면 브라우저는 그 값을 쓰지 않습니다. 아이콘을 그릴 때 흔히 쓰는 <svg>(Scalable Vector Graphics, 확장 가능한 벡터 그래픽) 태그도 alt 를 받지 않습니다. 그런 부품에는 aria-label 처럼 이름을 붙이는 다른 속성을 씁니다.

title 속성과 다른 점

title 속성도 그림에 글을 붙입니다. 하지만 하는 일이 다릅니다. title 은 마우스를 올렸을 때 뜨는 작은 설명 상자, 곧 툴팁의 글입니다.

툴팁은 마우스가 없으면 볼 수 없습니다. 손가락으로 쓰는 휴대폰이나 키보드로만 다니는 사용자에게는 안 뜹니다. 스크린 리더가 title 을 읽는지도 프로그램마다 다릅니다. 그래서 그림의 내용을 전하는 글은 title 이 아니라 alt 에 적습니다.

서버가 alt 를 채울 때

백엔드에서 HTML 을 만들어 내려보내면 alt 값도 서버가 채웁니다. 사용자가 올린 상품 사진이 그 예입니다. 사진 파일만 저장하면 alt 에 넣을 글이 없습니다. 그래서 사진을 올릴 때 설명 글을 함께 받아 같은 레코드에 저장합니다.

설명 글이 비었다고 alt 를 빼거나 빈 값으로 내보내면 둘 다 어긋납니다. 빼면 스크린 리더가 파일 이름을 읽습니다. 빈 값은 「꾸밈」이라는 선언이라 정보가 있는 사진이 명단에서 사라집니다.

값을 속성에 넣을 때는 따옴표를 조심합니다. alt 값은 큰따옴표 사이에 들어갑니다. 값 안에 큰따옴표가 있으면 속성이 거기서 끝나 버립니다.

아래 두 줄은 「12" 피자」라는 상품명을 alt 에 넣은 것입니다. 여기서도 src 는 뺐습니다. 오른쪽 주석은 브라우저가 읽는 alt 값입니다.

<img alt="12" 피자">       <!-- 12 -->
<img alt="12&quot; 피자"> <!-- 12" 피자 -->

첫 줄은 alt 가 12 에서 끝납니다. 뒤의 글자는 엉뚱한 속성으로 읽힙니다. 둘째 줄은 큰따옴표를 " 로 바꿔 적었습니다. 이렇게 특수 문자를 다른 표기로 바꾸는 일을 이스케이프라고 합니다.

이 구멍은 깨진 화면에서 끝나지 않습니다. 그림 태그에는 onerror 라는 속성도 붙일 수 있습니다. 그림 파일을 못 받았을 때 거기 적힌 스크립트를 실행하는 속성입니다. 사용자가 alt 값에 " onerror=" 로 시작하는 글을 넣으면 이 속성이 태그에 끼어듭니다.

그러면 그 페이지를 연 다른 사용자의 브라우저에서 스크립트가 실행됩니다. 이 공격을 교차 사이트 스크립팅, 줄여서 XSS(Cross-Site Scripting)라고 합니다.

템플릿 엔진은 HTML 틀에 값을 끼워 넣어 페이지를 만드는 도구입니다. 대부분의 템플릿 엔진은 값을 넣을 때 이스케이프를 알아서 합니다. 문자열을 손으로 이어 붙여 HTML 을 만들 때 이 단계가 빠집니다.

빠진 alt 를 찾는 법

HTML 문서의 잘못을 찾아 주는 HTML 검사기는 alt 가 없는 <img> 를 오류로 알립니다. <img> 에는 alt 를 다는 것이 원칙이기 때문입니다.

브라우저 개발자 도구의 접근성 패널을 열면 그림마다 정해진 이름이 보입니다. alt 를 빠뜨렸는지 비웠는지는 이 패널에서 갈라 볼 수 있습니다.

관련 항목

alt 속성이 속하는 상위 분류와 표준

HTML · HTML Living Standard · 접근성 · 웹 접근성 · WCAG

alt 속성을 받는 태그

img 요소 · input 요소 · area 요소 · 이미지 맵 · 폼

alt 속성 값이 들어가는 접근성 트리의 정보

대체 텍스트 · 접근성 트리 · 접근 가능한 이름 · 이름 계산 · 장식 이미지

alt 속성과 함께 이름·설명을 붙이는 수단

title 속성 · aria-label · aria-labelledby · aria-hidden · figcaption 요소 · 툴팁

alt 속성 값을 읽어 쓰는 프로그램

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

alt 속성 값을 서버에서 채울 때 만나는 문제

HTML 이스케이프 · 교차 사이트 스크립팅 · 템플릿 엔진 · HTML 엔티티 · 출력 인코딩

빠진 alt 속성을 찾는 도구

HTML 검사기 · 개발자 도구 · 자동 검사 · 린터