본문 바로가기
MAKESITE
무료 스캔 문의하기

점검 항목 · 검색 노출

이미지 대체텍스트(alt) 누락

자동으로 붙은 파일명 alt 는 검사에서 통과로 세어지지만 읽는 사람에게는 아무것도 알려 주지 않습니다.

심각도 낮음 검색 노출 무료 스캔 판정 항목 /check/image-alt

01DEFINITION

한 줄로 말하면

대체텍스트는 화면을 보지 못하는 이용자에게 이미지를 대신 읽어 주는 문장이자, 이미지 검색으로 들어오는 통로입니다. 비어 있으면 접근성 기준에 걸리고, 파일 이름이 그대로 들어가 있으면 없는 것과 다르지 않습니다. 장식용 이미지는 비워 두는 것이 오히려 맞는 처리입니다.

02RISK

없으면 무슨 일이 생기나

스크린리더는 alt 속성이 없는 이미지를 만나면 대신 읽을 문장이 없어 파일 경로를 그대로 읽거나 "이미지"라고만 말하고 넘어갑니다. 그 이미지가 버튼이거나 도표라면 그 자리에서 정보가 끊깁니다. 장바구니 담기가 아이콘 하나로만 되어 있는 쇼핑몰에서 이 문제는 접근성이 아니라 구매 자체가 막히는 문제가 됩니다.

검색 쪽 손해도 같이 발생합니다. 이미지 검색은 파일 자체를 이해하는 것이 아니라 주변 문장과 대체텍스트를 근거로 무엇의 사진인지 판단합니다. 제품 사진이 여러 장 있는 사이트에서 대체텍스트가 비어 있으면, 그 사진들이 만들어 낼 수 있었던 유입 경로가 통째로 사라집니다.

그리고 이 결함은 한 번 생기면 조용히 번집니다. 게시판이나 상품 등록 화면에서 이미지를 올릴 때 대체텍스트 입력칸이 없으면, 그 뒤에 등록되는 모든 이미지가 같은 상태로 쌓입니다. 이미 올라간 것을 고치는 일보다 입력 단계를 고치는 일이 먼저인 이유입니다.

03CHECK IT YOURSELF

직접 확인하는 방법

아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.

  1. 01
    alt 속성이 없는 이미지를 센다

    속성이 아예 없는 것과 비어 있는 것은 다릅니다. 아래 명령은 alt 가 나오지 않는 img 태그만 셉니다.

    $ curl -s https://example.com/ \
  | grep -o '<img[^>]*>' | grep -cv 'alt='
  2. 02
    내용이 쓸모 있는지는 눈으로 본다

    기계는 속성의 유무만 셉니다. 파일명이나 "이미지" 같은 값이 들어 있으면 검사에서는 통과지만 읽는 사람에게는 없는 것과 같습니다. 아래로 실제 값을 뽑아 훑어보시면 그 자리가 보입니다.

    $ curl -s https://example.com/ \
  | grep -o 'alt="[^"]*"' | sort | uniq -c | sort -rn | head
  3. 03
    브라우저에서 이미지를 꺼 본다

    개발자 도구에서 이미지 로딩을 막으면 대체텍스트만 남습니다. 그 화면을 읽어서 페이지의 뜻이 통하면 충분한 상태이고, 빈칸만 보이면 그 자리가 정보가 끊기는 지점입니다.

04HOW TO FIX

고치는 방법

서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.

이미지가 전하는 정보를 문장으로 적는다

무엇이 찍혀 있는지가 아니라 그 자리에서 무엇을 알아야 하는지를 씁니다. 같은 사진이라도 쓰이는 자리에 따라 적어야 할 문장이 달라집니다.

<img src="/img/p-102.jpg" alt="원목 4인용 식탁 정면">
<img src="/img/p-102.jpg" alt="식탁 상판의 마감 결 확대">
장식용 이미지는 비워 둔다

구분선, 배경 무늬, 옆 문장이 이미 설명한 아이콘은 읽어 줄 것이 없습니다. 이때는 빈 alt 를 명시해 건너뛰라고 알려 주는 것이 표준 표기이며, 저희 판정에서도 결함이 아닙니다.

