대체 텍스트, 링크, 쉬운 글

대체 텍스트란

대체 텍스트(alternative text)는 이미지 같은 비텍스트 콘텐츠를 같은 역할을 하는 글로 바꾼 것이다. 스크린 리더 사용자, 이미지가 안 뜨는 환경, 검색 엔진이 읽는다. WCAG 1.1.1 비텍스트 콘텐츠(A)의 요구다.

대체 텍스트가 전하는 것은 이미지가 무엇을 그렸나가 아니라 그 자리에서 무엇을 뜻하나다. 단풍잎 그림은 캐나다를 뜻할 수도, 그냥 가을 장식일 수도 있다. 그래서 같은 사진도 놓인 맥락에 따라 alt가 달라진다.

대체 텍스트를 주는 길은 세 가지다.

방법	쓸 때
`alt` 속성	대부분의 이미지
바로 옆의 본문·캡션	주변 글이 이미 같은 내용을 말할 때. 이미지는 `alt=""`
별도 설명(표, 연결된 페이지)	차트·지도처럼 짧은 alt로 담을 수 없을 때

모든 <img>에는 alt 속성이 있어야 한다. 비우더라도(alt="") 있어야 한다. 속성이 아예 없으면 스크린 리더가 파일 이름이나 URL을 읽는다. 빈 alt는 「장식이거나 대체 내용이 바로 옆에 있다」는 선언이고, 속성이 없는 것은 판단을 안 했다는 뜻이라 보조 기술마다 다르게 처리한다. 그래서 CMS·문서 편집기(WordPress, Word 등)에도 이미지를 장식으로 표시하는 기능이 있어야 하고, 작성자는 그것을 써야 한다.

alt를 쓰는 원칙

원칙	내용
정확하고 동등하게	이미지가 주는 내용과 기능을 그대로 전한다. 겉모습 묘사는 모습 자체가 내용일 때(미술 작품, 천체 사진)만 드물게 필요하고, 그때도 긴 묘사는 alt가 아니라 캡션이나 별도 텍스트 설명으로 넘긴다
짧게	보통 몇 단어, 길어야 한두 문장. 정해진 글자 수 제한은 없다
겹치지 않게	바로 옆 글이 이미 말한 내용을 되풀이하지 않는다
「~의 이미지」 빼기	스크린 리더가 이미 「그래픽」, 「이미지」라고 알린다. 사진·삽화·회화라는 종류가 의미 있을 때만 쓴다
「~로 가는 링크」 빼기	링크라는 사실도 스크린 리더가 알린다
홍보 문구 넣지 않기	장식 사진의 alt에 「최고의 서비스를 약속합니다」를 끼워 넣지 않는다

판단 질문: 이 이미지를 쓸 수 없다면 그 자리에 무엇을 적겠는가? 「아무것도」라면 alt=""다.

직접 해 보는 방법도 있다. 브라우저 확장 등으로 이미지를 모두 숨기고 페이지를 읽어 본다. 이해에 지장이 없으면 그 이미지는 장식이고, 뭔가 빠진 느낌이면 대체 텍스트가 필요한 정보 이미지다. 이미지가 개념을 전하는지, 감정이나 행동을 끌어내는지, 단순한지 복잡한지를 차례로 묻는 결정 트리(W3C WAI의 alt decision tree)도 쓸 만하다.

쓰는 요령	이유
대략 150자 안쪽으로	스크린 리더에 글자 수 제한은 없지만 길면 듣다 지친다. 더 필요하면 캡션·본문·복잡한 이미지 패턴으로 넘긴다
문장 부호를 제대로	마침표가 없으면 다음 내용과 붙어 한 문장처럼 읽힌다
키워드를 채우지 않는다	듣는 사람을 괴롭히고 검색 엔진도 불이익을 준다
파일 이름도 뜻이 통하게	`alt`가 빠지면 파일 이름이 대신 읽힌다. 단어 사이는 밑줄 대신 하이픈, `#`·`&` 같은 기호는 피한다

