대체 텍스트

화면에 그림만 놓여 있으면 그 그림을 볼 수 없는 사람에게는 아무것도 전달되지 않습니다. 스크린 리더, 그러니까 화면에 있는 것을 소리로 읽어 주는 프로그램을 쓰는 사용자에게 이미지는 읽을 거리가 없는 빈칸입니다. 읽을 것이 정말 하나도 없으면 프로그램은 파일 이름이라도 읽습니다. 그래서 "이미지" 나 "IMG_2841 점 피엔지" 같은 소리가 문장 한가운데에 끼어듭니다.

페이지덱에서도 같은 일이 있었습니다. 요금제 개편 공지를 민서가 그림 한 장으로 예쁘게 만들어 올렸는데, 그 안에 시행일과 바뀌는 금액이 전부 글자로 그려져 있었습니다. 화면을 보는 사람에게는 잘 읽히는 공지였지만 소리로 듣는 사용자에게는 내용이 통째로 없는 공지였고, 문의가 들어오고 나서야 수아가 그 사실을 알렸습니다.

대체 텍스트는 이 빈칸을 메우려고 만든 자리입니다. 그림을 글로 한 번 더 적어 두면, 보는 사람은 그림으로 읽고 듣는 사람은 문장으로 듣습니다. 같은 정보를 두 갈래로 내보내는 셈입니다.

이미지를 넣는 태그에 설명을 적는 칸이 따로 있고, 거기 적은 문장이 대체 텍스트가 됩니다. 이 문장은 화면에 보이지 않습니다. 보조 기술에만 전달되고, 그림이 뜨지 않았을 때는 그 자리에 대신 표시됩니다. 통신이 느려 이미지가 깨진 화면에서 회색 네모 옆에 글자가 보인다면 그게 이 문장입니다.

무엇을 적느냐가 전부입니다. 규칙은 넷입니다.

1. 그림이 전하려는 정보를 적습니다. 보이는 것을 그대로 묘사하는 것이 아니라 이 자리에서 독자가 알아야 할 것을 적습니다. 같은 매출 그래프라도 실적 보고서에서는 "3분기 매출 4억 2천만 원, 2분기 대비 12퍼센트 증가" 가 맞고, 디자인 사례집에서는 "파란 막대 다섯 개로 그린 세로 막대그래프" 가 맞습니다.
2. 장식용 그림에는 빈 값을 넣습니다. 글 사이를 띄우는 선이나 배경 무늬처럼 정보가 없는 그림은 설명을 비워 둡니다. 비워 두면 스크린 리더가 그 자리를 건너뜁니다. 아예 칸을 지우는 것과 다릅니다. 칸이 없으면 프로그램이 파일 이름을 읽어 버립니다.
3. "~의 이미지" 나 "사진:" 같은 말은 붙이지 않습니다. 이미지라는 사실은 프로그램이 이미 알려 주기 때문에, 붙이면 "이미지, 3분기 매출 그래프 이미지" 처럼 두 번 들립니다.
4. 길이는 한두 문장에서 끊습니다. 그보다 길어질 만한 그림이라면 요점만 여기 적고 자세한 내용은 본문에 글로 풉니다.

같은 문장이 세 자리에서 각각 다른 일을 합니다.

첫째는 접근성입니다. 이 자리가 원래 목적이고, WCAG처럼 무엇을 어디까지 맞춰야 하는지 정해 둔 국제 지침에도 항목으로 들어 있습니다. 공공기관 사업 검토서에 적힌 접근성 요구를 따라가면 거의 이 항목에 닿습니다.

둘째는 이미지가 뜨지 않을 때입니다. 네트워크가 끊겼거나 주소가 틀렸거나 회사 방화벽이 외부 이미지를 막았을 때, 화면에 남는 것은 이 문장뿐입니다. 메일로 보내는 안내처럼 이미지가 기본으로 차단되는 자리에서는 이 값이 사실상 본문 구실을 합니다.

셋째는 검색입니다. 검색 엔진도 그림을 직접 읽지 못해서 옆에 붙은 글로 내용을 판단합니다. 마케팅 쪽에서는 같은 것을 이미지 대체 텍스트라고 부르며 검색 노출을 위한 자산으로 다룹니다. 이름과 기술은 같고 목적이 다릅니다.

작업 순서로 보면 이 문장을 처음 적는 사람은 대개 그림을 만든 쪽입니다. 페이지덱에서는 민서가 시안을 넘길 때 이미지마다 설명을 함께 적어 두고, 태오가 화면을 만들면서 그대로 옮겨 넣습니다. 이 값이 비어 있는지는 검사 도구가 자동으로 잡아 주지만, 들어 있는 문장이 쓸 만한지는 기계가 판정하지 못해 사람이 읽습니다. 같은 접근성 갈래의 시맨틱 마크업이나 ARIA와 마찬가지로, 스크린 리더에 무엇이 어떤 이름으로 전달되는지를 정하는 일입니다.

"이 배너 대체 텍스트 비어 있어요. 안에 적힌 문구 그대로 넣어 주세요."

그림 안에 글자로 그려진 정보가 소리로는 전달되지 않는다는 지적입니다.

"장식이라 대체 텍스트는 빈 값으로 두고 넘겼습니다."

일부러 비운 것이니 누락으로 보고 채우지 말라는 뜻입니다.

"대체 텍스트에 키워드 넣지 마세요. 그거 읽는 사람이 있어요."

검색 노출을 노려 단어를 나열하면 듣는 사용자에게 그대로 들린다는 경고입니다.

페이지덱에서는 공지 이미지 때문에 문의가 들어온 뒤로 순서가 하나 늘었습니다. 민서가 시안을 올릴 때 이미지마다 설명을 한 줄씩 적어 두고, 검수에서 그 줄이 화면에 실제로 들어갔는지를 확인합니다. 지현이 공지를 쓸 때도 그림 안의 글자는 본문에 한 번 더 적습니다.

규칙을 하나 더 두었습니다. 시행일이나 금액처럼 틀리면 곤란한 정보는 애초에 그림 안에만 넣지 않습니다. 대체 텍스트로 메울 수는 있지만, 그림과 문장 두 곳을 고쳐야 하는 상태는 언젠가 한쪽만 고쳐진 채로 남기 때문입니다.

모든 이미지에 설명을 채워야 한다고 생각하는 경우가 많습니다. 빈칸을 잡아내는 검사 도구가 장식용 그림까지 똑같이 지적하니 그렇게 읽기 쉽습니다. 하지만 정보가 없는 그림에 설명을 붙이면 듣는 사람에게는 소음만 늘어납니다. 구분선 열 개에 "구분선" 이 열 번 붙은 화면은 아무 설명이 없는 화면보다 읽기 어렵습니다. 채워야 할 것과 비워야 할 것을 가르는 기준은 그림이 사라졌을 때 잃는 정보가 있느냐입니다.

검색 노출을 위한 칸으로 읽는 것도 흔합니다. 셋째 용도가 실제로 있으니 더 그렇습니다. 그래서 "협업 문서 툴 협업 도구 문서 관리 무료" 처럼 단어를 나열해 넣는 일이 생깁니다. 이 문장은 소리로 읽히는 문장이기도 해서, 그렇게 채우면 듣는 사용자는 그림 자리에서 광고 문구를 듣게 됩니다. 검색 엔진도 이런 나열을 걸러 내는 쪽으로 움직여 왔습니다. 결국 양쪽 다 얻지 못합니다.