<img src="/img/divider.svg" alt="">
아이콘 버튼에는 보이지 않는 이름을 준다

아이콘만 있는 버튼은 이미지가 곧 이름입니다. alt 를 쓰거나 요소에 접근성 이름을 붙여야 눌러야 할 것이 무엇인지 전달됩니다.

<button aria-label="장바구니 담기">
  <img src="/img/cart.svg" alt="">
</button>
등록 화면에 입력칸을 만든다

이미 올라간 이미지를 고치는 것은 한 번으로 끝나지만, 입력 단계를 고치지 않으면 다음 주에 같은 상태가 다시 쌓입니다. 상품·게시글 등록 폼에 대체텍스트 칸을 두고 비어 있으면 저장을 막는 편이 확실합니다.

주의. 저희가 세는 것은 alt 속성이 없는 이미지의 수입니다. 속성은 있는데 값이 파일명이거나 의미가 없는 경우는 기계로 판정할 수 없어 통과로 나옵니다. 그래서 이 항목은 통과가 곧 좋은 상태를 뜻하지 않는 몇 안 되는 항목이고, 위 확인 순서의 두 번째와 세 번째를 함께 보셔야 실제 상태를 알 수 있습니다. 이미지가 하나도 없는 페이지는 판정 대상이 아니어서 해당 없음으로 표시됩니다.

05FAQ

자주 묻는 질문

alt 를 비워 두면 감점인가요

아닙니다. 장식용 이미지에 빈 alt 를 명시하는 것은 접근성 표준이 권하는 표기이고, 스크린리더에게 건너뛰라고 알려 주는 신호입니다. 저희 판정도 속성이 아예 없는 경우만 셉니다. 둘을 같이 세면 제대로 표기한 사이트가 더 나쁜 점수를 받게 됩니다.

이미지가 수백 장인데 전부 고쳐야 하나요

한 번에 다 하실 필요는 없습니다. 사람이 실제로 많이 보는 화면부터 하시면 됩니다. 대개 메인, 주요 상품 상세, 그리고 아이콘만으로 된 버튼 순서입니다. 그다음은 새로 올라가는 이미지가 같은 상태가 되지 않도록 등록 화면을 고치는 일이 효율이 가장 큽니다.

파일명을 alt 에 자동으로 넣어 주는 기능이 있습니다

검사는 통과하지만 목적은 달성되지 않습니다. 화면을 못 보는 이용자에게 파일 이름은 정보가 아니고, 검색엔진에도 도움이 되지 않습니다. 자동 입력을 쓰신다면 최소한 상품명이나 게시글 제목이 들어가도록 값을 바꾸시는 편이 낫습니다.

텍스트가 그림으로 들어간 이미지는 어떻게 하나요

그 안의 글자를 그대로 대체텍스트에 옮겨 적으셔야 합니다. 다만 글이 길다면 이미지 대신 실제 텍스트로 만드는 편이 낫습니다. 그림 속 글자는 검색에도 잡히지 않고 확대해도 흐려지며 번역도 되지 않습니다.
여기까지는 항목 일반론입니다. 무엇이고 왜 문제이며 어떻게 고치는지는 감출 이유가 없어 그대로 적었습니다. 리포트에 들어가는 것은 귀사 사이트에서 실제로 어떤 값이 나왔는지 — 어느 주소의 어느 응답인지, 그 환경에서 어떤 순서로 적용해야 하는지, 예상 공수가 얼마인지입니다. 이 페이지만 보고 직접 고치셔도 되고, 실제로 그러시라고 적어 두었습니다.

RELATED

같이 보시면 좋은 항목

초기 전송 용량 과다 서버 HTML 에 본문이 없음 — 기계에게 빈 페이지 구조화 데이터 없음 헤딩 레벨 건너뜀 — 문서 구조가 끊김

점검 항목 39가지 전체 보기

GET STARTED

내 사이트는
이 항목을 통과할까요

주소만 넣으시면 이 항목을 포함해 39가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.

무료 스캔 전체 74항목 리포트
무료 스캔 문의하기 로그인