맥락에 따라 달라지는 alt

같은 우주비행사 사진이 여러 자리에 놓인 경우다.

자리	알맞은 alt	이유
기사 속 사진, 캡션 없음	`alt="우주비행사 엘런 오초아"`	사진이 내용을 전한다. 본문의 경력까지 옮기면 중복이다
같은 내용의 캡션이 바로 옆	`alt=""`	캡션이 이미 말한다
링크 안에 사진만 있음	`alt="우주비행사 엘런 오초아"`	alt가 곧 링크 텍스트다. 「더 보기」는 모호하다
사진과 이름이 한 링크 안에	`alt=""`	링크 텍스트는 이름이 맡는다
회화 작품	`alt="델라웨어강을 건너는 조지 워싱턴을 그린 그림"`	「조지 워싱턴」만으로는 부족하다. 화법이 중요한 미술 맥락이면 본문에서 더 자세히 설명한다

<!-- 사진과 이름을 한 링크로 묶고 사진은 비운다 -->
<a href="/people/ochoa">
  <img src="ochoa.jpg" alt="">
  <strong>엘런 오초아, 우주비행사</strong>
</a>
 
<!-- figure 안에서도 img에는 alt가 필요하다. figcaption과 같은 말을 반복하지 않는다 -->
<figure>
  <img src="ochoa.jpg" alt="우주복을 입고 헬멧을 든 엘런 오초아">
  <figcaption>1993년 첫 우주 비행을 앞둔 엘런 오초아</figcaption>
</figure>

정답이 하나인 alt는 드물다. 같은 이미지라도 글쓴이가 전하려는 바에 따라 달라진다.

이미지 종류별 처리

종류	처리
장식 이미지 (구분선, 분위기 사진, 배경 무늬)	`alt=""`. 가능하면 CSS 배경 이미지로 옮겨 문서에서 뺀다. `<img>`가 아닌 요소는 `role="presentation"`(= `none`)으로 의미만 지우거나, `aria-hidden="true"`로 하위까지 통째로 뺀다. 「장식」의 기준은 사람마다 달라 모든 것을 설명받고 싶어 하는 사용자도 있다. 애매하면 설명을 단다
기능 이미지 (링크·버튼 안의 이미지)	기능을 쓴다. 검색 돋보기면 `alt="검색"`. 링크 텍스트 옆 PDF 아이콘이면 `alt="PDF"`
글자가 든 이미지	이미지 속 글자를 그대로 쓴다. 되도록 진짜 텍스트 + CSS로 바꾼다(WCAG 1.4.5 텍스트 이미지, AA. 로고는 예외)
로고	회사 이름만. 「로고」, 「홈으로」는 붙이지 않는다. 「링크, 그래픽, Acme」만으로 관례가 통한다
이미지 버튼 `<input type="image">`	버튼이 하는 일: `alt="검색"`. 글자만 그린 버튼 이미지는 진짜 `<button>`으로 바꾼다
복잡한 이미지 (차트, 그래프, 인포그래픽, 지도)	짧은 alt + 긴 설명 두 가지가 다 필요하다. alt에는 요지(「연도별 매출 선 그래프」), 긴 설명은 ① 옆의 데이터 표나 연결된 페이지, 페이지 안 점프 링크 ② `<img aria-describedby="설명 id">`(설명은 되도록 화면에 보이게) ③ `<figure>` + `<figcaption>`으로 묶기 중 하나로 준다. 긴 설명은 인지·학습·읽기 장애가 있는 사람에게도 도움이 된다
이미지 맵	바탕 이미지 alt에는 전체 맥락(「뉴욕주 카운티 지도」), `<area>`마다 각자의 alt. 서버 측 이미지 맵은 키보드로 못 쓰니 쓰지 않는다
CSS 배경 이미지	alt를 줄 수 없다. 의미가 있으면 `<img>`로 옮기거나 텍스트를 마크업에 두고 시각적으로만 숨긴다
인라인 SVG	보조 기술이 기본으로 건너뛰거나 「이미지」로만 읽는다. SVG에는 `alt`가 없으니 의미가 있으면 `role="img"` + 첫 자식 `<title>`(또는 `aria-label`)을 준다. 링크 안의 SVG 아이콘에도 이 방식이 보조 기술 지원이 가장 넓다. 장식이면 `aria-hidden="true"`나 `role="presentation"`

