이미지 ALT 적용률 검사기

이미지 ALT 적용률 검사기 사용 가이드

이미지의 대체 텍스트(alt)는 화면 낭독기 사용자뿐 아니라 이미지가 로드되지 않을 때, 검색 결과에서도 그림의 내용을 전합니다. 이 검사기는 붙여 넣은 HTML의 img, input type=image, area를 모두 찾아 alt가 있는 비율과 설명이 든 alt, 빈 alt(장식용) 개수를 셉니다.

alt 속성 자체가 없으면 화면 낭독기가 파일 이름을 읽을 수 있어 ✕로 표시합니다. 'IMG_2024.jpg'처럼 파일 이름을 그대로 넣은 alt, 링크·버튼 안의 유일한 그림인데 alt가 비어 이동할 곳을 알 수 없는 경우도 ✕입니다.

'이미지', '사진', 'image of'처럼 화면 낭독기가 이미 알려 주는 말, 125자가 넘는 긴 alt, figcaption이나 링크 글자와 똑같은 alt(두 번 읽힘), 같은 alt가 여러 번 쓰인 경우, role=presentation인데 alt 글자가 있는 경우는 △로 표시합니다.

사용 방법

1. 1'검사할 HTML' 칸에 이미지가 든 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 alt 적용 현황과 이미지별 상태가 나옵니다.
3. 3✕ 항목부터 그림의 내용이나 링크의 목적지를 alt에 적습니다.
4. 4△ 항목의 군더더기·중복을 정리하고 다시 실행합니다.

<img src="logo.png" alt="툴바다"><img src="divider.png" alt=""><img src="product.png">
<img src="IMG_2024.jpg" alt="IMG_2024.jpg"><a href="/cart"><img src="cart.svg" alt=""></a>

이미지 5개 · alt 있음 4개(설명 2 · 빈 alt 2) · alt 없음 1개

✕ 3 product.png: alt 속성이 없습니다(화면 낭독기가 파일 이름을 읽을 수 있음)
✕ 4 IMG_2024.jpg: alt가 파일 이름처럼 보입니다
✕ 5 cart.svg: 링크·버튼 안의 유일한 그림인데 alt가 비어 이동할 곳을 알 수 없습니다

이럴 때 쓰면 좋아요

• 상세페이지·블로그 글의 이미지 alt를 게시 전에 점검할 때
• 아이콘 링크에 대체 텍스트가 빠졌는지 찾을 때
• CMS가 파일 이름을 alt로 자동 입력했는지 확인할 때
• 웹 접근성 대체 텍스트 항목을 자가 진단할 때

문제가 생겼을 때

활용 팁

• alt는 '무엇이 보이는지'보다 '이 그림이 전하려는 정보'를 쓰는 것이 좋습니다.
• Markdown 글은 Markdown 이미지 ALT 검사기로 같은 점검을 할 수 있습니다.
• 인라인 SVG는 SVG 접근성 검사기로 따로 확인하세요.

자주 묻는 질문