대체 텍스트 작성 방법: 개발자와 콘텐츠 팀을 위한 실용 가이드

WebAIM Million 2025 보고서에 따르면, 분석된 모든 홈페이지의 55.5%에서 대체 텍스트가 누락되어 있으며, 그 실패 사례 중 44%는 링크된 이미지와 관련이 있어 스크린 리더 사용자의 내비게이션을 완전히 망가뜨린다. 이는 틈새 문제가 아니다. 웹의 절반이 시각장애인과 저시력 사용자를, 아무 말도 하지 않는 이미지 앞에 방치하고 있는 셈이다. 팀이 이미지를 배포하면서 alt 텍스트를 신중하게 고려하지 않는다면, 단순히 컴플라이언스 체크박스를 놓치는 것이 아니라, 상당한 비율의 사용자에게 그들의 경험은 중요하지 않다고 말하는 것과 같다.

Alt 텍스트가 실제로 무엇인지 (그리고 왜 단순한 태그가 아닌지)

Alt 텍스트는 alternative text의 줄임말로, HTML <img> 요소의 alt 속성에 포함되는 서면 설명이다. 스크린 리더가 이미지를 만나면, alt 텍스트를 사용자에게 소리 내어 읽어준다. 이미지가 느린 연결, 끊어진 URL, 콘텐츠 차단기 등의 이유로 로드되지 못할 때는 alt 텍스트가 그 자리에 렌더링된다. 또한 검색 엔진에 의해 인덱싱되며, 조용하지만 의미 있는 SEO 신호로 작용한다.

하지만 많은 팀이 놓치는 점이 있다. alt 텍스트는 단지 예비 안전망이 아니다. 전 세계적으로 약 4,330만 명의 시각장애인과 2억 9,500만 명의 중등도~중증 저시력 사용자가 웹에서 시각 콘텐츠를 경험하는 주된 방식이다. NVDA와 JAWS 같은 스크린 리더(가장 널리 사용되는 데스크톱 스크린 리더 두 가지)는 포커스가 이미지에 도달하는 순간 alt 텍스트를 읽어준다. 그 텍스트가 없거나, 무의미하거나, 중복된다면 사용자 경험은 즉시 나빠진다.

시각장애인 및 저시력 사용자를 대상으로 한 연구는 실제로 어떤 일이 벌어지는지에 대한 냉혹한 그림을 보여준다. 일부 사용자는 웹사이트의 이미지를 아예 무시한다고 보고하는데, 그들의 경험상 alt 텍스트가 유용했던 적이 거의 없기 때문이다. 다른 사용자들은 전자상거래 사이트에서 제품 이미지를 건너뛰고, 대신 사용자 리뷰에 의존한다. "image001.jpg"나 "photo" 같은 alt 텍스트는 아무 정보도 주지 않기 때문이다. 이는 스크린 리더의 문제가 아니라 콘텐츠의 문제이며, 팀이 충분히 해결할 수 있는 문제다.

Alt 텍스트를 개발자 작업이 아닌 콘텐츠의 책임으로 이해하는 것이 모든 팀이 먼저 가져야 할 인식 전환이다. 개발자는 속성을 구현하고, 콘텐츠 팀은 맥락을 이해한다. 둘 다 제대로 된 alt 텍스트를 위해 필수적이다.

법적·컴플라이언스 환경

법적 리스크를 신경 쓴다면 alt 텍스트는 선택 사항이 아니다. WCAG 성공 기준 1.1.1(비텍스트 콘텐츠)은 Level A 요구사항으로, 가장 낮고 가장 기초적인 컴플라이언스 단계다. 이를 지키지 못하면 어떤 공식 접근성 감사에서도 실패하게 된다. 미국에서는 ADA가 수천 건의 사례에서 웹사이트에 적용되었고, 2024년에만 4,605건의 ADA 웹사이트 소송이 제기되었다. alt 텍스트 누락은 쉽게 탐지 가능하고, 객관적으로 측정 가능하며, 핵심 콘텐츠에 대한 접근을 직접적으로 차단하기 때문에 요구서에서 가장 많이 언급되는 위반 사항 중 하나다.

