Alt Text 작성법: 장식·정보·기능 이미지와 파일명·캡션 구분
대체 텍스트, 파일명, 캡션, 이미지 제목과 URL의 역할을 구분해 접근성과 이미지 검색 문맥을 동시에 개선하는 실무 가이드입니다.
Alt Text는 이미지 키워드 순위를 높이기 위한 입력란이 아니라 이미지를 볼 수 없는 사용자에게 같은 정보나 기능을 전달하는 대체 텍스트입니다. 모든 이미지에 긴 설명을 넣는 것도, 모든 alt를 비우는 것도 정답이 아닙니다. 이미지가 현재 페이지에서 어떤 역할을 하는지 먼저 판단합니다.
이미지 유형별 alt 결정표
| 이미지 유형 | alt 처리 | 예시 |
|---|---|---|
| 장식 이미지 | alt="" | 구분선·배경 장식 |
| 정보 사진·도해 | 핵심 의미를 간결하게 설명 | “모바일 LCP가 4.2초인 보고서 화면” |
| 기능 이미지 | 모양보다 동작·목적 설명 | “검색”, “파일 다운로드” |
| 링크 이미지 | 링크 목적지 설명 | “INXSEO 홈으로 이동” |
| 복합 차트 | 짧은 alt + 본문·표에 전체 데이터 | 추세 요약 후 데이터 표 제공 |
좋은 대체 텍스트의 작성 순서
- 이미지가 없으면 독자가 놓치는 정보나 기능을 적습니다.
- 주변 제목·캡션·본문에서 이미 설명한 내용은 반복하지 않습니다.
- “이미지”, “사진” 같은 불필요한 말을 기본적으로 생략합니다.
- 중요한 정보와 기능을 문장 앞부분에 둡니다.
- 길어지면 상세 설명을 본문·표·별도 링크로 옮깁니다.
키워드는 문맥에 있을 때만 사용합니다
이미지가 실제로 “워드프레스 robots.txt 설정 화면”을 보여 준다면 해당 용어를 alt에 넣을 수 있습니다. 그러나 모든 이미지에 같은 키워드를 반복하거나 보이지 않는 상품명·지역명을 추가하면 접근성을 해치고 스팸처럼 보일 수 있습니다.
파일명·캡션·제목의 역할은 다릅니다
| 필드 | 주요 역할 | 작성 기준 |
|---|---|---|
| 파일명 | 관리·발견의 약한 단서 | 짧고 설명적, 버전·크기 구분 |
| alt | 이미지 정보·기능의 대체 | 현재 문맥에서 필요한 의미 |
| 캡션 | 모든 사용자에게 보이는 설명·출처 | 해석·출처·주의사항 |
| title 속성 | 보조 정보 | 핵심 정보 전달에 의존하지 않음 |
| 미디어 설명 | CMS 내부 관리 또는 첨부 페이지 | 사이트 구조에 맞게 사용 |
잘못된 예와 수정
- 나쁨:
alt="SEO SEO 이미지 SEO 구글 상위노출"
수정:alt="Search Console에서 페이지별 클릭과 노출을 비교한 표" - 나쁨: 장식 파란 곡선에
alt="파란색 아름다운 장식"
수정:alt="" - 나쁨: 돋보기 버튼에
alt="돋보기 아이콘"
수정: 버튼에 접근 가능한 이름 “검색” 제공
복합 이미지와 스크린샷
차트의 모든 수치를 alt 하나에 넣지 않습니다. 핵심 결론을 짧게 적고 동일 데이터를 HTML 표나 본문에 제공합니다. 스크린샷은 화면 전체를 묘사하기보다 독자가 찾아야 하는 메뉴·오류·변경 결과를 설명합니다.
발행 전 검사
- 이미지를 끄거나 스크린 리더로도 정보 흐름이 이해되는가
- 장식 이미지에 빈 alt가 있는가
- 링크·버튼 이미지의 목적이 명확한가
- 본문과 alt가 불필요하게 반복되지 않는가
- 키워드·상품명을 이미지에 없는 내용까지 넣지 않았는가
언어가 다른 페이지에서는 alt도 현지화합니다
같은 이미지라도 페이지 언어가 다르면 대체 텍스트도 해당 언어와 문맥에 맞춰 제공합니다. 원문 alt를 기계적으로 복사해 주변 콘텐츠와 언어가 섞이지 않게 하세요. 제품명처럼 유지해야 할 고유명사와 번역할 설명을 구분합니다.
CMS 자동 입력을 검수합니다
파일명이나 미디어 제목을 alt에 자동 복사하는 기능은 초안으로만 사용합니다. 장식 이미지, 링크 이미지와 복합 차트의 목적을 자동화가 정확히 판단하지 못할 수 있습니다. 대표 템플릿과 자주 쓰는 블록을 표본 검사하고 빈 alt가 필요한 경우를 별도로 설정합니다.
대체 텍스트 검수는 실제 문맥에서 진행합니다
미디어 라이브러리 화면에서 alt만 보면 주변 제목·캡션과 중복되는지 알기 어렵습니다. 실제 게시 페이지에서 이미지 앞뒤 문장을 읽고, 이미지를 숨긴 상태에서도 흐름과 기능이 유지되는지 확인하세요. 동일 이미지도 사용 목적이 달라지면 페이지별 alt가 달라질 수 있습니다.
같은 아이콘도 위치에 따라 alt가 달라집니다
돋보기 이미지가 검색 버튼의 유일한 내용이라면 대체 텍스트는 ‘돋보기 그림’보다 버튼이 수행하는 ‘검색’ 기능을 설명하는 편이 적절합니다. 이미 옆에 ‘검색’이라는 실제 텍스트가 있고 아이콘이 장식이라면 alt=""가 중복 낭독을 줄일 수 있습니다. W3C 대체 텍스트 결정 트리도 이미지의 기능과 문맥을 기준으로 판단합니다.
정보 그래프는 그림을 한 문장으로 전부 설명하기 어려울 수 있습니다. 짧은 대체 텍스트로 주제와 핵심 경향을 전달하고, 수치 표나 상세 설명을 본문에 제공해야 합니다. 화면에 보이는 글자를 무조건 모두 alt에 복사하는 방법은 문맥에 따라 중복이 될 수 있습니다.
파일명은 자료를 관리하고 검색엔진에 약한 단서를 주는 요소일 수 있지만 접근성의 대체 설명은 아닙니다. 화면 낭독기로 해당 페이지를 읽는 사용자가 실제로 어떤 정보를 얻는지 검토하세요.
공식 확인 자료
대체 텍스트는 이미지의 모양을 무조건 묘사하는 문장이 아니라, 이미지가 사라졌을 때 사용자가 잃는 정보나 기능을 가장 짧게 보충하는 문장입니다.
대체 텍스트를 작성할 때 파일 이름이나 이미지 안의 모든 색을 나열할 필요는 없습니다. 링크로 동작하는 돋보기 아이콘은 ‘검색’처럼 행동을 알려야 하고, 같은 정보가 바로 옆의 본문에 있는 장식용 이미지는 빈 alt가 적절할 수 있습니다. 그래프처럼 수치가 중요한 이미지는 짧은 alt만으로 충분한지 확인하고 본문 또는 표에 핵심 값을 제공하세요. 화면 읽기 도구에서 실제로 어떻게 들리는지도 확인하면 반복 설명을 줄일 수 있습니다.