alt 속성의 정의 및 사용법

이미지를 의미하는 <img> 태그의 alt 속성은
이미지의 대체 텍스트(alternative text)를 지정합니다. 선택적(옵션)으로 사용할 수 있습니다.

시각장애인을 위한 스크린 리더를 사용하는 사용자에게 이미지 대신 사용자가 이해할 수 있는 대체 텍스트로 설명할 수 있어서 웹 접근성 차원에서 매우 유용합니다. 또한 일부 브라우저(예를 들어, 크롬)에서는 네트워크 오류, 콘텐츠 차단 등 어떤 이유로 이미지를 표시할 수 없는 경우에 이 속성의 값을 텍스트로 대신 보여줍니다.

HTML 
<img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
브라우저에서 실제 표시된 모습

올바른 사용 방법

웹 접근성 차원에서 이미지의 대체 수단으로 텍스트를 제공하기 위한 alt 속성의 올바른 사용 방법에 대해 알아봅니다.

HTML5 명세서에서는 이미지의 alt 속성 사용에 대한 다양한 요구사항을 제시하고 있습니다.
이러한 요구사항은 웹 페이지의 접근성을 보장하고 다양한 사용자, 특히 시각장애인을 포함한 접근성 도구 사용자들에게 이미지의 내용을 효과적으로 전달하기 위함입니다. 여기서는 명세서를 토대로 alt 속성의 요구사항에 대해 자세히 설명하겠습니다.

일반적인 가이드라인

이미지에 대체 텍스트를 제공하는 것은 웹 접근성을 향상시키는 중요한 요소입니다. 사용자가 이미지를 이해하고 페이지의 콘텐츠를 완전히 접근할 수 있도록 적절하고 명확한 대체 텍스트를 작성하는 것이 필요합니다. alt 속성의 값은 이미지의 목적과 의미를 이해할 수 있도록 설명하는 데 중점을 두어야 합니다.

대체 텍스트 작성 방법
  • 모든 이미지를 alt 속성의 텍스트로 대체했을 때 페이지의 의미가 변하지 않아야 합니다.
  • 대체 텍스트에는 이미지의 캡션 , 제목 또는 범례 로 간주될 수 있는 텍스트가 절대 포함되어서는 안 된다는 것입니다. 이미지 대신 사용자가 사용할 수 있는 대체 텍스트를 포함해야 하며 이미지를 보완하기 위한 것이 아닙니다. 이미지의 보충 정보는 title 속성을 사용할 수 있습니다.

대체 텍스트는 이미지의 존재를 언급하지 않고도 전화로 누군가에게 페이지를 읽어 줄 때 사용할 수 있는 텍스트로 작성하는 것이 좋습니다. 이미지 대신 말하는 것이 일반적으로 대체 텍스트를 쓰기에 좋은 시작입니다.

이미지만 포함된 링크나 버튼에 대한 대체 텍스트 제공

링크나 버튼을 생성하는 <a> 태그나 <button> 태그가 텍스트 콘텐츠 없이 이미지만 포함하는 경우, alt 속성은 링크나 버튼의 목적을 전달하는 텍스트를 포함해야 합니다.

예시 1

예를 들어, 사용자가 선호하는 색상을 선택하는 경우, 각 이미지는 색상의 이름을 대체 텍스트로 제공하여 이미지를 표시하지 않는 사용자도 목적을 이해할 수 있게 합니다. 색상 선택 예시에서는 각 색상 이미지에 대해 색상 이름을 alt 속성에 제공하여 사용자가 색상을 선택할 수 있도록 돕습니다.

HTML 
<h1>색상을 선택하세요</h1>
<ul>
    <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
    <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
    <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>
예시 2

버튼 예시에서는 각 이미지가 RGB 또는 CMYK 프로필을 나타내며, 각 이미지는 텍스트의 한 부분을 나타내므로 다음과 같이 작성할 수 있습니다.

HTML 
<button name="rgb">
    <img src="red" alt="R">
    <img src="green" alt="G">
    <img src="blue" alt="B">
</button>
<button name="cmyk">
    <img src="cyan" alt="C">
    <img src="magenta" alt="M">
    <img src="yellow" alt="Y">
    <img src="black" alt="K">
</button>

물론, 예시 버튼에 이미지에 통합되어 있으면 다음과 같이 제공될 수 있습니다.

HTML 
<button name="rgb">
    <img src="rgb" alt="RGB">
