alt 속성 오류 | 장식 이미지와 의미 이미지 구분

이미지 alt를 전부 채웠는데 접근성 점수가 거의 오르지 않았습니다. 처음에는 검사 도구가 이상하다고 생각했습니다. 그런데 다시 확인해보니 문제는 도구가 아니라 제가 alt를 “빈칸 채우기”처럼 처리한 방식이었습니다.

이 글은 단순히 alt 속성을 넣는 방법을 설명하는 글이 아닙니다. 실제 사이트에서 장식 이미지와 의미 있는 이미지를 구분하지 못해 접근성 경고가 남았던 사례를 바탕으로, 어떤 이미지는 설명해야 하고 어떤 이미지는 빈 alt로 남겨야 하는지 정리한 글입니다.

alt를 채웠는데도 문제가 남은 이유

접근성 점검 도구에서 “alt 속성이 없는 이미지”가 여러 개 잡혔습니다. 그래서 저는 모든 이미지에 설명을 넣었습니다.

<img src="icon_arrow.gif" alt="서브메뉴 화살표">
<img src="icon_arrow.gif" alt="서브메뉴 화살표">
<img src="icon_arrow.gif" alt="서브메뉴 화살표">

겉으로 보면 빠진 alt를 채웠으니 문제가 해결된 것처럼 보입니다. 하지만 스크린 리더 기준으로는 오히려 읽어야 할 말이 늘어났습니다.

서브메뉴 화살표, 회사소개, 서브메뉴 화살표, 오시는길, 서브메뉴 화살표, 연혁…

사용자가 얻는 정보는 거의 없고, 같은 설명만 계속 반복됩니다. 이때 알게 된 것이 있습니다. alt는 무조건 채우는 값이 아니라, 이미지가 맡은 역할을 설명하는 값이라는 점입니다.

장식 이미지는 빈 alt로 처리

서브메뉴 앞에 붙은 작은 화살표, 구분선 이미지, 배경처럼 쓰인 작은 아이콘은 대부분 장식 이미지입니다. 이런 이미지는 페이지의 의미를 늘리지 않습니다.

장식 이미지는 이렇게 처리하는 것이 맞습니다.

<img src="icon_arrow.gif" alt="">

alt=""는 alt를 빠뜨린 것이 아닙니다. “이 이미지는 장식용이므로 읽지 않아도 된다”는 의도적인 표시입니다.

반대로 alt 속성 자체를 빼면 문제가 생길 수 있습니다.

<!-- 좋지 않은 예 -->
<img src="icon_arrow.gif">

이 경우 일부 스크린 리더는 파일명을 읽을 수 있습니다. 사용자 입장에서는 “아이콘 언더바 애로우 점 지아이에프” 같은 쓸모없는 소리를 듣게 됩니다.

의미 있는 이미지는 역할 기준으로 작성

모든 이미지를 빈 alt로 처리하면 안 됩니다. 이미지가 사라졌을 때 사용자가 잃는 정보가 있다면 alt가 필요합니다.

이미지 종류	역할	alt 작성 예
사이트 로고	브랜드 또는 홈 이동	`예시 사이트 홈으로`
게시글 썸네일	글을 대표하는 이미지	`2월 정기점검 안내`
검색 버튼 아이콘	기능 실행	`검색`
서브메뉴 화살표	장식	`alt=""`
구분선 이미지	장식	`alt=""`
이미지 없음 더미	불필요한 표시	출력하지 않음

기준은 간단합니다.

이 이미지를 지우고 alt 문구만 남겼을 때 문장이 자연스러운가?

자연스럽다면 의미 있는 이미지일 가능성이 높습니다. 어색하거나 반복 소음처럼 느껴진다면 장식 이미지일 가능성이 큽니다.

버튼 아이콘은 모양보다 기능 중심으로

제가 헷갈렸던 부분은 버튼 안에 들어간 아이콘이었습니다. 예를 들어 검색 버튼에 돋보기 이미지가 들어간 경우입니다.

<!-- 아쉬운 예 -->
<button type="submit">
    <img src="icon_search.gif" alt="돋보기">
</button>

눈으로 보는 사람에게는 돋보기 모양이 검색을 뜻한다는 것을 알 수 있습니다. 하지만 스크린 리더 사용자에게 중요한 것은 이미지의 모양이 아니라 버튼의 기능입니다.

<!-- 개선 예 -->
<button type="submit">
    <img src="icon_search.gif" alt="검색">
</button>

또는 버튼 자체에 이름을 주고 이미지는 숨길 수도 있습니다.

<button type="submit" aria-label="검색">
    <img src="icon_search.gif" alt="">
</button>

둘 중 하나만 제대로 전달되면 됩니다. 중요한 것은 “돋보기”가 아니라 “검색”이라는 동작입니다.

링크 안의 이미지는 목적지 중심으로

이미지가 링크 안에 들어가 있을 때도 주의해야 합니다. 특히 로고 이미지만 있는 홈 링크에서 자주 실수합니다.

<!-- 아쉬운 예 -->
<a href="/">
    <img src="logo.png" alt="로고">
</a>

“로고”라는 말만으로는 링크가 어디로 가는지 알기 어렵습니다. 링크 안의 이미지 alt는 이미지 설명이 아니라 링크의 목적지를 알려주는 쪽이 좋습니다.

<!-- 개선 예 -->
<a href="/">
    <img src="logo.png" alt="예시 사이트 홈으로">
</a>

만약 링크 텍스트가 따로 있다면 이미지는 장식으로 처리할 수 있습니다.