ADA를 넘어, European Accessibility Act(EAA)는 2025년 6월 28일부터 집행되기 시작했다. 조직이 EU 내 고객을 대상으로 서비스를 제공한다면, 비준수 시 최대 €100,000 또는 연간 매출의 4%에 달하는 벌금을 부과받을 수 있다. WCAG 2.2 Level AA는 EAA 준수의 기준으로 널리 인정되고 있으며, 그중 기준 1.1.1에 따른 alt 텍스트 요구사항은 이전 버전과 변함이 없다. 모든 정보 제공용 이미지는 프로그램적으로 판별 가능한 텍스트 대체 수단을 가져야 한다.

캐나다에서는 Accessibility for Ontarians with Disabilities Act(AODA)가 공공 및 민간 부문 조직에 WCAG 준수를 유사하게 요구한다. 미국 연방 맥락의 Section 508 역시 자체적인 유사 요구사항을 가지고 있다. 관할 구역을 막론하고 결론은 일관된다. alt 텍스트는 있으면 좋은 수준이 아니며, 규제 환경은 완화가 아니라 강화되는 방향으로 가고 있다.

WCAG 1.1.1은 Level A — 가장 기본적인 컴플라이언스 단계다. 이를 지키지 못하면 모든 접근성 감사에서 실패하며, 자동화 도구와 법무팀이 가장 쉽게 탐지할 수 있는 위반 사항이다.

의사결정 프레임워크: 어떤 이미지에 무엇이 필요한가

가장 흔한 오해 중 하나는 모든 이미지에 텍스트 설명이 필요하다는 것이다. 이는 잘못된 생각이며, 장식용 이미지에 불필요한 alt 텍스트를 추가하면 스크린 리더 사용자가 아무 가치도 없는 소음을 들어야 하므로 오히려 경험을 악화시킨다. 진짜 실력은 각 이미지가 어떤 범주에 속하는지 아는 데 있다. 다음은 실용적인 프레임워크다.

• 정보 제공용 이미지 — 주변 텍스트에 없는 콘텐츠나 의미를 전달하는 사진, 일러스트, 그래픽. 이 경우 이미지를 통해 제공되는 것과 동일한 정보를 전달하는 설명적 alt 텍스트가 필요하다.
• 기능적 이미지 — 버튼, 링크, 컨트롤로 사용되는 이미지(예: 검색을 제출하는 돋보기 아이콘, 홈페이지로 연결되는 로고). Alt 텍스트는 시각적 모양이 아니라 기능을 설명해야 한다. alt='Magnifying glass icon'이 아니라 alt='Search'처럼 작성해야 한다.
• 장식용 이미지 — 의미 없이 미적 가치만 더하는 시각 요소: 배경 패턴, 구분선, 순수 장식용 일러스트. 이 경우 alt 속성은 빈 값(alt='')을 사용해 스크린 리더가 이미지를 완전히 건너뛰도록 해야 한다.
• 텍스트 이미지 — 단어를 포함하는 스크린샷이나 그래픽. 최선의 방법은 이를 아예 피하고 실제 스타일링된 텍스트를 사용하는 것이다. 피할 수 없다면, alt 텍스트는 이미지 안의 텍스트를 그대로 재현해야 한다.
• 복잡한 이미지 — 데이터가 밀집된 차트, 그래프, 지도, 인포그래픽. 짧은 alt 텍스트 요약이 필요하며, 여기에 더해 페이지 본문에 구조화된 긴 설명을 제공하거나 이미지에서 링크로 연결해야 한다.

빈 alt 텍스트(alt='')는 alt 속성이 아예 없는 것과 같지 않다는 점에 유의하자. alt 속성이 전혀 없는 이미지는 스크린 리더가 이미지 파일명이나 URL을 소리 내어 읽게 만들 수 있는데, 이는 거의 항상 침묵보다 나쁘다. 값이 의도적으로 비어 있는 경우에도 속성 자체는 반드시 포함해야 한다.

