한눈에 보는 정의
이미지를 볼 수 없을 때 대신 읽히거나 표시되는, 이미지 내용을 설명하는 짧은 글.
이런 말로 들어요
- 상세페이지 이미지마다 alt 텍스트를 넣어 두었습니다.
- 웹 접근성 점검에서 alt 누락이 지적됐어요.
그림으로 보기
alt 텍스트는 이미지가 무엇을 보여 주는지 짧게 설명합니다. 키워드 나열은 도움이 되지 않습니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
HTML의 img 태그에 alt 속성으로 넣습니다. 화면 낭독기를 쓰는 사용자는 이 글을 듣고 이미지 내용을 이해하고, 이미지가 깨졌을 때도 대신 표시됩니다. 검색엔진도 alt를 참고해 이미지를 이해합니다. 꾸미기용 이미지는 alt를 비워(alt="") 읽지 않게 합니다.
실무 예시
예를 들어 진료실 사진이라면 "사진" 대신 "창가 쪽 진료 의자와 모니터가 있는 2번 진료실"처럼 무엇이 보이는지를 적습니다.
함께 살펴볼 점
키워드를 나열하는 alt는 사용자에게 도움이 되지 않습니다. 글자가 들어간 이미지라면 그 글자 내용을 alt에 그대로 담습니다.
AI에게 이렇게 요청해 보세요
이 페이지의 모든 img 태그를 점검해서 alt가 없거나 "이미지" 같은 의미 없는 값인 것을 찾고, 내용에 맞는 alt 문구를 제안해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Images Tutorial | W3C WAI 새 창
이미지는 정보나 기능을 설명하는 대체 텍스트가 필요하며 장식 이미지는 빈 alt를 쓴다는 지침을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정