alt 속성을 잘 쓰는 방법
alt는 접근성의 기본 요소입니다. 이미지를 볼 수 없는 사람에게 말로 설명한다고 생각하고 씁니다. "사진1"이나 파일명 대신 "회의실에서 강연하는 강사와 청중"처럼 이미지에 담긴 내용을 구체적으로 적습니다. 상품 이미지라면 상품명과 색상·모델명 같은 구분 정보를 넣습니다. alt는 이미지를 불러오지 못했을 때 대신 표시되는 텍스트이기도 하고, 구글이 이미지 검색에서 이미지의 주제를 이해할 때 주변 텍스트와 함께 활용합니다.
키워드를 억지로 나열하면 키워드 스터핑으로 보일 수 있습니다. 문장으로 자연스럽게 설명하는 것이 기준입니다.
alt를 비워 둬도 되는 경우
구분선이나 배경 무늬처럼 의미 없는 장식용 이미지는 alt=""로 비워 두어 스크린 리더가 읽지 않게 합니다. alt 속성을 아예 빼는 것과 빈 값을 넣는 것은 다릅니다. 속성이 없으면 보조기기가 파일명을 대신 읽을 수 있으므로, 장식용이라도 빈 alt는 남겨 둡니다.
CSS 배경으로 넣은 이미지에는 alt를 지정할 수 없고, 구글은 CSS 이미지를 이미지 검색용으로 색인하지 않습니다. 검색에 노출되어야 하는 이미지는 <img> 태그로 넣습니다.