내려받은 소재를 사이트에 놓을 때 alt 속성에 무엇을 쓸지 망설일 때가 있습니다. 소재 페이지의 설명문을 그대로 붙이는 것이 최선이라고는 할 수 없습니다. 같은 그림 한 장이라도 놓는 방식에 따라 써야 할 내용이 달라지기 때문입니다. 실제로 한 장을 세 가지 방식으로 놓고 비교합니다.
alt에는 「그 이미지가 그 자리에서 전하는 것」을 쓴다
alt 텍스트는 이미지가 표시되지 않는 환경이나 화면 낭독 환경에서 이미지 대신 읽히는 문장입니다. 써야 할 것은 이미지의 겉모습이 아니라, 그 이미지가 그 자리에서 전하고 있는 내용입니다. W3C의 접근성 해설(WAI)은 장식용 이미지에는 빈 alt를 쓰고, 옆의 문장이 이미 내용을 설명하고 있는 이미지에도 빈 alt를 쓸 수 있다고 설명합니다.
배치 1: 글의 구분에 놓은 장식
「온라인 면접 준비」라는 글의 제목 아래에 분위기를 내려고 이 그림을 놓은 경우입니다.
<img src="interview.webp" alt="">속성을 통째로 생략하는 것과는 다릅니다. 생략하면 환경에 따라 파일명이 읽힙니다. 비워서 쓰는 것이 「의도적으로 설명이 필요 없다고 판단했다」는 표명이 됩니다.
배치 2: 절차를 설명하는 그림으로 놓았다
「면접은 집에서 보실 수 있습니다」라는 안내 옆에 두어, 그림 자체가 「집에서, 컴퓨터로 본다」는 것을 전하고 있는 경우입니다.
<img src="interview.webp" alt="집 책상에서 노트북으로 면접을 보는 모습">배치 3: 바로 아래에 캡션이 있다
그림 아래에 「집 책상에서 노트북으로 면접을 보는 모습」이라는 캡션을 단 경우입니다. 같은 내용을 alt에도 쓰면 화면 낭독 환경에서는 같은 문장이 두 번 이어집니다. 이 경우에는 alt를 비웁니다.
피해야 할 작성법
<img src="interview.webp" alt="온라인 면접 일러스트"><img src="interview.webp" alt="면접 일러스트 무료 온라인 면접 재택근무 이직">길이의 기준
한 문장이면 충분한 경우가 대부분입니다. 자세한 설명이 필요한 도표라면 본문에 쓰고, alt에서는 그쪽을 가리키게 합니다. alt에 긴 글을 넣으면 도중에 멈출 수 없는 화면 낭독 환경에서는 부담이 됩니다.
Visual Hub의 소재에 대하여
이 사이트의 소재에는 일본어・영어・중국어・한국어 설명문을 준비해 두었지만, 이는 소재를 찾기 위한 것입니다. 사이트에 놓을 때는 위와 같이 놓은 문맥에 맞춰 다시 써 주세요.
참고한 자료
- W3C WAI 「Decorative Images」(영어)
※2026년 9월 작성 시점의 정보입니다.