alt 제대로 쓰기

alt에 쓰는 글은 그 그림이 페이지에서 맡은 일을 보고 고릅니다. 뜻이 있는 그림은 보이는 것을 한 문장으로 쓰고, 바로 옆에 같은 글이 있거나 꾸밈뿐인 그림은 alt=""로 비우고, 글자를 담은 그림은 그 글자를 씁니다.

그림 넣기 img에서 alt 글이 그림의 읽는 이름이 된다는 것을 봤습니다. 그런데 같은 김치볶음밥 그림도 레시피 페이지 맨 위에서는 요리의 생김새를 보여 주고, 목록 카드에서는 바로 아래 제목 '김치볶음밥'을 한 번 더 보여 줄 뿐입니다. 두 자리에 같은 alt를 쓰면 목록을 듣는 사람은 요리 이름을 카드마다 두 번씩 듣습니다. 이 레슨에서는 그림이 맡은 일에 따라 alt를 고르는 세 갈래와, alt를 빼는 것과 비우는 것의 차이를 봅니다.

1뜻이 있는 그림 — 보이는 것을 한 문장으로

<h1>김치볶음밥</h1>
<img
  src="images/kimchi.svg"
  alt="김치볶음밥 한 그릇"
  width="200"
  height="150"
/>

레시피 페이지의 큰 그림은 요리가 어떻게 생겼는지 보여 줍니다. 그림을 볼 수 없는 사람에게 전화로 설명한다면 할 말을 alt에 씁니다. 화면 읽기 프로그램은 역할 image로 그림이라는 것을 먼저 알립니다. 그래서 alt에는 '그림' · '사진' 같은 말을 붙이지 않고 보이는 것만 씁니다(브라우저 규칙 3).

2옆에 같은 글이 있으면 alt=""

<li>
  <img
    src="images/gyeran-mari.svg"
    alt=""
    width="200"
    height="150"
  />
  <h2>계란말이</h2>
  <p>조리 20분</p>
</li>

목록 카드에서는 그림 바로 아래 제목이 요리 이름을 알려 줍니다. 그림에도 alt="계란말이"를 쓰면, 프로그램은 '계란말이'를 그림으로 한 번, 제목으로 한 번 읽습니다. 그림이 옆 글과 같은 것만 보여 줄 때는 alt=""로 비웁니다. 비운 alt는 '꾸밈 그림'이라는 표시라, 브라우저는 이 그림을 읽는 쪽에 건네지 않습니다. 위 읽기 커서 그림에서 커서가 이 그림을 건너뛰고 제목으로 가는 것이 그 결과입니다. 글이 전하는 것을 되풀이할 뿐인 꾸밈 그림(줄무늬 · 무늬 그림)도 같습니다.

3글자를 담은 그림 — 그 글자를

로고처럼 글자나 이름을 담은 그림은 alt에 그 글자를 씁니다. 레시피 노트 로고는 사이트 이름을 나타내는 그림이라 alt="레시피 노트"입니다. 그림이 링크 안의 유일한 내용이면, 그 alt가 링크의 읽는 이름이 됩니다. 듣는 사람이 누르기 전에 어디로 가는지 알 수 있게 씁니다.

예제

목록 페이지 맨 위의 로고 링크와 카드 한 장입니다. 화면 읽기 프로그램이 이 부분을 지나며 읽을 역할과 이름을 차례로 적어 본 뒤 결과 화면을 펴 보세요.

<a href="index.html">
  <img
    src="images/logo.svg"
    alt="레시피 노트"
    width="48"
    height="48"
  />
</a>
<img
  src="images/kimchi.svg"
  alt=""
  width="200"
  height="150"
/>
<h2>김치볶음밥</h2>

자주 틀리는 곳

틀린 생각: 그림이라는 것을 알리려면 alt에 '사진'이나 '그림'을 붙여야 한다.

<img
  src="images/kimchi.svg"
  alt="김치볶음밥 사진"
  width="200"
  height="150"
/>

프로그램은 역할로 그림이라는 것을 이미 알리고 이름을 읽습니다. 그래서 '그림'과 '사진'이 겹쳐 들립니다.

맞는 규칙: alt에는 보이는 것만 씁니다. 그림이라는 것은 역할 image가 알립니다(브라우저 규칙 3).

틀린 생각: 꾸밈 그림도 자세히 설명할수록 친절하다.

카드마다 그림을 '동그란 접시에 담긴 빨간 볶음밥'처럼 길게 설명하면, 목록을 듣는 사람은 제목에 닿기 전에 카드마다 긴 설명을 지나야 합니다. 카드가 여섯이면 여섯 번입니다.

맞는 규칙: 옆 글이 이미 전하는 그림, 꾸밈뿐인 그림은 alt=""로 비웁니다. 자세한 설명은 그 그림이 뜻을 맡은 자리(레시피 페이지 맨 위)에만 씁니다.

틀린 생각: alt를 빼는 것과 alt=""로 비우는 것은 같다.

<img
  src="images/kimchi.svg"
  width="200"
  height="150"
/>

img에 alt가 없다는 Error입니다. 잰 값 칸의 읽는 이름은 alt=""일 때와 같은 (없음)이지만, 뜻이 다릅니다. alt를 빼면 '이름 없는 그림'으로 남아 읽는 쪽에 건네집니다. 프로그램에 따라 파일 이름을 대신 읽기도 합니다. alt=""는 '꾸밈 그림'이라 아예 건네지 않습니다.

맞는 규칙: img에는 늘 alt를 적습니다. 뜻이 있으면 글을, 꾸밈이면 빈 값("")을 적습니다.

확인 문제

1. 예제의 로고 링크에서 alt="레시피 노트"를 alt=""로 바꿨습니다. 링크의 읽는 이름은 무엇일까요? 이름이 없으면 '없음'이라고 쓰세요.

<a href="index.html">
  <img
    src="images/logo.svg"
    alt=""
    width="48"
    height="48"
  />
</a>
<img
  src="images/kimchi.svg"
  alt=""
  width="200"
  height="150"
/>
<h2>김치볶음밥</h2>

2. 레시피 노트 첫 화면 맨 위에 '오늘의 요리'라는 글자를 그림으로 그린 띠를 넣었습니다. 띠 옆에는 다른 글이 없습니다. 이 그림의 alt에 쓸 글을 쓰세요.

<img
  src="images/today.svg"
  alt="____"
  width="280"
  height="60"
/>

3. 카페 메뉴판의 머리입니다. 검사기가 아래 Error를 띄웠습니다. 로고 바로 옆에는 카페 이름이 글로 있습니다. 3번 줄 다음에 alt를 넣어 고치세요.

<h1>
  <img
    src="images/logo.svg"
    width="48"
    height="48"
  />
  플로우 카페
</h1>

<h1>
  <img
    src="images/logo.svg"
    alt=""
    width="48"
    height="48"
  />
  플로우 카페
</h1>

<h1>
  <img
    src="images/logo.svg"
    alt="플로우 카페"
    width="48"
    height="48"
  />
  플로우 카페
</h1>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 카드 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. alt=""를 alt="계란말이"로 바꿔 저장 · 새로고침한 뒤 화면에서 달라진 곳을 찾아봅니다. 찾지 못했다면 맞게 본 것입니다 — 바뀐 것은 그림의 읽는 이름뿐이고, 이 단원 끝 Accessibility 창과 점검 목록에서 그 창의 Name으로 확인합니다. 그림 파일은 아래에서 받아 images 폴더에 넣습니다.

• gyeran-mari.svg 받기