웹 접근성 콘텐츠

이미지를 못 보는 상황까지 고려한 대체 설명 작성 기준

이미지의 역할을 판단해 필요한 정보는 설명하고 장식 이미지는 중복 읽히지 않게 처리합니다.

애드온 편집팀

대체 설명은 이미지 파일에 검색어를 붙이는 칸이 아니라 그림을 이용할 수 없을 때 같은 목적을 이해하도록 돕는 텍스트입니다. 사진이 로드되지 않거나 화면 읽기 도구를 사용하는 상황에서도 글의 핵심이 이어져야 합니다. 따라서 눈에 보이는 모든 사물을 늘어놓기보다 현재 문맥에서 이미지가 맡은 역할을 먼저 묻습니다. 정보 전달, 링크나 버튼의 기능, 장식, 복잡한 데이터 중 어느 경우인지에 따라 설명 방식이 달라지며 한 가지 문구를 여러 이미지에 반복해서는 충분하지 않습니다.

본문에서 이미지가 하는 일을 구별합니다

이미지를 잠시 가린 뒤 독자가 잃는 정보가 무엇인지 적어 봅니다. 장소 안내 사진이라면 벽 색보다 출입구 위치와 이동 방향이 중요할 수 있고, 상품 사진이라면 글에서 판단에 쓰는 특징이 필요할 수 있습니다. 이미 주변 본문이 같은 내용을 충분히 말하거나 순전히 장식인 그림은 빈 대체 속성으로 처리해 불필요한 반복 읽기를 피합니다. 반면 글자가 이미지 안에만 존재하고 정보로 쓰인다면 그 텍스트를 접근 가능한 형태로 제공해야 합니다.

기능 이미지와 복잡한 그림은 따로 다룹니다

아이콘이 링크나 버튼의 유일한 내용이라면 생김새보다 눌렀을 때 수행되는 행동을 설명합니다. ‘화살표’보다 ‘다음 사진 보기’가 기능을 더 잘 전달하는 식입니다. 차트, 지도, 순서도처럼 짧은 문구로 핵심 정보를 담기 어려운 그림은 대체 설명을 무리하게 길게 쓰지 말고 본문이나 별도 표에서 주요 데이터와 관계를 풉니다. 사진 제공자 정보나 캡션처럼 모든 독자에게 필요한 내용은 대체 속성 안에 숨기지 않고 화면에 보이는 텍스트로 둡니다.

문맥과 함께 소리 내어 검수합니다

작성한 설명을 본문 문장 사이에 넣어 읽어 보면 중복과 부족함이 잘 드러납니다. ‘이미지’, ‘사진’이라는 말을 습관적으로 시작하거나 파일명과 키워드를 나열하지 않습니다. 같은 그림이라도 기사 주제가 달라지면 필요한 대체 설명도 바뀔 수 있으므로 자동 복사된 문구를 확인합니다. 화면 읽기 도구와 이미지 차단 환경에서 링크의 목적과 글의 결론이 유지되는지 시험하고, 설명이 비어 있는 이미지 수만 세지 말고 비워 둔 이유까지 검토해야 합니다. 이 작업의 기준은 이미지 없이도 동등한 맥락을 얻는가입니다.

참고: An alt Decision Tree | W3C Web Accessibility Initiative

전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

LOCATION

애드온 오시는 길

서울특별시 강서구 공항대로 194, 1동 6층 610·611호 (마곡동, 문영 퀸즈파크12차)