</button>
<button name="cmyk">
    <img src="cmyk" alt="CMYK">
</button>

그래프, 다이어그램, 차트, 지도 등에 대한 대체 텍스트 제공

  • 그래픽 형태로 더 명확하게 표현될 수 있는 것들, 예를 들어 플로우차트, 다이어그램, 그래프, 방향을 보여주는 단순한 지도 등이 있습니다. 이런 경우 <img> 태그를 사용하여 이미지를 제공할 수 있지만, 이미지를 볼 수 없는 사용자들을 위해 텍스트 형태로도 동일한 메시지를 전달해야 합니다.
  • 이를 위해 alt 속성에 텍스트를 제공해야 하며, 이 텍스트는 src 속성에 지정된 이미지의 메시지를 동일하게 전달해야 합니다.
예시

플로우차트를 이미지로 포함한 예시에서는 alt 속성에 플로우차트를 서술한 텍스트를 제공하여 이미지를 볼 수 없는 사용자도 메시지를 이해할 수 있습니다.

HTML 
<p>
    일반적인 경우,
    토큰화 단계에서 처리되는 데이터는 네트워크에서 오지만,
    스크립트에서도 올 수 있습니다.
</p>
<p>
    <img
        src="images/parsing-model-overview.svg"
        alt="네트워크가 데이터를 입력 스트림 전처리기에 전달하고,
             그 다음에 토크나이저가 처리하고, 트리 구성 단계로 전달됩니다.
             그 후 데이터는 DOM과 스크립트 실행으로 이어집니다.
             스크립트 실행은 DOM과 연결되며,
             document.write()를 사용하여
             토크나이저에 데이터를 전달합니다.">
</p>
올바른 방법과 잘못된 방법

이미지 설명에 대한 좋은 해결책과 나쁜 해결책을 보여주는 예시가 있습니다.

HTML 
<!-- 올바르게 표현된 예시 -->
<p>
    당신은 집 서쪽의 넓은 뜰에 서 있습니다.
    <img src="house.jpeg" alt="집은 흰색이며, 입구에는 판자로 막힌 문이 있습니다.">
    여기에는 작은 우체통이 있습니다.
</p>
HTML 
<!-- 잘못된 예시 -->
<p>
    당신은 집 서쪽의 넓은 뜰에 서 있습니다.
    <img src="house.jpeg" alt="집">
    여기에는 작은 우체통이 있습니다.
</p>

잘못된 예시에서는 이미지를 설명하는 대체 텍스트가 제공되었지만, 이미지가 표시되지 않을 경우 텍스트의 흐름이 자연스럽지 않습니다.

그래픽 요소를 대체할 수 있는 텍스트는 이미지를 보지 못하는 사용자들이 콘텐츠를 이해할 수 있도록 해야 합니다.
alt 속성은 이미지의 대체로서의 역할을 수행하며, 이미지의 설명이 아닌 메시지를 전달하는 데 중점을 두어야 합니다.

아이콘, 로고 등에 대한 대체 텍스트 제공

웹 페이지에는 아이콘 형태로 정보를 포함할 수 있습니다. 아이콘은 시각적으로 브라우저를 접근할 수 있는 사용자가 기능을 한눈에 인식하도록 돕기 위한 것입니다.

아이콘이 텍스트와 함께 사용되어 그 의미가 명확하게 전달하는 경우

텍스트 레이블이 없는 아이콘은 그 자체로 설명이 되어야 합니다. 이 경우 alt 속성에 해당 아이콘을 대신할 수 있는 텍스트 레이블을 제공해야 합니다. 하지만, 어떤 경우에는 아이콘이 텍스트와 함께 사용되어 그 의미가 명확하게 전달하기도 합니다. 그런 경우에는 alt 속성은 있어야 하지만 값은 비워두어야 합니다.

HTML 여기서 아이콘은 같은 의미를 전달하는 텍스트 옆에 있으므로 비어 있는 alt 속성을 갖습니다. 
<nav>
    <p>
        <a href="/help/"><img src="/icons/help.png" alt=""> 도움말</a>
     </p>
    <p>
        <a href="/configure/"><img src="/icons/configuration.png" alt=""> 설정 도구</a>
    </p>
</nav>
로고가 페이지 제목 등에서 엔티티를 대표하는 경우

로고가 페이지 제목 등에서 엔티티를 대표하는 경우, alt 속성은 해당 엔티티의 이름을 포함해야 합니다. "로고"와 같은 단어는 포함되지 않아야 합니다.

