경고 Image elements do not have [alt] attributes 웹페이지의 <img> 태그에 alt 속성이 누락되거나 비어 있는 경우, 시각장애인용 보조기술(스크린 리더 등)은 이미지의 내용을 제대로 전달할 수 없다. SEO 측면에서도 이미지 내용을 효과적으로 인덱싱 하지 못한다.
경고가 발생하는 원인은 다음과 같다.
alt 속성이 아예 없는 경우
alt 속성이 비어 있는 경우 (alt="")
alt 속성의 내용이 부정확하거나 무의미한 경우
🔧 수정 방법
모든 <img> 태그에 alt 속성을 추가하거나 이미지가 정보 전달을 목적으로 하지 않는 경우 alt=""로 명시한다.
HTML <img> 태그로 수동 전환하여 alt 속성 추가
이미지가 정보를 전달하는 경우, 간결하고 정확한 텍스트를 alt 속성으로 추가한다.
ALT 텍스트 작성 팁
이미지를 보지 못하는 사용자도 내용을 이해할 수 있도록 핵심 정보를 포함시킨다.
불필요한 단어(이미지, 사진 등)은 사용하지 않는다.
예: "제품 판매량 추이를 나타낸 바 차트" (O), "바 차트 이미지" (X)
width와 height는 원본 비율로 지정한다. (Lighthouse 점수 향상에 기여)
ARIA 속성 사용하기
이미지에 대한 대체 텍스트를 제공하는 방법은 alt 속성 외에도 aria-label과 aria-labelledby를 사용할 수 있다.
aria-label : 이미지 내용을 간결하게 설명할 때 사용
aria-labelledby : 페이지 내 다른 요소와 연관시킬 때 사용
장식용 이미지 처리
장식적인 이미지 또는 이미 페이지 내에서 설명된 경우, alt=""로 지정하거나 `role="presentation"을 사용한다. 이렇게 하면 스크린 리더가 해당 이미지를 무시하도록 설정할 수 있다.
/* 수정 전 */
/* 수정 후 */
<img src="https://blog.kakaocdn.net/dna/cheNgM/btsNfejzTDU/AAAAAAAAAAAAAAAAAAAAABQaxM77-NnP72KYPcdSwRPWfzgVYY98gW_dtp62lQl4/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=BQkBoeaNi0waFCMZbsK7k1A4bA0%3D"
alt="SAP BP 마스터 데이터 구조를 나타낸 다이어그램"
width="800" height="391">