<a href="/">
    <img src="logo.png" alt="">
    <span>예시 사이트 홈</span>
</a>

이미지 없음 더미는 출력 조건부터 확인

게시글 목록에서 썸네일이 없을 때 회색 네모 이미지가 출력되고 있었습니다. 파일명은 no_image.gif였고, 화면에는 “이미지 없음”처럼 보이는 자리표시자였습니다.

처음에는 여기에 alt를 넣으려고 했습니다. 하지만 이 이미지는 사용자에게 필요한 정보가 아니었습니다. 썸네일이 없다는 사실을 굳이 이미지로 읽어줄 필요도 없었습니다.

그래서 alt를 고치는 대신, 더미 이미지는 아예 출력하지 않도록 바꿨습니다.

<?php
$noImageFiles = ['no_image.gif', 'noimg.png', 'blank.gif'];
$thumb = $row['thumb'] ?? '';
$title = $row['title'] ?? '';
$fileName = basename($thumb);

if ($thumb !== '' && !in_array($fileName, $noImageFiles, true)) {
    echo '<img src="' . htmlspecialchars($thumb, ENT_QUOTES, 'UTF-8') . '" alt="' . htmlspecialchars($title, ENT_QUOTES, 'UTF-8') . '">';
}
?>

썸네일이 실제로 있을 때만 이미지를 출력하고, alt에는 게시글 제목을 넣었습니다. 목록에서 썸네일은 보통 해당 글을 대표하는 이미지이기 때문입니다.

장식 아이콘은 문자 기호로 대체

반복되는 작은 화살표 이미지는 굳이 이미지 파일로 둘 필요가 없었습니다. 요청 수만 늘고, alt 처리도 계속 신경 써야 했습니다.

그래서 아래처럼 문자 기호와 CSS로 바꿨습니다.

<!-- before -->
<img src="/images/icon_arrow.gif" alt=""> 회사소개

<!-- after -->
<span class="submenu-mark" aria-hidden="true">└</span> 회사소개

.submenu-mark {
    display: inline-block;
    width: 1em;
    margin-right: 4px;
    color: #888;
    font-size: 12px;
}

aria-hidden="true"를 넣으면 스크린 리더가 이 기호를 읽지 않습니다. 화면에서는 메뉴 구조를 보여주고, 음성으로는 불필요한 소음을 줄일 수 있습니다.

점검 도구보다 실제 읽힘 확인

접근성 점검 도구는 빠진 alt를 찾는 데는 좋습니다. 하지만 어떤 alt가 좋은지까지 완벽하게 판단해주지는 못합니다.

그래서 수정 후에는 아래 항목을 직접 확인했습니다.

메뉴에서 같은 alt가 반복해서 읽히지 않는지 확인
검색 버튼이 “돋보기”가 아니라 “검색”으로 전달되는지 확인
로고 링크가 홈으로 이동한다는 것을 알 수 있는지 확인
더미 이미지가 목록에 불필요하게 출력되지 않는지 확인
게시글 썸네일 alt가 글 제목과 자연스럽게 연결되는지 확인

점수만 보고 끝내면 실제 사용자 경험은 놓칠 수 있습니다. 특히 장식 이미지는 점검 도구보다 스크린 리더 흐름으로 확인하는 편이 더 정확했습니다.

alt 수정 후 달라진 점

수정 후에는 눈에 보이는 변화보다 읽히는 흐름이 먼저 좋아졌습니다.

반복되는 “서브메뉴 화살표” 읽힘이 사라짐
검색 버튼의 목적이 더 명확해짐
이미지 없는 글의 더미 썸네일이 사라짐
게시글 목록의 썸네일 alt가 글 제목과 맞게 정리됨
접근성 점검 도구의 중복·누락 경고가 줄어듦

이미지 몇 개의 alt를 바꾼 작업처럼 보였지만, 실제로는 사이트를 읽는 순서를 정리한 작업에 가까웠습니다.

배포 전에 확인할 alt 체크리스트

장식 이미지는 alt=""로 처리했는가
alt 속성을 아예 생략한 이미지는 없는가
버튼 아이콘은 모양이 아니라 기능을 설명하는가
링크 안의 이미지는 목적지를 알려주는가
같은 alt가 한 페이지에서 불필요하게 반복되지 않는가
이미지 없음, blank, noimg 같은 더미 이미지는 출력하지 않는 편이 낫지 않은가
썸네일 alt가 게시글 제목이나 실제 이미지 내용과 연결되는가
수정 후 스크린 리더 또는 접근성 도구로 다시 확인했는가

alt는 채우는 값이 아니라 판단하는 값

alt 작업을 단순히 빈칸 채우기로 보면 오히려 페이지가 더 시끄러워질 수 있습니다. 모든 이미지에 설명을 넣는 것이 친절한 것이 아니라, 필요한 이미지만 정확히 설명하고 필요 없는 이미지는 조용히 건너뛰게 하는 것이 더 낫습니다.

제가 기준으로 삼은 것은 하나였습니다. 이 이미지가 사라졌을 때 사용자가 잃는 정보가 있는가. 잃는 정보가 있다면 alt로 설명하고, 없다면 alt=""로 장식 이미지라고 알려주면 됩니다.

접근성 점수는 결과일 뿐입니다. 먼저 봐야 할 것은 사용자가 페이지를 어떻게 읽게 되는지입니다. alt를 잘 쓰는 일은 이미지 설명을 많이 적는 일이 아니라, 사용자가 불필요한 소음 없이 필요한 정보에 도착하게 만드는 일입니다.