HTML 
<h1><img src="XYZ.gif" alt="XYZ 회사"></h1>
로고가 장식적 요소로 사용되거나, 토론의 주제로 사용될 경우

로고가 장식적 요소로 사용되거나, 토론의 주제로 사용될 경우에는 그에 따라 대체 텍스트를 제공해야 합니다.

HTML 
<p>그들의 로고를 고려해 보세요:</p>
<p><img src="/images/logo" alt="녹색 원 안에 중앙에 녹색 물음표가 있는 로고입니다."></p>

아이콘, 로고 등은 시각적으로 브라우저를 접근할 수 있는 사용자가 한눈에 인식할 수 있도록 도움을 주는 것이 목적입니다. 따라서 alt 속성을 통해 이미지가 제공하는 정보를 텍스트로 대체하여 시각적으로 접근할 수 없는 사용자들에게도 내용을 이해할 수 있도록 해야 합니다.

텍스트를 시각적 효과를 주기 위해 이미지로 렌더링하는 경우

때로는 이미지가 텍스트만으로 구성되고, 텍스트를 시각적 효과를 주기 위해 이미지로 렌더링하는 경우가 있습니다. 이런 경우에는 alt 속성이 반드시 존재해야 하지만 이미지 자체에 쓰여진 것과 동일한 텍스트로 구성되어야 합니다.

예시

"지구의 날"이라는 텍스트를 제목으로 사용하려고 합니다. 하지만, 실제 텍스트를 사용하지 않고 시각적 효과를 주기 위해서 "지구의 날"이라는 텍스를 디자인하고 꽃과 식물로 장식한 그래픽을 추가해서 이미지에 표시했습니다. 이 이미지를 텍스트 대신 제목으로 사용할 경우 alt 속성은 단순히 "지구의 날"이라는 텍스트와 동일해야 합니다.

HTML 
<h1><img src="earthdayheading.png" alt="지구의 날"></h1>

텍스트가 시각적 효과를 주기 위해 이미지로 렌더링될 경우, 그 이미지의 대체 텍스트는 시각적 효과가 아니라 텍스트 자체를 전달해야 합니다. 이는 시각적으로 접근할 수 없는 사용자들에게도 내용을 이해할 수 있도록 하는 중요한 요구사항입니다.

주변 텍스트를 보완하는 그래픽 표현인 경우

이미지가 주된 콘텐츠가 아닌 단순히 주변 텍스트를 보완하는 역할을 하는 경우, alt 속성은 반드시 존재해야 하지만 빈 문자열("")로 설정해야 합니다. 이러한 이미지는 페이지의 유용성을 저해하지 않으며, 시각장애인이 아닌 사용자에게는 사용자에게는 이해를 돕기 위해 유용합니다.

예시 1

아래 예시는 이전 문단의 텍스트 내용을 그래픽 형태로 반복하는 흐름도를 보여줍니다. 이러한 경우, alt 속성은 빈 문자열("")로 설정합니다.

HTML 
<p>
    네트워크는 데이터를 입력 스트림 전처리기로 전달하고,
    이는 토크나이저로 전달되며, 다시 트리 구성 단계로
    전달됩니다. 여기서 데이터는 DOM과 스크립트 실행 단계로
    전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며,
    document.write()를 사용하여 데이터를
    토크나이저로 전달합니다.
</p>
<p><img src="images/parsing-model-overview.svg" alt=""></p>
예시 2 (캡션을 포함하는 경우)

alt 속성에는 이미지의 캡션을 포함하지 않아야 합니다. 캡션을 포함하려면 title 속성을 사용하거나 <figure> 및 <figcaption> 태그를 사용해야 합니다.

<figure> 및 <figcaption> 태그를 사용하는 경우, 대체 텍스트는 이미지의 설명이 아니라, 이미지를 대체하는 텍스트여야 합니다.

좋은 해결책과 나쁜 해결책을 보여주는 예시가 있습니다.

HTML 올바르게 표현된 예시 
<!-- title 속성 사용 예 -->
<p>
    네트워크는 데이터를 입력 스트림 전처리기로 전달하고,
    이는 토크나이저로 전달되며, 다시 트리 구성 단계로
    전달됩니다. 여기서 데이터는 DOM과 스크립트 실행 단계로
    전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며,
    document.write()를 사용하여 데이터를
    토크나이저로 전달합니다.
