웹페이지에 이미지를 올릴 때 “무엇이 찍혔는지”만 적으면 충분할까요? 같은 의자 사진이라도 색상을 보여주는 상품 소개인지, 분위기를 더하는 장식인지에 따라 필요한 설명이 달라집니다. 이미지가 링크라면 눌렀을 때 어디로 이동하는지도 중요해요.
이번 글은 W3C WAI의 이미지 접근성 자료를 참고해 정리한 작성 가이드입니다. 실제 업무에서 적용해 성과를 확인한 후기는 아닙니다. 아래 사진 상황, 행사명, 문장과 양식은 독자가 바꿔 쓸 수 있도록 새로 만든 설명용 예시입니다.
대체 텍스트는 이미지의 역할을 전달해요
대체 텍스트는 이미지를 볼 수 없는 상황에서도 핵심 정보나 기능을 이해할 수 있도록 제공하는 글입니다. 웹페이지에서는 이미지의 alt 속성으로 전달하는 방식이 대표적이에요. W3C는 이미지가 페이지에서 어떤 역할을 하는지에 따라 적절한 대체 설명을 정하도록 안내합니다. W3C WAI 이미지 안내
이미지 아래 보이는 캡션과 alt는 같은 입력 항목이 아닙니다. 캡션에 문장을 적었다고 이미지의 alt에도 그 문장이 입력됐다고 판단하면 안 됩니다. 다만 주변 본문이나 캡션이 같은 정보를 충분히 전한다면, 반복해서 설명할 필요가 있는지도 함께 판단해야 합니다.
예시 1. 사진은 글에서 필요한 특징을 골라 설명하기
가상의 초록색 의자 사진을 생각해볼게요. 글에서 다리 구조와 좌판 색상을 비교한다면 그 특징이 핵심입니다. 반면 의자가 있는 공간의 배치를 설명한다면 사진에서 필요한 정보가 달라질 수 있어요.
| 사진을 사용하는 맥락 | 대체 텍스트 문장 예시 |
| 의자 색상과 구조 소개 | 나무 다리에 초록색 좌판과 등받이가 있는 의자 |
| 공간 배치 설명 | 원형 테이블 둘레에 놓인 초록색 의자 네 개 |
위 두 문장은 서로 다른 사진 상황을 가정한 예시입니다. 실제 사진에서 확인되지 않는 재질이나 개수를 추측해서 넣지 마세요. 파일명이나 “멋진 사진”처럼 정보가 적은 표현보다, 본문에서 필요한 특징을 짧게 적어보세요. W3C의 정보성 이미지 안내도 시각적으로 전달하는 의미와 내용을 설명하도록 권합니다. 정보성 이미지 설명 기준
예시 2. 글자가 들어간 배너는 문구가 빠지지 않게 하기
이미지에만 일정이나 신청 조건을 넣으면 그림을 보지 못하는 독자는 그 정보를 얻기 어렵습니다. 가능하면 실제 텍스트로 내용을 제공하고, 이미지로만 제시해야 한다면 해당 문구를 대체 설명에도 담아야 합니다. 글자가 들어간 이미지에 대한 W3C 안내
가상의 배너 문구
문서 디자인 기초 특강
온라인 진행 · 사전 신청 필요문장 예시
문서 디자인 기초 특강. 온라인 진행, 사전 신청 필요.
“특강 안내 배너”라고만 적으면 온라인 진행과 신청 조건이 빠져요. 반대로 본문에 행사명·일정·신청 조건을 모두 실제 텍스트로 제공했다면, 배너가 추가로 전달하는 정보가 있는지부터 살펴보세요. 단순 장식으로 처리할 수 있는지는 맥락에 따라 달라집니다.
예시 3. 링크 이미지는 모양보다 이동 목적을 설명하기
이미지만으로 구성된 링크는 사진의 외형을 설명하는 것만으로 기능을 알기 어려울 수 있습니다. W3C는 기능성 이미지의 대체 설명에 링크나 버튼의 동작 목적을 담도록 안내합니다. 같은 링크 안의 텍스트가 이미 목적을 충분히 설명하는 경우에는 이미지 설명이 불필요하게 반복되지 않도록 구분합니다. 기능성 이미지 설명 기준
| 가정한 사용 방식 | 목적을 담은 문장 예시 |
| 신청 페이지로 이동하는 이미지 단독 링크 | 문서 디자인 기초 특강 신청 페이지 |
| PDF 파일을 내려받는 이미지 단독 링크 | 특강 안내문 PDF 다운로드 |
“초록색 버튼”이나 “화살표 이미지”라는 설명만으로는 이동할 곳을 알기 어렵습니다. 실제로 다운로드되는 링크인지, 설명 페이지로 이동하는 링크인지 확인하고 목적에 맞게 적으세요. 표는 가상의 링크에 대한 문장 예시이며, 실제 신청이나 다운로드 기능을 제공하는 것은 아닙니다.
장식 이미지에는 빈 대체 텍스트가 필요할 수 있어요
모든 이미지에 긴 문장을 넣어야 하는 것은 아닙니다. 내용 이해에 필요한 정보를 더하지 않는 순수한 장식 이미지라면 빈 alt 값인 alt=""을 사용해 보조기술이 건너뛰도록 할 수 있습니다. 이것은 alt 속성 자체를 생략하는 것과 다릅니다. W3C는 alt가 없으면 일부 화면낭독기가 파일명 등을 읽을 수 있다고 설명합니다. 장식 이미지 안내
예를 들어 문단 사이의 장식용 점무늬와, 자료의 단계나 상태를 알려주는 표시는 역할이 다릅니다. 시각적으로 작아 보인다는 이유만으로 장식 이미지로 분류하지 말고, 그 표시를 빼면 정보가 사라지는지 살펴보세요.
복잡한 도표는 짧은 설명과 상세 내용을 나누기
여러 수치와 관계가 들어간 그래프라면 짧은 alt 한 문장에 모두 넣기 어려워요. 이미지가 무엇인지 알려주는 짧은 설명과, 중요한 수치·관계를 전하는 상세 설명을 함께 제공할 수 있습니다. 상세 내용은 주변 본문이나 표, 별도 설명으로 독자가 찾아볼 수 있게 구성하세요. 복잡한 이미지 설명 방법
가령 “항목별 비용 비교 그래프. 세부 수치는 아래 표에 정리”라고 썼다면 실제로 아래에 해당 표가 있어야 합니다. 설명할 수치나 추세를 그림만 보고 추정해서 채우지 말고 원자료와 대조하세요. 이 글은 실제 비용 데이터나 그래프의 분석 결과를 제시하지 않습니다.
복사해서 쓰는 이미지 설명 메모
입력 전에 아래 항목을 짧게 적으면 어떤 정보를 문장에 남길지 정리할 수 있습니다. 사용한 양식은 W3C가 제공한 서식이 아니라 이 글을 위해 만든 예시입니다.
이미지 위치: [어느 글·영역인지]
이미지의 역할: [정보 전달 / 글자 전달 / 링크·버튼 / 장식 등]
주변 본문에 이미 있는 정보: [반복되는 내용]
이미지에서만 얻는 정보: [핵심 내용]
클릭했을 때의 목적: [해당할 때 작성]
대체 텍스트 초안: [실제 내용에 맞는 문장]
긴 설명이 필요한 경우: [본문·표·별도 설명의 위치]
문장을 쓴 뒤에는 저장된 설명도 확인해요
초안을 쓴 다음에는 이미지를 가리고 본문과 설명만 읽는다고 생각해보세요. 핵심 정보가 빠지거나, 링크의 목적을 알 수 없거나, 같은 문장이 불필요하게 반복되는 부분이 있는지 살펴볼 수 있습니다. 이 검토만으로 모든 접근성 확인이 끝나는 것은 아닙니다.
편집 도구에서 캡션과 대체 텍스트 입력란을 구분하고, 저장 후에도 의도한 alt 값이 남는지 확인하세요. 장식 이미지는 빈 alt가 실제로 저장되는지도 확인해야 합니다. 이 글은 특정 편집기의 설정을 모두 시험한 안내가 아니라, 문장을 작성하고 검토할 때 사용할 예시 가이드입니다.
기존 HTML 이메일 발송 전 체크리스트가 발송 화면의 이미지·링크 확인을 다뤘다면, 이번 글은 웹페이지 이미지의 정보와 기능을 글로 전달하는 기준에 집중했습니다.
아래 이미지는 정보·글자·기능이라는 역할을 구분한 설명용 예시이며 실제 작업 화면이 아닙니다.
