이미지 대체 텍스트

기계는 그림 안의 글자를 읽지 못합니다. 화면을 소리로 읽어 주는 스크린 리더는 이미지를 만나면 이미지가 있다는 사실만 알리고 지나가거나 파일 이름을 그대로 읽습니다. 검색 엔진도 사정이 같아서, 그림 안에 무엇이 적혀 있는지는 그 그림만 봐서는 알아내지 못합니다.

그래서 같은 페이지가 두 독자에게 동시에 비어 보이는 일이 생깁니다. 요금제 비교표를 이미지 한 장으로 올린 페이지가 대표적입니다. 눈으로 보는 사람에게는 정보가 빽빽하지만, 낭독기로 듣는 사람에게는 아무것도 없고 검색 엔진에게도 그 페이지는 요금 이야기를 하지 않는 페이지입니다.

접근성 쪽에서 만들어진 속성이 검색 항목으로도 자리 잡은 이유가 이것입니다.

그림을 묘사하는 것이 아니라 그 이미지가 그 자리에서 맡은 역할을 적습니다. 이미지 종류에 따라 셋으로 갈립니다.

1. 정보를 담은 이미지입니다. 그래프라면 어떤 그래프인지가 아니라 그 그래프가 말하는 결론을 적습니다. 가입 전환율이 3월 12퍼센트에서 6월 19퍼센트로 올랐다고 적는 쪽이 꺾은선 그래프라고 적는 쪽보다 낫습니다.
2. 글자가 박힌 이미지입니다. 그 안의 글자를 그대로 옮겨 둡니다.
3. 장식용 이미지입니다. 값을 빈 문자열로 둡니다. 비우면 낭독기가 건너뛰는데, 속성을 아예 빼면 대신 파일 이름을 읽습니다.

길이는 한 문장, 100자 안쪽으로 둡니다. 그보다 길게 설명해야 하는 이미지라면 그 설명을 본문으로 옮기고 여기에는 요약만 남깁니다.

쓰지 않는 값도 정해져 있습니다. 이미지라는 말, 파일 이름, 검색어 나열입니다. 겨냥한 말을 억지로 밀어 넣으면 사람에게도 쓸모가 없고 검색 쪽에서도 감점 신호입니다. 링크가 걸린 이미지라면 그림 설명이 아니라 링크가 어디로 가는지를 적습니다.

바로 옆 본문이 이미 같은 말을 하고 있으면 비워 두는 편이 낫습니다. 이미지를 글로 설명하는 일 전반은 대체 텍스트에서 함께 다룹니다.

"비교표를 이미지로만 올려서 검색에도 낭독기에도 아무것도 안 잡힙니다."

정보가 그림 안에만 있다는 지적입니다.

"장식 이미지는 alt 를 빼지 말고 빈 값으로 두세요. 파일명 읽힙니다."

속성을 생략하는 것과 비워 두는 것이 다르다는 요청입니다.

"여기 키워드 네 개 넣지 말고 그래프 결론 한 줄만 적읍시다."

검색어 나열을 걷어내고 실제 내용을 적자는 제안입니다.

페이지덱 블로그에서 이 정리를 한 번 했습니다. 현우가 글 아흔 편을 훑어 보니 이미지 값이 절반 넘게 비어 있거나 파일명이었습니다. 민서와 나눠 채우면서 장식용과 정보용을 먼저 갈랐습니다. 장식용이 3분의 1이라 그쪽은 빈 값으로 끝냈습니다. 이미지 검색 유입이 그 분기에 조금 늘었습니다. 제목 태그처럼 순위를 크게 움직이는 항목은 아닙니다.