</p>
<p><img src="images/parsing-model-overview.svg" alt="" title="파싱 모델의 흐름도"></p>

<!-- figure 및 figcaption 사용 예 -->
<p>
    네트워크는 데이터를 입력 스트림 전처리기로 전달하고,
    이는 토크나이저로 전달되며, 다시 트리 구성 단계로
    전달됩니다. 여기서 데이터는 DOM과 스크립트 실행 단계로
    전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며,
    document.write()를 사용하여 데이터를
    토크나이저로 전달합니다.
</p>
<figure>
    <img
        src="images/parsing-model-overview.svg"
        alt="네트워크가 입력 스트림 전처리기로 이어지고,
             이는 토크나이저로 이어지며, 토크나이저는
             트리 구성 단계로 이어집니다.
             트리 구성 단계는 스크립트 실행과 DOM으로
             이어집니다. 
             스크립트 실행은 document.write()를 통해
             다시 토크나이저로 이어집니다.">
    <figcaption>파싱 모델의 흐름도</figcaption>
</figure>
HTML 잘못된 예시 - alt 속성에는 이미지의 캡션을 포함하지 않아야 합니다. 
<p>
    네트워크는 데이터를 입력 스트림 전처리기로 전달하고,
    이는 토크나이저로 전달되며, 다시 트리 구성 단계로
    전달됩니다. 여기서 데이터는 DOM과 스크립트 실행 단계로
    전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며,
    document.write()를 사용하여 데이터를
    토크나이저로 전달합니다.
</p>
<p><img src="images/parsing-model-overview.svg" alt="파싱 모델의 흐름도"></p>

주변 텍스트를 보완하는 그래픽 표현의 경우, alt 속성은 빈 문자열("")로 설정해야 하며, 캡션을 포함하려면 title 속성이나 <figure> 및 <figcaption> 태그를 사용해야 합니다. 대체 텍스트는 이미지의 설명이 아니라 이미지를 대체하는 텍스트여야 합니다.

부수적이거나 보조 이미지인 경우

부수적이거나 보조 이미지는 콘텐츠에 반드시 필요하지 않지만, 단순히 장식적이거나 텍스트와 완전히 중복되지 않는 경우를 말합니다. 이러한 경우, alt 속성은 반드시 존재해야 하며, 빈 문자열이나 이미지가 전달하는 정보를 텍스트로 표현해야 합니다. 이미지에 캡션이 있는 경우, alt 속성의 값이 비어있으면 안 됩니다. 이는 스크린 리더를 사용하는 시각장애인 사용자에게 혼란을 줄 수 있기 때문입니다.

맥락 없이 표시된 이미지

이미지가 맥락 없이 표시될 때는 대체 텍스트가 제공되지 않아도 됩니다.

HTML 
<p>
    <img src="president.jpeg" alt="">
    오늘의 국민투표를 앞두고,
    대통령은 모든 등록 유권자에게 공개 서한을 작성했습니다.
    그녀는 국가가 분열되어 있다고 인정했습니다.
</p>

이 경우, 얼굴만 나오는 사진이라면 머리 색깔이나 피부 색깔, 눈의 개수 등은 독자에게 중요하지 않을 수 있습니다.

이미지가 전달하는 분위기 설명

이미지가 정치인의 감정을 표현하는 경우, 대체 텍스트가 기사 톤을 설정하는 데 유용할 수 있습니다.

HTML 
<p>
    <img src="president.jpeg" alt="대통령이 슬퍼 보입니다.">
    오늘의 국민투표를 앞두고,
    대통령은 모든 등록 유권자에게 공개 서한을 작성했습니다.
    그녀는 국가가 분열되어 있다고 인정했습니다.
</p>

<p>
    <img src="president.jpeg" alt="대통령이 행복해 보입니다!">
    오늘의 국민투표를 앞두고,
    대통령은 모든 등록 유권자에게 공개 서한을 작성했습니다.
    그녀는 국가가 분열되어 있다고 인정했습니다.
</p>

여기서 대통령이 "슬퍼 보인다"거나 "행복해 보인다"는 것이 독자가 텍스트를 해석하는 방식에 영향을 미칩니다.

이미지에 캡션이 있는 경우

이미지에 캡션이 있을 때는 대체 텍스트를 포함하여 시각적이지 않은 사용자가 캡션이 무엇을 가리키는지 이해할 수 있게 해야 합니다.