실제로 작동하는 Alt 텍스트 작성법: 실무 규칙

좋은 alt 텍스트를 쓰는 일은 보기보다 어렵다. 다음은 유용한 설명과 소음을 가르는 구체적인 규칙들이다.

• 간결하게 유지하라. 125자 이하를 목표로 하라. JAWS와 NVDA 같은 스크린 리더는 더 긴 alt 텍스트를 문장 중간에서 잘라버릴 수 있으며, 그러면 공들여 제공한 정보가 잘려 나간다. 이미지가 그 이상 설명을 필요로 할 정도로 복잡하다면, 이는 별도의 긴 설명이 필요하다는 신호다.
• "Image of"나 "Photo of"로 시작하지 말라. 스크린 리더는 alt 텍스트를 읽기 전에 해당 요소가 이미지임을 자동으로 알려준다. alt='Image of a smiling woman'처럼 작성하면 스크린 리더는 "image, image of a smiling woman"이라고 말하게 되어 중복되고 사용자의 시간을 낭비한다.
• 겉모습이 아니라 의미를 설명하라. Alt 텍스트는 이미지와 동일한 정보나 기능을 전달해야 한다. Q3 매출 성장 차트를 보여주면서 alt='Bar chart'라고만 쓰지 말라. alt='Bar chart showing Q3 revenue up 22% year-over-year'처럼 작성하고, 전체 데이터는 주변 텍스트로 제공하라.
• 맥락에 맞춰라. 같은 사진이라도 사용되는 위치에 따라 alt 텍스트가 달라질 수 있다. 책상 위 노트북 사진이 "팀 소개" 섹션에 쓰인다면 작업 공간을 설명해야 할 수 있지만, 제품 목록에 쓰인다면 노트북의 사양과 외형을 설명해야 한다.
• 키워드를 억지로 채워 넣지 말라. Alt 텍스트는 검색 엔진에 인덱싱되지만, 키워드를 남발하는 것은 나쁜 사용자 경험일 뿐 아니라 WCAG 취지에도 어긋난다. 항상 사용자 경험을 우선하라.
• 올바른 문법과 구두점을 사용하라. 스크린 리더는 텍스트를 음성으로 변환하며, 구두점은 말하기의 속도와 명료성에 영향을 준다. 문장 조각은 완전한 생각을 담은 문장보다 자연스럽지 않게 들린다.

Alt 텍스트는 차갑고 객관적인 설명일 필요가 없다. 때로는, 그리고 어떤 경우에는 반드시, 사용자의 콘텐츠 경험에 관련이 있다면 뉘앙스, 맥락, 심지어 감정까지 전달해야 한다.

코드 예시: 올바른 경우와 잘못된 경우

이론은 한 가지이고, 실제 HTML에서 어떻게 구현되는지는 또 다른 문제다.

정보 제공용 이미지 — 나쁜 alt 텍스트:

<img src='team-photo.jpg' alt='photo'>

정보 제공용 이미지 — 좋은 alt 텍스트:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

기능적 이미지(링크된 로고) — 나쁜 alt 텍스트:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

기능적 이미지(링크된 로고) — 좋은 alt 텍스트:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

장식용 이미지 — 올바른 구현:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

복잡한 이미지(차트) — 긴 설명 링크를 포함한 올바른 접근:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

눈에 보이는 텍스트 레이블이 없는 아이콘 버튼의 경우, 버튼 자체에 aria-label을 사용하고 아이콘 이미지에는 alt=''를 설정해 중복 읽기를 피하라.

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

특정 이미지 유형 다루기

전자상거래의 제품 이미지: 이는 웹에서 가장 중요한 alt 텍스트 맥락 중 하나다. 시각장애 사용자는 구매를 고려하는 제품을 이해하기 위해 alt 텍스트에 전적으로 의존한다. 제품명만 설명하는 것은 충분하지 않다. 소재, 색상, 주요 시각적 특징, 시각적으로 구분 가능한 모든 변형을 포함하라. 예를 들어, alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels'는 alt='Blazer'보다 훨씬 유용하다.

