이미지의 대체 텍스트

장식용 물결 무늬와 매출 그래프는 똑같이 img 요소를 쓰지만, 앞의 것에 맞는 alt는 빈 문자열이고 뒤의 것에는 온전한 문장이 필요합니다.

대체 텍스트는 무엇을 위한 것인가

화면 낭독기는 웹 페이지를 소리로 듣는 음성이나 손으로 읽는 점자로 바꿔 줍니다. 화면 낭독기가 그림에 이르면 그림의 픽셀을 들여다볼 수 없으므로, 그 대신 alt 속성을 읽습니다. 이미지가 제대로 불러와지지 않았을 때 그 자리에 나오는 글도, 검색 엔진이나 글자만 보여 주는 브라우저가 받는 글도 이것입니다. WCAG 2.2는 이 내용을 모든 기준 가운데 가장 앞에 둡니다. 성공 기준 1.1.1 「텍스트 아닌 콘텐츠」(A 수준)는 정보를 담은 이미지, 아이콘, 그래프마다 같은 구실을 하는 텍스트 대안을 하나씩 두라고 요구합니다.

여기서 중요한 말은 「같은 구실」입니다. 대체 텍스트는 사진 설명문도 아니고, 화면에 든 것을 모두 늘어놓는 목록도 아닙니다. 먼저 이 자리에서 눈으로 보는 사람이 그 그림에서 무엇을 얻는지 생각해 보고, 바로 그것을 적습니다. 예를 들어 빵집 홈페이지 첫 화면에 있는 빵 사진이라면 「썰어 놓은 사워도우 빵」이면 됩니다. 같은 사진이 빵 껍질 색을 다루는 글에 들어가면 「껍질이 거의 검을 만큼 짙고 속에 구멍이 크게 난 사워도우 빵」이 필요할 수 있습니다. 파일은 같아도 그 자리에서 하는 일이 다르니, 대체 텍스트도 달라집니다.

자주 만나는 네 가지 경우

W3C 이미지 안내서는 대부분의 그림을 몇 가지 갈래로 나눠 설명합니다. 사진이나 간단한 도해 같은 정보 이미지에는 그 그림이 무엇을 보여 주는지 짧게 적습니다. 구분선이나 배경 무늬처럼 꾸미기만 하는 장식 이미지에는 alt=""처럼 빈 alt를 주어 보조 기술이 그 그림을 건너뛰게 합니다. 누르면 홈으로 가는 로고나 검색을 실행하는 돋보기 같은 기능 이미지에는 「로고」, 「돋보기」가 아니라 「코너 베이커리 홈」, 「검색」처럼 그 그림을 눌렀을 때 일어나는 일을 적습니다. 글자를 그림으로 만든 이미지에는 그 그림 속 글자를 그대로 씁니다.

alt 속성을 아예 빼 버리는 것과 비워 두는 것은 서로 다릅니다. alt가 아예 없으면, 어떤 화면 낭독기는 그 대신 파일 이름을 읽어 버립니다. 그래서 듣는 사람은 「IMG 밑줄 4032 점 jpeg」 같은 소리를 듣게 됩니다. 반면 빈 alt는 「여기에는 볼 것이 없음」이라고 일부러 알리는 선택입니다. 복잡한 그래프라면 alt는 「월별 매출 막대그래프, 아래에 설명」처럼 짧게 두고, 자세한 숫자는 바로 옆에 있는 표나 문단에 적어 누구나 읽을 수 있게 합니다.

img 요소가 아닌 이미지

그림은 img 요소 말고도 인라인 SVG나 CSS 배경 이미지로 들어오기도 합니다. CSS 배경에는 대체 텍스트를 넣을 자리가 아예 없습니다. 그러니 CSS 배경은 장식에만 써야 하고, 의미를 담은 그림은 모두 HTML에 둡니다. 순수한 장식인 인라인 svg는 6단원에서 다루는 aria-hidden="true"로 화면 낭독기에서 숨길 수 있습니다. WCAG는 대체 텍스트의 글자 수를 정해 두지 않았지만, W3C 안내서는 같은 조언을 거듭 되풀이합니다. 짧게 쓰고, 이 맥락에서 중요한 것을 적으라는 것입니다. 대체 텍스트로 세 문장을 쓰고 있다면 그 내용은 아마 누구나 읽을 수 있는 본문에 들어가야 할 것입니다.

특별한 프로그램을 따로 쓰지 않아도 자기 페이지를 점검할 수 있습니다. 페이지 소스를 열어 <img를 검색해 보세요. 찾은 것마다 비어 있든 아니든 alt 속성이 있어야 합니다. 주요 브라우저에 들어 있는 개발자 도구에는 이미지마다 최종 이름이 무엇인지 보여 주는 접근성 패널도 있습니다. 그 이름들을 앞뒤 맥락 없이 줄줄이 이어서 읽어 보는 것은 아주 좋은 시험입니다. 목록이 「이미지, 이미지, 그래프, 로고」라면 화면 낭독기 사용자도 딱 그대로 듣게 됩니다.