alt 는 설명이 아니라 대체다

한 줄 요약

alt 에 무엇을 쓸지는 그림이 무엇을 그렸는지가 아니라 그 그림이 이 자리에서 무슨 일을 하는지로 정해진다. 그래서 같은 사진도 자리에 따라 답이 다르다.

왜 이게 필요했나

"이미지에 alt 를 넣으세요" 는 모두가 아는 규칙이고, 그래서 대개 넣기는 한다. 문제는 무엇을 넣느냐다. 실무에서 실제로 보이는 것들은 이렇다.

alt="이미지"alt="banner_2024_final_v3.png"alt="빨간 등산 배낭 45리터 제품 상세 페이지 바로가기 클릭"

첫째는 아무것도 알려 주지 않고, 둘째는 파일명을 읽어 주고, 셋째는 목록에서 고를 수 없을 만큼 길다. 셋 다 "alt 를 넣었는가" 검사는 통과한다.

그리고 반대 방향의 사고가 더 자주 난다. 장식용 그림에 설명을 넣어서 화면을 읽는 동안 의미 없는 소리가 계속 끼어드는 것이다. 구분선 이미지 스무 개가 전부 "선 장식" 이라고 읽히는 페이지는 그 자체로 못 쓸 페이지가 된다.

어떻게 동작하나 — 판단은 자리에서 나온다

[W3C 의 이미지 결정 트리](https://www.w3.org/WAI/tutorials/images/decision-tree/)는 이 판단을 몇 개의 질문으로 정리한다. 핵심만 옮기면 이렇다.

| 이 그림의 역할 | alt 에 쓸 것 |
|---|---|
| 내용을 전달한다 | 그 내용을 짧게 |
| 링크나 버튼 안에 있다 | 그림이 아니라 그 링크의 목적 |
| 옆에 같은 설명이 이미 있다 | alt="" — 두 번 읽히면 방해다 |
| 순수 장식이다 | alt="" |
| 글자를 그린 그림이다 | 그 글자 그대로 |
| 그래프나 도표다 | 요점 한 줄 + 본문에 실제 값 |

여기서 두 가지를 구분해야 한다.

alt 를 아예 안 쓰는 것과 alt="" 는 다르다. 속성이 없으면 스크린리더는 대체할 것이 없다고 판단해 파일명을 읽는다(IMG_20240103.jpg). 빈 문자열은 "읽을 것이 없음" 이라는 명시적인 선언이라 조용히 건너뛴다. 장식 이미지에는 반드시 빈 alt 를 적어 둔다.

그리고 링크 안의 이미지가 특히 자주 틀린다. <a href="/"><img src="logo.svg" alt="회사 로고"></a> 는 "회사 로고 링크" 라고 읽힌다. 어디로 가는 링크인지는 어디에도 없다. 여기서 alt 는 이미지의 설명이 아니라 링크의 이름이므로 alt="홈으로" 가 맞다.

figure 와 figcaption

figcaption 은 alt 의 대체재가 아니다. 둘의 독자가 다르다.

• alt — 그림을 못 보는 사람에게 그림 대신 주는 것
• figcaption — 모두가 보는 설명. 출처, 촬영 시점, 그림 번호

그래서 둘에 같은 문장을 쓰면 스크린리더 사용자는 같은 말을 두 번 듣는다. 캡션에 이미 내용이 다 적혀 있다면 alt="" 로 두는 편이 낫다.

표는 관계를 담는 그릇이다

표를 읽는 방식은 문단과 완전히 다르다. 스크린리더는 셀을 옮겨 다니며 그 셀이 어느 행·어느 열에 속하는지를 함께 읽어 준다. 그 연결을 만드는 것이 th 와 scope 다.

<table>  <caption>월별 매출</caption>  <thead>    <tr><th scope="col">월</th><th scope="col">매출</th></tr>  </thead>  <tbody>    <tr><th scope="row">1월</th><td>1,200</td></tr>  </tbody></table>

scope 가 있으면 "1월, 매출, 1200" 처럼 읽힌다. 없으면 숫자만 줄줄 읽히고, 열 개짜리 표에서 지금 보는 숫자가 무엇인지 알 방법이 없다. [W3C 의 표 튜토리얼](https://www.w3.org/WAI/tutorials/tables/)이 머리칸이 두 층인 복잡한 표까지 다룬다 — 그런 표는 headers 와 id 로 셀마다 연결을 적어 준다.

caption 은 표의 제목이다. 페이지에 표가 여럿일 때 목록으로 훑어 고를 수 있게 한다.

레이아웃 용도로 표를 쓰지 않는다. 행과 열이라는 관계를 선언해 놓고 실제로는 관계가 없으면, 스크린리더가 있지도 않은 구조를 읽어 준다.

현장에서 만나는 모습

자동 검사 도구는 alt 가 있는지 없는지는 완벽하게 잡지만 내용이 맞는지는 판단하지 못한다. 그래서 alt="이미지" 는 모든 도구를 통과한다. 이 판단은 사람이 해야 하고, 사람이 해야 하는 판단은 만드는 순간에 하는 것이 가장 싸다.

실무에서 가장 효과가 좋았던 것은 규칙을 늘리는 것이 아니라 질문을 하나로 줄이는 것이었다.

> 이 그림이 안 뜨면 그 자리에 무슨 글자가 있어야 하는가?

이 질문은 장식이면 "아무것도" 라는 답이 자연스럽게 나오고, 링크 안이면 "어디로 가는지" 가 나온다. 그림을 묘사하려는 충동도 자연스럽게 눌린다.

그리고 콘텐츠 관리 시스템을 쓴다면, 업로드 화면에서 alt 를 비워 둘 수 있게 하되 '장식입니다' 체크박스를 함께 두는 것이 효과가 컸다. 필수 입력으로 막아 두면 사람들은 공백 한 칸을 넣고 지나간다.

다음 퀴즈에서 확인할 것

같은 그림이 자리에 따라 어떻게 달라지는지, alt="" 와 속성 누락의 차이, figcaption 과의 역할 분담, 그리고 표에서 scope 가 하는 일을 확인합니다.