로고: 로고는 결코 장식용이 아니다. 조직 이름과 로고 이미지 안에 포함된 의미 있는 태그라인이나 설명을 포함하는 alt 텍스트가 필요하다. 로고가 링크이기도 하다면, 위에서 설명한 것처럼 alt 텍스트는 링크의 목적지를 설명해야 한다.

인포그래픽: 인포그래픽은 제대로 다루기 notoriously 어려운 유형이다. 단일 alt 속성으로 복잡한 인포그래픽의 정보량을 모두 담을 수는 없다. 올바른 접근은 짧은 요약 수준의 alt 텍스트(예: alt='Infographic summarizing five steps of our onboarding process')와, 같은 정보를 페이지에 구조화된 텍스트 버전으로 제공하는 것을 병행하는 것이다.

사람의 이미지: 특히 편집·뉴스 맥락에서는 사람이 식별되는 경우 이름을 포함하는 것이 도움이 된다. 사람의 외형만이 아니라 그 사람이 무엇을 하고 있는지, 이미지가 무엇을 전달하는지 설명하라. 사람을 인구통계학적 특성으로만 환원하는 설명은 피하라.

배경 및 CSS 이미지: CSS background-image로 적용된 이미지는 사용할 수 있는 alt 속성이 없으므로, 진정한 장식 목적에만 사용해야 한다. 의미를 전달해야 하는 이미지는 HTML의 <img> 요소로 포함하고 적절한 alt 텍스트를 제공해야 한다.

워크플로에 Alt 텍스트를 녹여 넣기

Alt 텍스트가 규모 있게 계속 깨져 있는 이유 중 하나는, 이를 출시 후 자동 스캐너가 발견하면 급히 패치하는, 마지막 단계의 사후 작업으로 취급하기 때문이다. 해결책은 alt 텍스트를 콘텐츠 및 개발 워크플로의 상류로 끌어올리는 것이다.

콘텐츠 팀의 경우, 가장 흔한 이미지 유형을 다루는 alt 텍스트 하우스 스타일 가이드를 수립하는 것을 의미한다. 사이트가 제품 이미지, 블로그 포스트 히어로 이미지, 행사 사진, 데이터 차트를 게시한다면, 각 범주는 좋은 설명과 나쁜 설명의 예시를 포함한 문서화된 기준이 필요하다. 작성자와 편집자가 이미지를 업로드할 때는 캡션과 이미지 선택을 고민하는 바로 그 순간에 alt 텍스트도 함께 고민해야 한다.

개발자의 경우, CMS 템플릿에 alt 텍스트 필드를 포함하고, 장식용이 아닌 이미지 컴포넌트에 대해서는 선택 사항이 아니라 필수로 지정하는 것을 의미한다. 컴포넌트가 이미지를 받는다면, 인터페이스는 alt 텍스트를 입력하도록 요구하고 정보 제공용 맥락과 장식용 맥락을 구분해야 한다. alt 속성을 이미지 파일명이나 캡션 텍스트로 자동 채우는 것은 피하라. 둘은 서로 다른 목적을 가진 서로 다른 것이다.

QA 및 컴플라이언스 담당자의 경우, Accsible 같은 접근성 오버레이 솔루션을 포함한 자동 스캐닝 도구는 누락되었거나 빈 alt 속성을 가진 이미지를 대규모로 탐지해 실시간으로 표시할 수 있다. 하지만 자동 도구는 존재하는 alt 텍스트가 실제로 의미 있는지 평가할 수 없으며, 그 판단은 사람 검토자가 해야 한다. 접근성 감사 주기에 수동 샘플 검사를 포함하고, 이미지가 포함된 새로운 기능의 승인 기준에 alt 텍스트 품질 검토를 포함하라.

같은 이미지가 여러 페이지나 맥락에서 재사용될 때, 적절한 alt 텍스트가 달라질 수 있다는 점을 기억하라. 회사 본사 사진이 "Contact Us" 페이지와 "About Our Culture" 페이지에 모두 사용된다면, 각 페이지가 전달하려는 메시지에 따라 서로 다른 설명이 필요할 수 있다. WordPress 같은 CMS 플랫폼은 바로 이런 이유로 게시물 수준의 alt 텍스트 재정의를 허용한다.