HTML 
<p>
    오늘의 국민투표를 앞두고,
    대통령은 모든 등록 유권자에게 공개 서한을 작성했습니다.
    그녀는 국가가 분열되어 있다고 인정했습니다.
</p>
<figure>
    <img
        src="president.jpeg"
        alt="높은 이마, 쾌활한 표정,
             그리고 어두운 머리카락이 대통령의 얼굴을 완성합니다.">
    <figcaption>루리타니아의 대통령. 사진 © 2014 PolitiPhoto. </figcaption>
</figure>

부수적인 이미지는 콘텐츠에 필수적이지 않지만 의미를 전달할 수 있는 경우, alt 속성을 사용해야 합니다. 이미지만으로 전달되는 중요한 정보가 있다면 대체 텍스트를 제공해야 하며, 이미지에 캡션이 있는 경우 혼란을 방지하기 위해 대체 텍스트를 반드시 포함해야 합니다.

순전히 장식용 이미지인 경우

순전히 장식적인 이미지는 정보 제공 목적이 아니며, 페이지 특정 콘텐츠와 직접적으로 관련이 없는 경우를 말합니다. 이런 이미지는 사이트 전체 디자인의 일환으로 CSS에 지정하는 것이 바람직합니다.

하지만, 장식적이지만 여전히 콘텐츠의 일부로서 의미가 있는 이미지는 <img> 태그를 사용하여 페이지에 포함될 수 있습니다. 이러한 경우, alt 속성은 반드시 존재해야 하며 그 값은 빈 문자열("")이어야 합니다.

예시

다음은 장식적이지만 관련 있는 이미지를 사용하는 예시입니다. 예를 들어, 도심 행사에 대한 블로그 게시물에 도심의 풍경 사진을 포함하거나, 시를 낭송하는 페이지에 그 시에서 영감을 받은 그림 이미지를 포함하는 경우입니다.

아래는 후자의 예시로, 시 "The Lady of Shalott"의 첫 번째 절과 그와 관련된 장식 이미지가 포함된 경우입니다.

HTML 
<h1>Shalott의 여인</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>
    강 양쪽에는
    <br>
    긴 보리밭과 호밀밭이 펼쳐져 있으며,
    <br>
    그 밭들은 언덕을 덮고 하늘과 만난다;
    <br>
    그리고 그 밭을 통해 길이 지나간다
    <br>
    많은 탑들이 있는 카멜롯으로;
    <br>
    사람들은 오르락내리락 하며,
    <br>
    백합이 피어있는 곳을 바라본다
    <br>
    아래에 있는 섬 주위로,
    <br>
    그 섬은 샬롯 섬이다.
</p>

순전히 장식적인 이미지는 정보 제공 목적이 아니며, 페이지 특정 콘텐츠와 직접적으로 관련이 없을 때 CSS에 지정해야 합니다. 하지만 콘텐츠와 약간의 관련이 있는 장식적인 이미지는 <img> 태그로 포함할 수 있으며, 이 경우 alt 속성은 빈 문자열("")로 설정해야 합니다.

중요한 콘텐츠의 일부인 이미지인 경우

어떤 경우에는 이미지가 콘텐츠의 중요한 부분을 차지합니다. 예를 들어, 사진 갤러리 페이지에서는 이미지 자체가 페이지의 핵심 내용입니다. 이미지가 콘텐츠의 중요한 부분인 경우, 이미지에 대한 대체 텍스트를 제공하는 방법은 이미지의 출처에 따라 다릅니다.

상세한 대체 텍스트를 제공할 수 있는 경우, 예를 들어 잡지 리뷰에 있는 스크린샷, 만화의 일부, 또는 사진 블로그에 포함된 사진 등에서는, 이미지를 대체할 수 있는 텍스트를 alt 속성에 제공해야 합니다.

예시 1

새 운영체제의 스크린샷 갤러리에 있는 스크린샷과 그에 대한 대체 텍스트

HTML 
<figure>
    <img
        src="KDE%20Light%20desktop.png"
        alt="바탕화면은 파란색이며, 왼쪽에 두 열로 시스템, 홈, K-메일 등의
             아이콘이 있습니다. 
             창이 열려 있으며, 메뉴가 창에 맞지 않으면 두 번째 줄로 감싸집니다.
             창 상단에는 아이콘 목록이 있고, 주소 표시줄이 그 아래에 있으며,
             왼쪽 가장자리에 탭용 아이콘 목록이 있습니다. 
             하단에 상태 표시줄이 있으며, 중앙에는 두 개의 창이 있습니다. 
             바탕화면 하단에는 몇 개의 버튼, 페이지 전환기,
             열린 응용 프로그램 목록, 시계가 있습니다.">
    <figcaption>KDE 바탕화면의 스크린샷.</figcaption>