<!-- 복잡한 이미지: 짧은 alt + 자세한 대안 -->
<img src="sales.png" alt="2021~2025년 연간 매출 선 그래프">
<a href="/reports/sales-data">매출 데이터 표로 보기</a>
 
<!-- 링크 텍스트 옆 아이콘 -->
<a href="application.pdf">입사 지원서 내려받기 <img src="pdf.svg" alt="PDF"></a>
 
<!-- 의미 있는 SVG / 장식 SVG -->
<svg role="img" aria-label="경고">…</svg>
<svg aria-hidden="true" focusable="false">…</svg>

과거에는 긴 설명을 longdesc 속성으로 연결했지만 지원이 나빠 HTML에서 폐기됐다. 지금은 옆에 보이는 링크나 aria-describedby로 본문의 설명을 잇는다. AI가 자동으로 만든 alt는 맥락을 모르므로 그대로 쓰지 않고 사람이 고친다.

이미지 자체의 접근성

alt만으로 이미지가 접근 가능해지지는 않는다. 그림·지도·도표는 인지·학습 장애가 있는 사람의 이해를 크게 돕는다. 글만 있는 사이트가 더 접근 가능한 것은 아니다.

항목	기준
아이콘	단순하고 일관되고 익숙하게. 아이콘의 뜻은 문화마다 달라 옆에 글을 함께 둔다. 같은 링크 안에 같은 뜻의 글이 있으면 아이콘은 `alt=""`
이미지 속 글자 대비	4.5:1 이상(1.4.3). 아이콘·차트 요소 같은 의미 있는 그래픽은 3:1 이상(1.4.11). 같은 뜻의 글이 옆에 있으면 아이콘은 예외
확대	이미지 속 글자는 확대하면 깨진다. 진짜 텍스트는 어떤 배율에서도 매끄럽고 번역·검색도 된다
색만으로 전달 금지	초록·빨강 날짜만으로 상태를 구분하지 않는다(1.4.1)
움직임과 번쩍임	5초 넘게 움직이면 멈출 수 있어야 하고(2.2.2), 초당 3회 넘는 번쩍임은 피한다(2.3.1)

색·대비·움직임의 자세한 원칙은 색과 움직임의 접근성에 있다.

링크: 목록으로만 들어도 통하게

스크린 리더가 링크를 쓰는 방식

방식	링크 텍스트에 주는 요구
링크 앞에 「링크」를 붙여 읽는다	텍스트나 alt에 「링크」, 「~로 가기」를 넣지 않는다
Tab이나 단축키로 링크만 건너뛴다	앞뒤 문맥 없이도 뜻이 통해야 한다
링크 목록 창을 띄운다(가나다순 정렬도 된다)	첫 낱말이 핵심이어야 한다. 「연락처」가 「여기에서 연락하실 수 있습니다」보다 낫다

WCAG 2.4.4 링크 목적(맥락 안에서, A)은 링크 텍스트와 그 주변 맥락으로 목적을 알 수 있게 요구하고, 2.4.9 링크 목적(링크만으로, AAA)은 링크 텍스트만으로 알 수 있게 요구한다. 목표는 AAA 쪽에 둔다.

링크 텍스트

