문서 언어: 한국어 업데이트: 2026-02-19

alt 속성

alt 속성

alt 속성은 HTML(HyperText Markup Language) 문서에서 <img>(이미지) 요소에 사용되는 속성으로, 이미지가 표시되지 않거나 사용자가 시각적 정보를 인식할 수 없을 때 대체 텍스트(alternative text)를 제공한다. 이 텍스트는 웹 접근성, 검색 엔진 최적화(SEO), 그리고 다양한 기기 환경에서의 콘텐츠 전달에 핵심적인 역할을 한다.

1. 정의

  • alt는 “alternative”의 약어이며, 이미지가 시각적으로 나타나지 않을 경우(예: 이미지 로딩 실패, 텍스트‑전용 브라우저, 화면 판독기 등) 사용자에게 이미지의 의미나 정보를 전달한다.
  • HTML5 표준에서는 alt 속성을 반드시 제공하도록 규정하고 있다. (<img> 요소에 alt 속성이 누락되면 문법 오류가 발생한다.)[^1]

2. 역사

연도 주요 내용
1995 HTML 2.0에 alt 속성 도입, 기본적인 대체 텍스트 제공 목적.
1997 HTML 4.01에서 웹 접근성 지침( WCAG )과 연계, alt 속성의 중요성 강조.
2008 WAI‑ARIA(Accessible Rich Internet Applications) 표준 제정, alt 속성을 보조 기술이 읽어야 할 핵심 정보로 명시.
2014 HTML5 공식 권고안에 alt 속성은 필수 속성으로 명시, 빈 문자열(alt="")은 장식용 이미지임을 표시하는 권장 방법으로 채택.

3. 용도 및 기능

3.1 접근성

  • 화면 판독기(Screen Reader)는 alt 텍스트를 읽어 시각 장애인이 이미지의 의미를 이해하도록 돕는다.
  • alt=""(빈 문자열)는 장식용 이미지임을 나타내어 판독기가 해당 이미지를 무시하도록 한다.

3.2 검색 엔진 최적화(SEO)

  • 검색 엔진은 이미지 파일 자체를 직접 분석하기 어려우므로 alt 텍스트를 통해 이미지 내용을 파악한다.
  • 적절한 키워드를 포함한 alt 텍스트는 이미지 검색 결과에서의 노출을 향상시킨다.

3.3 네트워크 오류 대비

  • 이미지 로딩 실패 시 브라우저는 alt 텍스트를 대신 표시한다.
  • 저대역폭 환경이나 데이터 절약 모드에서도 텍스트만으로 기본 정보를 제공한다.

3.4 국제화·다국어 지원

  • lang 속성과 함께 사용하면 다국어 사이트에서 언어별 alt 텍스트를 정의할 수 있다.

4. 문법

<img src="example.jpg" alt="예시 이미지 설명" width="600" height="400">

  • 속성값 규칙

    • 반드시 문자열이어야 하며, HTML 엔티티(&amp;, &lt; 등)를 사용할 수 있다.
    • 내용이 길어지면 125~150자 이내로 간결하게 기술하는 것이 권장된다.
    • 장식용 이미지의 경우 alt="" 로 설정한다.

  • 예외

    • <area>(이미맵) 요소에서도 alt 속성을 사용할 수 있다.
    • <input type="image">에서도 alt 속성이 필요하다.

5. 접근성 권장 사례

상황 권장 alt 내용
핵심 정보 전달 이미지 이미지가 전달하려는 핵심 의미를 한 문장으로 요약. 예: alt="2025년 한국 인구 그래프"
링크 이미지 링크 목적을 포함. 예: alt="회원가입 페이지로 이동"
복합 이미지(텍스트 포함) 이미지 내 텍스트를 그대로 재현하거나 요약. 예: alt="‘새로운 시작’이라는 문구가 적힌 배너"
장식용 이미지 alt="" (빈 문자열) 사용.
표시용 아이콘 역할을 명시. 예: alt="검색 아이콘"

6. 예시

6.1 기본 예시

<img src="logo.png" alt="회사 로고">

6.2 장식용 이미지

<img src="divider.png" alt="">

6.3 링크 이미지

<a href="newsletter.html">
    <img src="newsletter.png" alt="뉴스레터 구독하기">
</a>

6.4 다국어 사이트 예시

<img src="welcome_ko.png" alt="환영합니다" lang="ko">
<img src="welcome_en.png" alt="Welcome" lang="en">

7. 관련 규격 및 표준

  • HTML Living Standard – WHATWG, <img> 요소와 alt 속성 정의.
  • WCAG 2.1 – 성공 기준 1.1.1 (Non‑text Content).
  • WAI‑ARIA – 이미지 대체 텍스트와 보조 기술 연계.
  • Schema.org – ImageObject에 caption·description 필드와 연관.

8. 참고 문헌

  1. W3C, HTML5 Specification, §4.8.1 “The img element”. https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
  2. W3C, Web Content Accessibility Guidelines (WCAG) 2.1, Success Criterion 1.1.1. https://www.w3.org/TR/WCAG21/#non-text-content
  3. Mozilla Developer Network (MDN), : The Image Embed element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

9. 외부 링크

이 문서는 2026년 2월 현재 기준으로 최신 HTML5 및 웹 접근성 표준을 기반으로 작성되었습니다.

둘러보기

더 찾아볼 만한 주제