</figure>
예시 2

금융 보고서에 포함된 그래프

HTML 
<img src="sales.gif"
     title="판매 그래프"
     alt="1998년부터 2005년까지 매년 판매량 증가율은 다음과 같습니다.
          624%, 75%, 138%, 40%, 35%, 9%, 21%">

이 경우 "판매 그래프"라는 대체 텍스트는 적절하지 않습니다. 대체 텍스트는 이미지를 대체할 수 있는 상세한 설명이어야 합니다.

콘텐츠의 중요한 부분인 이미지는 출처에 따라 적절한 대체 텍스트를 제공해야 합니다. 상세한 대체 텍스트는 alt 속성에 제공하며, 이는 이미지를 대체할 수 있는 충분한 정보를 포함해야 합니다.

완전한 설명이 어려운 이미지인 경우

일부 이미지의 경우, 자세한 대체 텍스트를 제공하는 것이 현실적으로 불가능합니다. 예를 들어, 불분명한 이미지, 복잡한 프랙탈(일부 작은 조각이 전체와 비슷한 기하학적 형태), 세부적인 지형도 등이 그 예입니다. 이러한 경우에도 alt 속성에는 적절한 대체 텍스트를 포함해야 하지만, 다소 간략하게 작성할 수 있습니다.

예시

때로는 이미지에 정의를 내릴 수 있는 텍스트가 전혀 없는 경우가 있습니다. 예를 들어, 로르샤흐 잉크 반점 검사를 유용하게 설명할 수 있는 내용은 거의 없습니다. 그러나 아무리 간단하더라도 설명은 아무것도 없는 것보다는 낫습니다.

HTML 
<figure>
    <img
        src="/commons/a/a7/Rorschach1.jpg"
        alt="좌우 대칭의 불분명한 가장자리를 가진
             모양으로, 중앙에 작은 틈이 있으며,
             중앙에서 약간 벗어난 두 개의 큰 틈이
             있습니다. 상단 절반이 하단 절반보다 더
             넓으며, 측면은 중앙보다 더 높이 뻗어
             있고, 중앙은 측면 아래로 뻗어 있습니다.">
    <figcaption>로르샤흐 잉크블롯 테스트의 첫 번째 카드의 검은 윤곽선.</figcaption>
</figure>

다음은 대체 텍스트를 사용하는 매우 나쁜 예입니다.

HTML 
<figure>
    <img
        src="/commons/a/a7/Rorschach1.jpg"
        alt="로르샤흐 잉크블롯 테스트의 첫 번째 카드의 검은 윤곽선.">
    <figcaption>로르샤흐 잉크블롯 테스트의 첫 번째 카드의 검은 윤곽선.</figcaption>
</figure>

이런 식으로 대체 텍스트에 캡션을 포함하는 것은 스크린 리더를 사용하는 시각장애인 사용자에게 캡션을 사실상 중복해서 듣게하기 때문에 유용하지 않습니다. 대신, 이미지의 시각적 정보를 직접 제공하는 것이 더 유용합니다.

완전한 설명이 어려운 이미지는 가능한 한 자세한 대체 텍스트를 제공하되, 간략하게 작성할 수 있습니다. 중복된 정보를 피하고 이미지의 시각적 정보를 직접 제공하여 사용자에게 유용한 정보를 전달하는 것이 중요합니다.

내용을 알 수 없는 이미지인 경우

어떤 경우에는 이미지의 대체 텍스트를 전혀 제공할 수 없는 상황이 발생할 수 있습니다. 이는 이미지가 자동으로 수집되었거나 (예: 웹캠), 사용자 제공 이미지로 페이지가 생성되어 적절한 대체 텍스트가 없거나, 저자 자신이 이미지가 무엇을 나타내는지 모르는 경우(예: 시각장애인이 블로그에 공유한 사진)일 수 있습니다. 이런 경우에는 alt 속성을 생략할 수 있지만, 다음 조건 중 하나를 충족해야 합니다.

  • <img> 태그가 <figcaption> 태그를 포함하는 <figure> 태그 내에 있으며, <figcaption> 태그에는 공백 이외의 콘텐츠가 포함되어 있고, <figure> 태그는 공백 외에 다른 콘텐츠를 포함하지 않아야 합니다.
  • title 속성이 존재하며 비어 있지 않은 값을 가져야 합니다.