피해야 할 흔한 실수

Alt 텍스트를 진지하게 다루는 팀조차 반복적으로 저지르는 실수가 있다. 다음은 특히 주의 깊게 살펴볼 만한 패턴들이다.

• 파일명을 alt 텍스트로 사용하는 것. IMG_4521.jpg나 hero-banner-v3-final.png 같은 alt 텍스트는 쓸모없을 뿐 아니라, 스크린 리더 사용자에게 아무도 그들을 고려하지 않았다는 신호를 적극적으로 보낸다.
• alt 텍스트를 인접한 캡션과 동일하게 만드는 것. 캡션과 alt 텍스트는 서로 다른 사용자와 목적을 위해 존재한다. 캡션은 시각 사용자에게 부가적인 맥락을 제공하고, alt 텍스트는 이미지를 볼 수 없는 사용자를 위해 이미지를 대체한다. 둘이 겹칠 수는 있지만, 그대로 복사해 서로 바꿔 쓰면 안 된다.
• 모든 이미지에 무차별적으로 alt 텍스트를 추가하는 것. 장식용 이미지에 설명적 alt 텍스트를 부여하면 스크린 리더 사용자가 관련 없는 콘텐츠를 헤쳐 나가야 한다. "이 이미지에 설명이 필요한가? 필요하다면 어떤 설명인가?"를 결정하는 훈련은 글쓰기만큼이나 중요하다.
• 모호하고 맥락 없는 설명을 쓰는 것. 제품 출시 중인 CEO 사진에 alt='man smiling'이라고만 쓰면, 이미지가 왜 거기에 있는지, 맥락에서 무엇을 의미하는지 거의 아무것도 전달하지 못한다.
• SVG의 alt 텍스트를 무시하는 것. 인라인 SVG 역시 접근 가능한 이름이 필요하며, 일반적으로 <svg> 요소에 aria-label을 사용하거나 첫 번째 자식으로 <title> 요소를 두고 role='img'와 결합하는 방식으로 제공한다.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

핵심 요약

• 모든 이미지에 텍스트 설명이 필요한 것은 아니다. 장식용 이미지는 alt=''를 사용해 스크린 리더가 건너뛰도록 해야 한다. 다만 alt 속성 자체를 생략해서는 안 되며, 그렇지 않으면 스크린 리더가 파일명을 읽어버릴 수 있다.
• 정보 제공용 이미지의 alt 텍스트는 125자 이하로 유지하라. 스크린 리더는 더 긴 문자열을 잘라낼 수 있으며, 간결함은 청취 이해도를 높인다. 복잡한 이미지의 경우, 짧은 alt 요약과 페이지 본문의 전체 텍스트 설명을 함께 제공하라.
• 형태가 아니라 기능을 설명하라. 링크 및 기능적 이미지의 alt 텍스트는 이미지가 어떻게 생겼는지가 아니라, 사용자가 무엇을 하게 되거나 어디로 이동하게 되는지를 알려야 한다. 정보 제공용 이미지의 경우, 단순한 시각적 내용이 아니라 의미를 전달하라.
• Alt 텍스트를 출시 후 수정이 아닌, 워크플로 상류에 통합하라. CMS에서 필수 입력 필드로 만들고, 콘텐츠 스타일 가이드에 포함하며, QA 프로세스에 품질 검토를 추가하라. 자동화 도구는 누락된 alt 텍스트를 잡아내지만, 그것이 의미 있는지 평가하는 일은 사람이 해야 한다.
• 법적·규제적 리스크는 실제로 존재하며 증가하고 있다. Alt 텍스트 누락을 언급한 ADA 소송은 2024년에만 수천 건에 달했으며, EU의 Accessibility Act는 이미 발효되었다. Alt 텍스트를 사후에 대충 처리하는 전략으로는 컴플라이언스를 충족할 수 없다.