아브레다THE PRACTICAL WEB
알아두면 좋은 정보아브레다 콘텐츠

웹사이트 사진 대체 텍스트(alt) 작성법: 장식 이미지와 정보 이미지 구분

사진·버튼 이미지·도표의 역할에 맞춰 스크린리더가 이해할 수 있는 대체 텍스트를 작성하는 기준.

사진 파일을 편집하고 형식을 비교하는 작업 환경
관련 작업 환경을 보여주는 자료 사진입니다. 실제 아브레다 화면이 아닙니다. · 사진 출처: Unsplash 원본

무엇이 문제인가요?

이미지의 대체 텍스트는 단순한 검색 키워드 목록이 아닙니다. 화면을 볼 수 없는 사람이 그 이미지를 건너뛰었을 때 빠지는 의미나 기능을 문맥에 맞게 전달하는 것이 목적입니다.

순서대로 해결하기

  1. 이미지가 정보를 전달하는지 장식인지 분류하세요

    W3C WAI 안내에 따르면 정보 이미지에는 필요한 의미를 간결하게 설명하고, 내용 전달과 무관한 순수 장식 이미지는 비어 있는 alt 속성으로 처리할 수 있습니다.

  2. 이미지 버튼에는 모양보다 동작을 설명하세요

    프린터 아이콘만 있는 버튼이면 '프린터 모양'보다 '인쇄하기'처럼 수행할 기능을 적으세요. 이미 같은 설명이 바로 옆 텍스트에 있다면 중복 설명이 필요할지 다시 검토합니다.

  3. 도표는 한 문장의 alt만으로 끝내지 마세요

    복잡한 그래프나 표는 핵심 내용을 alt에 요약하고 주요 수치와 비교 근거를 본문 텍스트나 표에도 제공하세요. 실제 스크린리더로 읽어 보고 의미가 전달되는지 확인합니다.

다른 해결 방법

내용을 전달하지 않는 장식용 이미지는 CSS 배경 처리 또는 빈 대체 텍스트를 활용할 수 있습니다. 모든 사진에 긴 설명을 넣는 것이 정답은 아닙니다.

해결되지 않는 경우

잘못된 키워드 반복이나 이미지와 무관한 설명은 접근성을 해칩니다. 내용이 수시로 바뀌면 이미지 설명과 주변 본문도 함께 수정해야 합니다.

자주 묻는 질문

장식용 이미지에도 사진 설명을 반드시 써야 하나요?

아니요. W3C WAI는 단순 장식 이미지에 비어 있는 alt를 사용하는 방법을 안내합니다. 다만 이미지가 기능을 수행한다면 설명이 필요합니다.

참고한 공식 원천 자료

다음 기관의 안내 내용을 확인해 작성했습니다. 상세 규정은 원문을 확인하세요.

← 블로그 전체 글English version →