title 속성에 의존하는 것은 현재 권장되지 않습니다. 많은 브라우저가 이 속성을 접근 가능한 방식으로 노출하지 않기 때문입니다 (예: 마우스와 같은 포인팅 장치가 필요, 이는 키보드 사용자 및 터치스크린 사용자에게는 접근할 수 없음).

이러한 경우는 절대적으로 최소화해야 합니다. 저자가 대체 텍스트를 제공할 수 있는 가능성이 조금이라도 있다면, alt 속성을 생략하는 것은 허용되지 않습니다.

예시

사진 공유 사이트

HTML 
<figure>
    <img src="1100670787_6a7c664aef.jpg">
    <figcaption>버블스는 항상 우리와 함께 여행했습니다.</figcaption>
</figure>

시각장애인의 블로그 사진

HTML 
<article>
    <h1>사진을 찍었습니다</h1>
    <p>오늘 나가서 사진을 찍었습니다!</p>
    <figure>
        <img src="photo2.jpeg">
        <figcaption>앞마당에서 찍은 사진입니다.</figcaption>
    </figure>
</article>

CAPTCHA 이미지

HTML 
<p>
    <label>이 이미지에 적힌 내용을 입력하세요.
        <img src="captcha.cgi?id=8934" title="CAPTCHA">
        <input type="text" name="captcha">
    </label>
    (이미지를 볼 수 없는 경우, <a href="?audio">오디오</a> 테스트를 사용할 수 있습니다.)
</p>

alt 속성은 대체 텍스트를 제공할 수 없을 때만 생략할 수 있으며, 저자의 노력 부족은 alt 속성을 생략하는 정당한 이유가 될 수 없습니다.

사용자를 위한 것이 아닌 이미지인 경우

일반적으로 저자는 이미지를 보여주는 목적 이외의 용도로 <img> 태그를 사용하지 않아야 합니다.

<img> 태그가 이미지를 보여주는 목적 이외의 용도로 사용되는 경우(예: 페이지 조회수를 세는 서비스의 일환으로 사용되는 경우), alt 속성은 빈 문자열("")이어야 합니다. 이러한 경우, width와 height 속성은 모두 0으로 설정되어야 합니다.

예시 (페이지 조회수를 세기 위한 <img>)
HTML 
<img src="tracker.png" alt="" width="0" height="0">

위의 예시는 페이지 조회수를 추적하기 위한 이미지 요소로, 사용자가 보지 못하도록 크기를 0으로 설정하고, 대체 텍스트를 빈 문자열("")로 지정한 경우입니다.

이미지를 볼 수 있는 특정 사람을 대상으로 하는 이메일이나 개인 문서에 포함된 이미지인 경우

이 섹션은 웹사이트에 있는 문서, 공용 메일링 리스트에 전송된 이메일, 소프트웨어 문서와 같이 공용으로 접근 가능한 문서나 작성자가 개인적으로 알지 못하는 대상을 위한 문서에는 적용되지 않습니다.

특정 사람이 이미지를 볼 수 있는 것으로 알려진 개인적인 의사소통(예: HTML 이메일)에서 이미지가 포함된 경우, alt 속성을 생략할 수 있습니다. 그러나 이러한 경우에도 저자에게는 사용자가 이미지가 지원되지 않는 메일 클라이언트를 사용할 경우나 문서가 이미지를 쉽게 볼 수 없는 다른 사용자에게 전달될 경우를 대비해, 이미지 유형에 따라 적절한 대체 텍스트를 포함하도록 강력히 권장합니다.

예시 (이미지를 볼 수 있는 특정 사람에게 보내는 개인 이메일)
HTML 
<p>이 사진을 확인해 보세요!</p>
<img src="vacation_photo.jpg">

위의 예시는 특정 수신자가 이미지를 볼 수 있다는 것을 알고 있는 상황에서 보내는 이메일로, alt 속성을 생략한 경우입니다. 하지만, 더 나은 접근성을 위해서는 대체 텍스트를 포함하는 것이 좋습니다.

참고문헌

브라우저 호환성

alt 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
alt 1 12 1 1

같이 보기