스크린리더가 파일명을 읽어주던 이유 — alt를 비운 것과 생략한 것의 차이

문제 발생

접근성 점검에서 두 가지가 지적됐습니다.

• 장식용 배경 아이콘마다 "아이콘"이라고 읽혀 본문 흐름이 끊긴다
• 어떤 이미지는 hero-banner-final-v3.png처럼 파일명이 읽힌다

코드를 보니 전자는 alt="아이콘", 후자는 alt가 아예 없었습니다.

원인 분석

alt는 셋 중 하나를 선택하는 자리입니다. MDN은 alt가 접근성에 필수적이고 대단히 유용하다고 설명하면서 세 경우를 구분합니다.

의미 있는 이미지 — 스크린리더가 그 값을 읽어 사용자가 이미지의 의미를 알게 합니다. 이미지가 로드되지 않을 때(네트워크 오류, 콘텐츠 차단, 링크 끊김) 화면에 대신 표시되는 것도 이 값입니다. 문서가 드는 예도 명확합니다 — alt="image"가 아니라 alt="A Penguin on a beach."입니다.

장식 이미지 — **빈 문자열(alt="")**을 씁니다. 이는 그 이미지가 콘텐츠의 핵심이 아니라 장식이나 추적 픽셀임을 뜻하고, 비시각 브라우저는 렌더링에서 생략하며 alt가 비어 있고 이미지가 표시되지 않으면 깨진 이미지 아이콘도 숨깁니다.

alt 없음 — 문서가 경고하는 경우입니다. alt 속성이 없으면 일부 스크린리더가 대신 이미지의 파일명을 읽을 수 있으며, 파일명이 내용을 대표하지 않으면 혼란스러운 경험이 됩니다.

해결 방안

1. 장식은 빈 값으로 명시합니다. 생략과 다릅니다.

<img src="/deco-wave.svg" alt="" />

2. 의미 있는 이미지는 맥락과 함께 검증합니다. 문서가 제안하는 테스트가 좋습니다 — alt 내용을 앞의 텍스트와 함께 읽어보고 이미지와 같은 의미를 전달하는지 확인합니다.

3. "이미지", "사진" 같은 단어를 넣지 않습니다. 스크린리더가 이미 요소 종류를 알려줍니다.

4. 링크 안의 이미지에는 목적지를 씁니다. 로고 링크라면 alt="MEOKKO 홈"처럼 그 링크가 무엇을 하는지가 필요합니다 — 여기서 alt=""를 쓰면 링크가 이름 없는 링크가 됩니다.

5. 텍스트가 들어간 이미지는 그 텍스트를 그대로 담습니다. 배너 이미지의 문구가 alt에 없으면 그 정보는 존재하지 않는 것과 같습니다.

6. CSS 배경으로 옮길지 검토합니다. 순수 장식이라면 background-image가 더 정직합니다 — 문서 트리에 없으니 alt 고민 자체가 사라집니다.

공식 문서

• MDN: <img> — alt
• W3C WAI: Alt Text Decision Tree