하지 않는다	대신
「여기를 클릭」, 「더 보기」, 「자세히」	목적지를 말한다: 「오늘의 날씨」
「여기를 클릭해 오늘의 날씨 보기」	「클릭」을 빼고 「오늘의 날씨」만 링크로
문단 전체를 링크로	뜻을 잃지 않는 가장 짧은 구절
기계가 만든 긴 URL을 텍스트로	사람이 읽는 제목. 짧은 도메인 정도는 괜찮다
빈 링크 (아이콘만, alt 없음)	텍스트나 alt가 있는 이미지를 반드시 넣는다
같은 「더 보기」가 여러 개	각각 「접근성 개론 더 보기」처럼 구분한다

카드 UI처럼 디자인상 「더 보기」를 남겨야 하면 시각적으로 숨긴 텍스트로 대상을 덧붙인다. 이때 보이는 글자가 접근 가능한 이름 안에 그대로 들어 있어야 음성 명령 사용자가 「더 보기 클릭」이라고 말해 누를 수 있다(2.5.3 이름 속 라벨, A).

<a href="/articles/a11y-intro">더 보기<span class="visually-hidden">: 접근성 개론</span></a>

title 속성은 마우스를 올려야 보이고 키보드·터치 사용자에게는 거의 전달되지 않으므로 링크 설명을 맡기지 않는다. 링크 텍스트나 alt를 title에 되풀이하면 스크린 리더가 같은 말을 두 번 읽는다(ARIA와 접근 가능한 이름). 시각적 숨김 클래스는 접근성을 위한 CSS와 타이포그래피에 있다.

목적지 알리기

상황	처리
PDF·워드 등 HTML이 아닌 파일	파일 형식을 링크 텍스트 안에: `<a href="1040.pdf">세금 신고서 1040 (PDF)</a>`. 바깥에 두면 링크 목록에서 빠진다
새 창·새 탭으로 열림	링크 텍스트 안에 「(새 창)」. 새 창에서는 뒤로 가기가 안 돼 인지 장애 사용자가 길을 잃는다. 되도록 새 창을 강제하지 않는다(3.2.5 요청에 의한 변화, AAA)
아이콘으로 알림	아이콘의 alt도 링크 안에 둔다. CSS 배경 아이콘은 alt가 없으니 숨긴 텍스트로 같은 정보를 준다
같은 페이지 안 이동	페이지가 바뀌지 않아 헷갈리므로 목차·「위로」처럼 페이지 안 이동임이 드러나게 한다

구분 정보는 앞에 둔다. 「제품 (새 창)」이 「(새 창) 제품」보다 낫다.

링크 묶음

이웃한 링크는 스크린 리더가 한 덩어리로 읽기 쉽다. 목록(<ul>)으로 감싸면 항목 사이가 끊긴다.
긴 링크 목록은 제목을 단 작은 묶음으로 나누고, 본문 앞이면 건너뛰기 링크를 둔다(접근 가능한 페이지 구조).

키보드와 모양

링크는 Tab으로 닿고 Enter로 실행돼야 한다. 비어 있지 않은 href가 있어야 진짜 링크로 포커스를 받는다.
<a href="#" onmouseover="openMenu()">처럼 마우스로만 펼치는 메뉴는 키보드로 하위 항목에 닿지 못한다. 진짜 목적지를 주거나 버튼으로 바꾼다. 링크와 버튼의 구분, 키보드 동작은 키보드 접근성과 포커스 관리에 있다.
본문 속 링크는 밑줄을 지우지 않는다. 밑줄 없이 색으로만 구분하면 주변 글자와 3:1 이상 대비가 있어야 하고, 마우스 호버와 키보드 포커스 때 밑줄 같은 색 아닌 표시가 나타나야 한다(1.4.1).
호버 효과는 포커스에도 똑같이 준다: a:hover, a:focus-visible { … }.
작은 링크는 누르기 어렵다. WCAG 2.2의 2.5.8 타깃 크기(최소, AA)는 포인터 타깃을 24×24 CSS 픽셀 이상이거나 그만큼 간격을 두도록 요구한다. 문장 속 링크는 예외지만, 숫자 하나짜리 페이지 링크처럼 짧은 링크는 padding과 간격으로 타깃을 키운다.

