이미지 대체텍스트, 다섯 질문으로 정하기 — 배너 · 버튼 · 배경 사진 예시
이미지 대체텍스트는 '사진에 무엇이 보이나'보다 '이 그림이 이 자리에서 무슨 일을 하나'로 정합니다. 같은 전화기 그림도 전화 버튼이면 '전화 걸기', 옆에 번호가 글자로 적혀 있으면 비워 둡니다. W3C가 공개한 대체텍스트 결정 순서는 다섯 질문이면 거의 모든 사진의 답이 나오게 짜여 있습니다. 이 글은 그 순서를 가게 홈페이지에 흔한 배너 · 버튼 · 배경 사진 · 약도에 대 보는 데 집중합니다. 글자 대비나 사진 파일 이름은 앞선 글에 정리해 두었습니다.
- 정부 고시의 웹사이트 접근성 설계지침은 '텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공'하라고 적고 있습니다.
- W3C 결정 순서의 첫 질문은 '그림 안에 글자가 있나'입니다. 같은 글자가 옆에 실제 글자로 있으면 alt를 비웁니다.
- 링크 · 버튼 그림은 생김새가 아니라 '어디로 가는지, 무엇을 하는지'를 적습니다. Google도 이미지 링크의 alt를 앵커 텍스트로 쓸 수 있다고 안내합니다.
- 그래프 · 약도 · 가격표처럼 정보가 많은 그림은 alt 한 줄에 다 넣지 말고 같은 페이지에 글자로 풀어 둡니다.
1대체텍스트는 누가, 언제 읽나요?
세 경우에 읽힙니다. 화면낭독기를 쓰는 손님에게는 그림 대신 소리로 나오고, 통신이 느려 사진이 안 뜨면 그 자리에 글자로 보이며, 검색엔진은 사진 주제를 파악하는 재료로 씁니다. Google 이미지 SEO 문서는 대체텍스트를 컴퓨터 비전 · 페이지 내용과 함께 이미지 주제를 파악하는 데 쓰고, 이미지를 링크로 쓸 때는 앵커 텍스트(링크 글자)로도 활용한다고 적고 있습니다.
국내 기준도 같은 방향입니다. 과학기술정보통신부 '장애인 · 고령자 등의 정보 접근 및 이용 편의 증진을 위한 고시'의 웹사이트 접근성 준수 설계지침(별표3)은 첫 항목 '1.1 적절한 대체 텍스트 제공'에서 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공하라고 적고 있습니다. 웹 접근성 국가표준인 '한국형 웹 콘텐츠 접근성 지침'도 2022년 12월 2.2로 개정되어 국제 지침 WCAG 2.1 · 2.2 내용을 반영했습니다(NIA 보도자료). 핵심 단어는 '용도'입니다.
2어떤 순서로 물어보면 답이 나오나요?
W3C 웹 접근성 이니셔티브(WAI)의 'alt 결정 트리'는 아래 다섯 질문을 위에서부터 차례로 묻게 합니다. 앞 질문에서 답이 나오면 거기서 멈춥니다.
- 그림 안에 글자가 있나요? 같은 글자가 옆에 실제 글자로 있거나 멋내기용이면 alt를 비우고, 아이콘처럼 기능이 있으면 기능을, 다른 데 없는 글자면 그 글자를 alt에 적습니다.
- 링크나 버튼에 쓰였고, 그림이 없으면 무슨 링크인지 알기 어렵나요? 그렇다면 갈 곳이나 하는 일을 적습니다.
- 이 페이지 내용에 뜻을 더하나요? 단순한 사진이면 짧게 설명하고, 그래프처럼 복잡하면 내용을 페이지 다른 곳에 글자로 둡니다. 옆 글자를 그대로 되풀이하는 그림이면 비웁니다.
- 순전히 꾸밈이거나 손님이 볼 필요가 없는 그림인가요? 그렇다면 비웁니다.
- 위 어디에도 안 맞거나 애매한가요? W3C 이미지 튜토리얼 본문을 참고합니다.
3글자 배너 · 버튼 아이콘은 어떻게 고치나요?
가게 홈페이지에서 가장 자주 틀리는 곳은 글자가 박힌 그림입니다. 아래 표의 가게 예시는 이해를 돕기 위해 만든 것이고, 오른쪽 판단 근거만 W3C 결정 순서에서 가져왔습니다.
| 그림(가게 예시) | 고치기 전 | 고친 뒤 | 결정 순서 근거 |
|---|---|---|---|
| '11월 수요일 휴무' 글자만 있는 공지 배너 | 배너 | 11월은 매주 수요일 휴무합니다 | 1번 — 다른 데 없는 글자는 그대로 |
| 돋보기 모양 검색 버튼 | 돋보기 아이콘 | 검색 | 1 · 2번 — 하는 일 |
| 상단 가게 로고(홈으로 가는 링크) | 로고 | ○○헤어 홈 | 2번 — 갈 곳 |
| 전화기 그림 + 옆에 번호 글자 | 전화기 이미지 | alt="" | 3번 — 옆 글자 되풀이 |
| 메뉴 사이 꽃무늬 구분선 | 꽃 장식 이미지 | alt="" | 4번 — 꾸밈 |
4첫 화면 배경 사진 위에 문구가 얹혀 있으면요?
위 대표 사진 같은 화면이 대표적입니다. 머리카락 사진이 화면 가득 깔리고, 그 위에 큰 문구와 예약 버튼이 실제 글자로 올라가 있습니다. 이때는 사진과 글자를 따로 봅니다.
- 문구 · 버튼이 실제 글자라면 화면낭독기가 이미 읽으므로 alt에 같은 문장을 다시 넣지 않습니다(결정 순서 3번의 되풀이 경우).
- 사진이 분위기만 내는 배경이라면 꾸밈으로 보고 비웁니다(4번).
- 사진이 시술 결과처럼 손님이 꼭 봐야 할 정보라면 짧게 적습니다. 예: '어깨 아래 길이의 윤기 나는 매직 스트레이트 뒷모습'(가게 예시).
- 문구가 사진 파일 안에 박혀 있다면 1번으로 돌아가 그 문구를 alt에 적거나, 더 낫게는 문구를 실제 글자로 다시 올립니다.
5약도 · 가격표 · 그래프 그림은 한 줄로 충분한가요?
충분하지 않습니다. W3C 결정 순서는 그래프처럼 정보가 많은 그림은 같은 내용을 페이지 다른 곳에 두라고 안내합니다. alt는 '오시는 길 약도'처럼 무엇인지만 짧게 적고, 바로 아래에 주소 · 가까운 정류장 · 주차 안내를 글자로 씁니다. 가격표 사진도 같습니다. 메뉴를 글자로 옮기는 방법은 온라인 메뉴판 글에 정리했습니다.
반대로 키워드를 늘어놓는 것은 피합니다. Google 문서는 alt를 키워드로 채우면 사용자 경험을 해치고 스팸으로 볼 수 있다고 경고합니다. 공식 예시와 파일 이름 쓰는 법은 가게 사진 정리 글에, 글자 대비 · 확대까지 묶은 점검은 웹 접근성 글에 있습니다.
6우리 홈페이지는 어떻게 점검하나요?
- 첫 화면 · 메뉴 · 오시는 길 세 페이지만 먼저 고릅니다.
- PC 크롬에서 그림 위 마우스 오른쪽 → '검사'를 누르면 img 태그 안 alt 값이 보입니다. 비었는지, '이미지' · 'banner01' 같은 말인지 적어 둡니다.
- 그림마다 위 다섯 질문을 차례로 묻고, 표처럼 '고친 뒤' 칸을 채웁니다.
- 홈페이지 빌더라면 이미지 설정의 '대체 텍스트' · '설명' 칸에 넣습니다. 칸 이름은 서비스마다 다르니 도움말을 확인합니다.
- 고친 뒤 같은 방법으로 다시 열어 반영됐는지 봅니다.
직접 보기 어렵다면 무료 SEO 점검에서 alt가 빠진 그림부터 함께 확인해 드립니다. 새로 만들거나 고치는 작업은 제작 문의로 남겨 주시면 됩니다.
자주 묻는 질문
모든 사진에 대체텍스트를 꼭 써야 하나요?
모든 img에 alt 속성은 두되, 꾸밈용이나 옆 글자를 되풀이하는 그림은 alt=""처럼 빈 값으로 둡니다. W3C 결정 순서도 이런 경우 빈 alt를 쓰라고 안내합니다.
대체텍스트에 '사진', '이미지'라고 붙여야 하나요?
붙이지 않아도 됩니다. 화면낭독기는 그림이라는 사실을 따로 알려 주므로, 무엇을 보여 주거나 무엇을 하는 그림인지만 적습니다.
대체텍스트에 지역 이름과 업종을 많이 넣으면 검색에 유리한가요?
Google 이미지 SEO 문서는 alt를 키워드로 채우면 사용자 경험을 해치고 스팸으로 볼 수 있다고 경고합니다. 페이지 맥락에 맞는 설명 한 문장이면 충분합니다.