쉬운 글: 인지 부담을 줄이는 글쓰기

흐릿한 글은 모든 독자에게 장벽이고, 읽기·기억·주의력에 어려움이 있는 사람에게는 더 높은 장벽이다. 쉬운 글은 접근성 원칙 중 「이해 가능」의 바탕이다.

구성

원칙	내용
먼저 개요를 짠다	논리적인 순서를 정하고, 그 구조를 제목으로 드러낸다
소개 → 설명 → 요약	무엇을 말할지 알리고, 말하고, 다시 정리한다
한 문단에 요점 하나	요점은 문단 첫 문장에 둔다. 결론을 뒤에 묻지 않는다
주제에서 벗어나지 않는다	초점이 좁을수록 기억에 남는다
끝나면 멈춘다	필요한 말만 한다

문장

원칙	나쁜 예 → 좋은 예
짧은 문장	쉼표로 이어지는 긴 문장 → 한 문장에 한 가지
익숙한 낱말	「제고한다」 → 「높인다」
은어·전문용어 피하기	써야 하면 처음 나올 때 풀이한다
약어는 처음에 풀어 쓴다	「CMS」 → 「콘텐츠 관리 시스템(CMS)」
능동태	「음식이 손님들에 의해 먹혔다」 → 「손님들이 음식을 먹었다」. 행위자보다 대상이 중요할 때만 수동태
힘 있는 동사	「~하는 것이 필요하다」 → 「~한다」
긍정 표현	「더럽히지 마세요」 → 「깨끗이 써 주세요」
이중 부정 피하기	「안 하지 않는다」 → 「한다」
직접 지시	「사용자는 5장을 읽어야 한다」 → 「5장을 읽는다」
나란한 구조	목록 항목의 문법 형태를 맞춘다
글자 그대로	반어·풍자는 오해받기 쉽다

독자의 지성은 믿되 전문 지식은 가정하지 않는다. 읽기·인지 장애 독자를 위해서는 글을 줄이고, 긴 덩어리 대신 짧은 문단과 목록을 쓰고, 그림으로 글을 받친다.

측정

가독성 공식(Flesch Reading Ease, Flesch-Kincaid, Gunning Fog)은 낱말·문장 길이로 학년 수준을 추정한다. 영어 기준 공식이라 한국어에는 그대로 쓰지 못하고, 영어에서도 비교용 참고치일 뿐 명료함을 보증하지 않는다.
확실한 시험은 없다. 대상 독자에게 직접 읽혀 보는 것이 가장 정확하다.
WCAG의 관련 기준은 AAA 등급이다: 3.1.3 낯선 낱말, 3.1.4 약어, 3.1.5 읽기 수준(중학교 수준을 넘으면 보충 자료나 쉬운 버전 제공).

정리

alt는 이미지가 그 자리에서 하는 일을 쓴다. 맥락이 바뀌면 alt도 바뀐다.
모든 <img>에 alt를 두고, 장식이거나 옆 글이 이미 말하면 비운다. 기능 이미지는 기능을, 복잡한 이미지는 요지 + 자세한 대안을 준다.
링크 텍스트는 목록으로만 들어도 목적지를 알 수 있게, 짧게, 핵심을 앞에 쓴다. 파일 형식·새 창은 링크 텍스트 안에서 알린다.
본문 링크는 밑줄과 포커스 표시를 지키고, 작은 링크는 타깃을 키운다.
쉬운 글은 개요 → 짧은 문장 → 익숙한 낱말 순으로 다듬는다.

이미지, 링크, 글 모두 같은 질문으로 점검한다. 눈으로 보지 않고, 앞뒤 맥락 없이도 같은 뜻이 전해지는가.

버그 제보